|
|
|
@ -4,17 +4,17 @@ |
|
|
|
<div class="btn" v-if="mapStyleType == 'light'" v-show="false" @click="shiftMapStyle('dark')">切换深色模式</div> |
|
|
|
<div class="btn" v-show="false" v-else @click="shiftMapStyle('light')">切换浅色模式</div> |
|
|
|
<!-- :style="{ transform: `scale(${zoom})` }" --> |
|
|
|
<cpt-popup ref="popup" @clickListItem="handleClickDotListItem" @operate="handleClickDotBtn"/> |
|
|
|
<cpt-popup ref="popup" @clickListItem="handleClickDotListItem" @operate="handleClickDotBtn" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import {requestPost} from "@/js/dai/request"; |
|
|
|
import { requestPost } from "@/js/dai/request"; |
|
|
|
import nextTick from "dai-js/tools/nextTick"; |
|
|
|
import {Scene, PolygonLayer, LineLayer, MarkerLayer, RasterLayer, PointLayer, Marker, Popup} from "@antv/l7"; |
|
|
|
import {GaodeMap, Map} from "@antv/l7-maps"; |
|
|
|
import {spliceIntoChunks} from "@/utils/index"; |
|
|
|
import {mapType, searchNearby} from "@/utils/dai-map"; |
|
|
|
import { Scene, PolygonLayer, LineLayer, MarkerLayer, RasterLayer, PointLayer, Marker, Popup } from "@antv/l7"; |
|
|
|
import { GaodeMap, Map } from "@antv/l7-maps"; |
|
|
|
import { spliceIntoChunks } from "@/utils/index"; |
|
|
|
import { mapType, searchNearby } from "@/utils/dai-map"; |
|
|
|
import tdtWp from "@/utils/tdt-wp"; |
|
|
|
import tdtWpZw from "@/utils/tdt-wp-zw"; |
|
|
|
import cptPopup from "./popup"; |
|
|
|
@ -130,10 +130,14 @@ export default { |
|
|
|
type: Object, |
|
|
|
default: () => ({}), |
|
|
|
}, |
|
|
|
level: { |
|
|
|
type: String, |
|
|
|
default: '' |
|
|
|
} |
|
|
|
// level: { |
|
|
|
// type: String, |
|
|
|
// default: "", |
|
|
|
// }, |
|
|
|
// peopleType: { |
|
|
|
// type: String, |
|
|
|
// default: "staffAgency", |
|
|
|
// }, |
|
|
|
}, |
|
|
|
components: { |
|
|
|
cptPopup, |
|
|
|
@ -141,107 +145,107 @@ export default { |
|
|
|
|
|
|
|
computed: { |
|
|
|
polygonData() { |
|
|
|
const {srcGridData} = this; |
|
|
|
const { srcGridData } = this; |
|
|
|
if (!srcGridData || !srcGridData.children || !Array.isArray(srcGridData.children)) { |
|
|
|
return {type: "FeatureCollection", features: []}; |
|
|
|
return { type: "FeatureCollection", features: [] }; |
|
|
|
} |
|
|
|
const polygon = [ |
|
|
|
...srcGridData.children |
|
|
|
.filter((item) => item.coordinates.length > 0) |
|
|
|
.map((item) => ({ |
|
|
|
type: "Feature", |
|
|
|
properties: { |
|
|
|
// id: item.id, |
|
|
|
// name: item.name, |
|
|
|
// level: item.level, |
|
|
|
center: [item.longitude, item.latitude], |
|
|
|
...item, |
|
|
|
}, |
|
|
|
geometry: { |
|
|
|
type: "Polygon", |
|
|
|
coordinates: [ |
|
|
|
spliceIntoChunks( |
|
|
|
item.coordinates.split(",").map((item) => parseFloat(item)), |
|
|
|
2 |
|
|
|
).filter((item) => item.length == 2), |
|
|
|
], |
|
|
|
}, |
|
|
|
})), |
|
|
|
.filter((item) => item.coordinates.length > 0) |
|
|
|
.map((item) => ({ |
|
|
|
type: "Feature", |
|
|
|
properties: { |
|
|
|
// id: item.id, |
|
|
|
// name: item.name, |
|
|
|
// level: item.level, |
|
|
|
center: [item.longitude, item.latitude], |
|
|
|
...item, |
|
|
|
}, |
|
|
|
geometry: { |
|
|
|
type: "Polygon", |
|
|
|
coordinates: [ |
|
|
|
spliceIntoChunks( |
|
|
|
item.coordinates.split(",").map((item) => parseFloat(item)), |
|
|
|
2 |
|
|
|
).filter((item) => item.length == 2), |
|
|
|
], |
|
|
|
}, |
|
|
|
})), |
|
|
|
]; |
|
|
|
return {type: "FeatureCollection", features: polygon}; |
|
|
|
return { type: "FeatureCollection", features: polygon }; |
|
|
|
}, |
|
|
|
|
|
|
|
polygonDotData() { |
|
|
|
const {srcGridData} = this; |
|
|
|
const { srcGridData } = this; |
|
|
|
if (!srcGridData || !srcGridData.children || !Array.isArray(srcGridData.children)) { |
|
|
|
return {type: "FeatureCollection", features: []}; |
|
|
|
return { type: "FeatureCollection", features: [] }; |
|
|
|
} |
|
|
|
const polygon = [ |
|
|
|
...srcGridData.children |
|
|
|
.filter((item) => item.coordinates.length > 0) |
|
|
|
.map((item) => ({ |
|
|
|
type: "Feature", |
|
|
|
properties: { |
|
|
|
// id: item.id, |
|
|
|
// name: item.name, |
|
|
|
// level: item.level, |
|
|
|
center: [item.longitude, item.latitude], |
|
|
|
...item, |
|
|
|
}, |
|
|
|
geometry: { |
|
|
|
type: "Polygon", |
|
|
|
coordinates: [ |
|
|
|
item.latitude |
|
|
|
? [[item.longitude, item.latitude]] |
|
|
|
: spliceIntoChunks( |
|
|
|
item.coordinates.split(",").map((item) => parseFloat(item)), |
|
|
|
2 |
|
|
|
).filter((item) => item.length == 2), |
|
|
|
], |
|
|
|
}, |
|
|
|
})), |
|
|
|
.filter((item) => item.coordinates.length > 0) |
|
|
|
.map((item) => ({ |
|
|
|
type: "Feature", |
|
|
|
properties: { |
|
|
|
// id: item.id, |
|
|
|
// name: item.name, |
|
|
|
// level: item.level, |
|
|
|
center: [item.longitude, item.latitude], |
|
|
|
...item, |
|
|
|
}, |
|
|
|
geometry: { |
|
|
|
type: "Polygon", |
|
|
|
coordinates: [ |
|
|
|
item.latitude |
|
|
|
? [[item.longitude, item.latitude]] |
|
|
|
: spliceIntoChunks( |
|
|
|
item.coordinates.split(",").map((item) => parseFloat(item)), |
|
|
|
2 |
|
|
|
).filter((item) => item.length == 2), |
|
|
|
], |
|
|
|
}, |
|
|
|
})), |
|
|
|
]; |
|
|
|
return {type: "FeatureCollection", features: polygon}; |
|
|
|
return { type: "FeatureCollection", features: polygon }; |
|
|
|
}, |
|
|
|
|
|
|
|
dotData() { |
|
|
|
const {dotList} = this; |
|
|
|
const { dotList } = this; |
|
|
|
return { |
|
|
|
type: "FeatureCollection", |
|
|
|
features: [ |
|
|
|
...dotList |
|
|
|
.filter((item) => item.latitude) |
|
|
|
.map((item) => ({ |
|
|
|
type: "Feature", |
|
|
|
properties: { |
|
|
|
...item, |
|
|
|
}, |
|
|
|
geometry: { |
|
|
|
type: "Point", |
|
|
|
coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)], |
|
|
|
}, |
|
|
|
})), |
|
|
|
.filter((item) => item.latitude) |
|
|
|
.map((item) => ({ |
|
|
|
type: "Feature", |
|
|
|
properties: { |
|
|
|
...item, |
|
|
|
}, |
|
|
|
geometry: { |
|
|
|
type: "Point", |
|
|
|
coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)], |
|
|
|
}, |
|
|
|
})), |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
dotData2() { |
|
|
|
const {dotList2} = this; |
|
|
|
const { dotList2 } = this; |
|
|
|
return { |
|
|
|
type: "FeatureCollection", |
|
|
|
features: [ |
|
|
|
...dotList2 |
|
|
|
.filter((item) => item.latitude) |
|
|
|
.map((item) => ({ |
|
|
|
type: "Feature", |
|
|
|
properties: { |
|
|
|
...item, |
|
|
|
}, |
|
|
|
geometry: { |
|
|
|
type: "Point", |
|
|
|
coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)], |
|
|
|
}, |
|
|
|
})), |
|
|
|
.filter((item) => item.latitude) |
|
|
|
.map((item) => ({ |
|
|
|
type: "Feature", |
|
|
|
properties: { |
|
|
|
...item, |
|
|
|
}, |
|
|
|
geometry: { |
|
|
|
type: "Point", |
|
|
|
coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)], |
|
|
|
}, |
|
|
|
})), |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
@ -265,6 +269,12 @@ export default { |
|
|
|
"$store.state.chooseArea.realScale"(n, v) { |
|
|
|
this.setStartScale(n); |
|
|
|
}, |
|
|
|
level(n, v) { |
|
|
|
console.log("level", n); |
|
|
|
}, |
|
|
|
peopleType(n, v) { |
|
|
|
console.log("peopleType", n); |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
async mounted() { |
|
|
|
@ -287,7 +297,7 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
iniMap() { |
|
|
|
const {darkStyle, lightStyle, srcGridData} = this; |
|
|
|
const { darkStyle, lightStyle, srcGridData } = this; |
|
|
|
if (!srcGridData) return false; |
|
|
|
|
|
|
|
let styleConfig = darkStyle; |
|
|
|
@ -346,36 +356,36 @@ export default { |
|
|
|
zIndex: 1, |
|
|
|
}); |
|
|
|
baseLayer |
|
|
|
.source("http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", { |
|
|
|
parser: { |
|
|
|
type: "rasterTile", |
|
|
|
tileSize: 256, |
|
|
|
// minZoom: 6, |
|
|
|
// maxZoom: 15, |
|
|
|
zoomOffset: 0, |
|
|
|
}, |
|
|
|
}) |
|
|
|
.style({ |
|
|
|
opacity: 0.7, |
|
|
|
}); |
|
|
|
.source("http://t7.tianditu.com/DataServer?T=vec_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", { |
|
|
|
parser: { |
|
|
|
type: "rasterTile", |
|
|
|
tileSize: 256, |
|
|
|
// minZoom: 6, |
|
|
|
// maxZoom: 15, |
|
|
|
zoomOffset: 0, |
|
|
|
}, |
|
|
|
}) |
|
|
|
.style({ |
|
|
|
opacity: 0.7, |
|
|
|
}); |
|
|
|
|
|
|
|
// 注记服务 |
|
|
|
const annotionLayer = new RasterLayer({ |
|
|
|
zIndex: 2, |
|
|
|
}); |
|
|
|
annotionLayer |
|
|
|
.source("http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", { |
|
|
|
parser: { |
|
|
|
type: "rasterTile", |
|
|
|
tileSize: 256, |
|
|
|
// minZoom: 6, |
|
|
|
// maxZoom: 15, |
|
|
|
zoomOffset: 0, |
|
|
|
}, |
|
|
|
}) |
|
|
|
.style({ |
|
|
|
opacity: 0.5, |
|
|
|
}); |
|
|
|
.source("http://t7.tianditu.com/DataServer?T=cva_w&tk=8a08c117ab9ee45d508686b01cc8d397&x={x}&y={y}&l={z}", { |
|
|
|
parser: { |
|
|
|
type: "rasterTile", |
|
|
|
tileSize: 256, |
|
|
|
// minZoom: 6, |
|
|
|
// maxZoom: 15, |
|
|
|
zoomOffset: 0, |
|
|
|
}, |
|
|
|
}) |
|
|
|
.style({ |
|
|
|
opacity: 0.5, |
|
|
|
}); |
|
|
|
|
|
|
|
scene.addLayer(baseLayer); |
|
|
|
scene.addLayer(annotionLayer); |
|
|
|
@ -389,22 +399,22 @@ export default { |
|
|
|
zIndex: 1, |
|
|
|
}); |
|
|
|
baseLayer |
|
|
|
.source(tdtWpZw.vec, { |
|
|
|
parser: { |
|
|
|
type: "rasterTile", |
|
|
|
tileSize: 256, |
|
|
|
zoomOffset: 0, |
|
|
|
}, |
|
|
|
}) |
|
|
|
.style({ |
|
|
|
opacity: 0.7, |
|
|
|
}); |
|
|
|
.source(tdtWpZw.vec, { |
|
|
|
parser: { |
|
|
|
type: "rasterTile", |
|
|
|
tileSize: 256, |
|
|
|
zoomOffset: 0, |
|
|
|
}, |
|
|
|
}) |
|
|
|
.style({ |
|
|
|
opacity: 0.7, |
|
|
|
}); |
|
|
|
|
|
|
|
scene.addLayer(baseLayer); |
|
|
|
}, |
|
|
|
|
|
|
|
iniMapGrid(scene) { |
|
|
|
const {darkStyle, lightStyle, polygonData, polygonDotData} = this; |
|
|
|
const { darkStyle, lightStyle, polygonData, polygonDotData } = this; |
|
|
|
|
|
|
|
let styleConfig = darkStyle; |
|
|
|
if (this.mapStyleType == "light") { |
|
|
|
@ -417,23 +427,23 @@ export default { |
|
|
|
polygonLayer = new PolygonLayer({ |
|
|
|
autoFit: true, |
|
|
|
}) |
|
|
|
// .size(0) |
|
|
|
.source(polygonData) |
|
|
|
.color("name", styleConfig.polygonColor) |
|
|
|
// .shape("extrude") |
|
|
|
.shape("fill") |
|
|
|
.style({ |
|
|
|
opacityLinear: { |
|
|
|
enable: true, // true - false |
|
|
|
dir: "out", // in - out |
|
|
|
}, |
|
|
|
opacity: 1, |
|
|
|
// heightfixed: true, |
|
|
|
// pickLight: true, |
|
|
|
raisingHeight: 0, |
|
|
|
// sourceColor: "#333", |
|
|
|
// targetColor: "rgba(255,255,255, 0.5)", |
|
|
|
}); |
|
|
|
// .size(0) |
|
|
|
.source(polygonData) |
|
|
|
.color("name", styleConfig.polygonColor) |
|
|
|
// .shape("extrude") |
|
|
|
.shape("fill") |
|
|
|
.style({ |
|
|
|
opacityLinear: { |
|
|
|
enable: true, // true - false |
|
|
|
dir: "out", // in - out |
|
|
|
}, |
|
|
|
opacity: 1, |
|
|
|
// heightfixed: true, |
|
|
|
// pickLight: true, |
|
|
|
raisingHeight: 0, |
|
|
|
// sourceColor: "#333", |
|
|
|
// targetColor: "rgba(255,255,255, 0.5)", |
|
|
|
}); |
|
|
|
|
|
|
|
scene.addLayer(polygonLayer); |
|
|
|
|
|
|
|
@ -442,34 +452,34 @@ export default { |
|
|
|
zIndex: 2, |
|
|
|
name: "line2", |
|
|
|
}) |
|
|
|
.source(polygonData) |
|
|
|
.shape("line") |
|
|
|
.size(1) |
|
|
|
.color("name", styleConfig.lineColor) |
|
|
|
.style({ |
|
|
|
opacity: 1, |
|
|
|
}) |
|
|
|
.animate({ |
|
|
|
interval: 1, // 间隔 |
|
|
|
duration: 2, // 持续时间，延时 |
|
|
|
trailLength: 2, // 流线长度 |
|
|
|
}); |
|
|
|
.source(polygonData) |
|
|
|
.shape("line") |
|
|
|
.size(1) |
|
|
|
.color("name", styleConfig.lineColor) |
|
|
|
.style({ |
|
|
|
opacity: 1, |
|
|
|
}) |
|
|
|
.animate({ |
|
|
|
interval: 1, // 间隔 |
|
|
|
duration: 2, // 持续时间，延时 |
|
|
|
trailLength: 2, // 流线长度 |
|
|
|
}); |
|
|
|
scene.addLayer(lineLayer); |
|
|
|
|
|
|
|
// 画区域中心点的波纹小圆圈 |
|
|
|
circleLayer = new PolygonLayer({ |
|
|
|
zIndex: 3, |
|
|
|
}) |
|
|
|
.source(polygonDotData) |
|
|
|
.color("name", styleConfig.circleColor) |
|
|
|
.shape("circle") |
|
|
|
.active(true) |
|
|
|
.animate(true) |
|
|
|
.size(50) |
|
|
|
.style({ |
|
|
|
offsets: [0, -10], // 文本相对锚点的偏移量 [水平, 垂直] |
|
|
|
opacity: 1, |
|
|
|
}); |
|
|
|
.source(polygonDotData) |
|
|
|
.color("name", styleConfig.circleColor) |
|
|
|
.shape("circle") |
|
|
|
.active(true) |
|
|
|
.animate(true) |
|
|
|
.size(50) |
|
|
|
.style({ |
|
|
|
offsets: [0, -10], // 文本相对锚点的偏移量 [水平, 垂直] |
|
|
|
opacity: 1, |
|
|
|
}); |
|
|
|
// scene.addLayer(circleLayer); |
|
|
|
scene.addImage("pos-red", require("@/assets/img/shuju/grid/pos-red.png")); |
|
|
|
scene.addImage("pos-green", require("@/assets/img/shuju/grid/pos-green.png")); |
|
|
|
@ -477,23 +487,22 @@ export default { |
|
|
|
|
|
|
|
posLayer = new PointLayer({ |
|
|
|
zIndex: 4, |
|
|
|
name: 'gridPoint', |
|
|
|
visible: false |
|
|
|
name: "gridPoint", |
|
|
|
visible: false, |
|
|
|
}) |
|
|
|
.source(polygonDotData) |
|
|
|
.shape("name", [ |
|
|
|
// "pos-red", |
|
|
|
"pos-green", |
|
|
|
// "pos-yellow" |
|
|
|
]) |
|
|
|
.size(12) |
|
|
|
.style({ |
|
|
|
options: this.level === 'grid' ? 1 : 0, |
|
|
|
offsets: [0, 0], |
|
|
|
|
|
|
|
}); |
|
|
|
.source(polygonDotData) |
|
|
|
.shape("name", [ |
|
|
|
// "pos-red", |
|
|
|
"pos-green", |
|
|
|
// "pos-yellow" |
|
|
|
]) |
|
|
|
.size(12) |
|
|
|
.style({ |
|
|
|
options: this.level === "grid" ? 1 : 0, |
|
|
|
offsets: [0, 0], |
|
|
|
}); |
|
|
|
// scene.addLayer(posLayer); |
|
|
|
console.log(this.level) |
|
|
|
console.log(this.level); |
|
|
|
/* if (this.level === 'grid') { |
|
|
|
posLayer.show() |
|
|
|
} else { |
|
|
|
@ -502,34 +511,32 @@ export default { |
|
|
|
textLayer = new PolygonLayer({ |
|
|
|
zIndex: 20, |
|
|
|
}) |
|
|
|
.source(polygonData) |
|
|
|
.color("name", styleConfig.textColor) |
|
|
|
.shape("name", "text") |
|
|
|
.size(16) |
|
|
|
.style({ |
|
|
|
textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left |
|
|
|
textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直] |
|
|
|
spacing: 2, // 字符间距 |
|
|
|
padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 |
|
|
|
stroke: styleConfig.textStrokeColor, // 描边颜色 |
|
|
|
strokeWidth: 0.1, // 描边宽度 |
|
|
|
strokeOpacity: 0.8, |
|
|
|
textAllowOverlap: true, |
|
|
|
}) |
|
|
|
.active(true); |
|
|
|
.source(polygonData) |
|
|
|
.color("name", styleConfig.textColor) |
|
|
|
.shape("name", "text") |
|
|
|
.size(16) |
|
|
|
.style({ |
|
|
|
textAnchor: "center", // 文本相对锚点的位置 center|left|right|top|bottom|top-left |
|
|
|
textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直] |
|
|
|
spacing: 2, // 字符间距 |
|
|
|
padding: [2, 2], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近 |
|
|
|
stroke: styleConfig.textStrokeColor, // 描边颜色 |
|
|
|
strokeWidth: 0.1, // 描边宽度 |
|
|
|
strokeOpacity: 0.8, |
|
|
|
textAllowOverlap: true, |
|
|
|
}) |
|
|
|
.active(true); |
|
|
|
scene.addLayer(textLayer); |
|
|
|
|
|
|
|
polygonLayer.on("mousemove", (e) => { |
|
|
|
if (this.level === 'grid') { |
|
|
|
return |
|
|
|
if (this.level === "grid") { |
|
|
|
return; |
|
|
|
} |
|
|
|
const popup = new Popup({ |
|
|
|
offsets: [60, 60], |
|
|
|
closeButton: false, |
|
|
|
maxWidth: 400, |
|
|
|
}) |
|
|
|
.setLnglat(e.lngLat) |
|
|
|
.setHTML(` |
|
|
|
}).setLnglat(e.lngLat).setHTML(` |
|
|
|
<div class="jw-popup-container"> |
|
|
|
<div class="jw-popup-bg"></div> |
|
|
|
<div class="jw-popup-con"> |
|
|
|
@ -537,7 +544,7 @@ export default { |
|
|
|
${e.feature.properties.name} |
|
|
|
</div> |
|
|
|
<div class="jw-popup-des"> |
|
|
|
${e.feature.properties.description ? e.feature.properties.description : ''} |
|
|
|
${e.feature.properties.description ? e.feature.properties.description : ""} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -545,30 +552,26 @@ export default { |
|
|
|
scene.addPopup(popup); |
|
|
|
}); |
|
|
|
polygonLayer.on("click", (e) => { |
|
|
|
console.log(this.level) |
|
|
|
if (this.level === 'grid') { |
|
|
|
return |
|
|
|
console.log(this.level); |
|
|
|
if (this.level === "grid") { |
|
|
|
return; |
|
|
|
} |
|
|
|
if (numMarker) { |
|
|
|
scene.removeMarkerLayer(numMarker); |
|
|
|
|
|
|
|
} |
|
|
|
if (pointMarker) { |
|
|
|
scene.removeMarkerLayer(pointMarker); |
|
|
|
} |
|
|
|
console.log("e", e); |
|
|
|
this.$emit("clickAgency", e.feature.properties); |
|
|
|
|
|
|
|
}); |
|
|
|
posLayer.on('click', (e) => { |
|
|
|
console.log(e) |
|
|
|
posLayer.on("click", (e) => { |
|
|
|
console.log(e); |
|
|
|
}); |
|
|
|
|
|
|
|
}, |
|
|
|
clearMarkert() { |
|
|
|
if (numMarker) { |
|
|
|
scene.removeMarkerLayer(numMarker); |
|
|
|
|
|
|
|
} |
|
|
|
if (pointMarker) { |
|
|
|
scene.removeMarkerLayer(pointMarker); |
|
|
|
@ -576,34 +579,34 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
iniMapDot(scene) { |
|
|
|
const {darkStyle, lightStyle, dotIcoList, dotData} = this; |
|
|
|
const { darkStyle, lightStyle, dotIcoList, dotData } = this; |
|
|
|
Object.keys(dotIcoList).forEach((k) => { |
|
|
|
scene.addImage(k, dotIcoList[k]); |
|
|
|
}); |
|
|
|
dotBgLayer = new PointLayer({ |
|
|
|
zIndex: 20, |
|
|
|
}) |
|
|
|
.source(dotData) |
|
|
|
.shape("circle") |
|
|
|
.color("rgba(255,255,255,0.8)") |
|
|
|
.size(20) |
|
|
|
.style({ |
|
|
|
strokeWidth: 3, |
|
|
|
strokeOpacity: 0.1, |
|
|
|
stroke: "#000", |
|
|
|
}); |
|
|
|
.source(dotData) |
|
|
|
.shape("circle") |
|
|
|
.color("rgba(255,255,255,0.8)") |
|
|
|
.size(20) |
|
|
|
.style({ |
|
|
|
strokeWidth: 3, |
|
|
|
strokeOpacity: 0.1, |
|
|
|
stroke: "#000", |
|
|
|
}); |
|
|
|
scene.addLayer(dotBgLayer); |
|
|
|
|
|
|
|
dotLayer = new PointLayer({ |
|
|
|
zIndex: 21, |
|
|
|
}) |
|
|
|
.source(dotData) |
|
|
|
.shape("categoryKey", (k) => k) |
|
|
|
.size(10) |
|
|
|
.style({ |
|
|
|
offsets: [0, 0], |
|
|
|
layerType: "fillImage", |
|
|
|
}); |
|
|
|
.source(dotData) |
|
|
|
.shape("categoryKey", (k) => k) |
|
|
|
.size(10) |
|
|
|
.style({ |
|
|
|
offsets: [0, 0], |
|
|
|
layerType: "fillImage", |
|
|
|
}); |
|
|
|
scene.addLayer(dotLayer); |
|
|
|
|
|
|
|
dotBgLayer.on("click", (e) => { |
|
|
|
@ -618,18 +621,17 @@ export default { |
|
|
|
offsets: [0, -0], |
|
|
|
closeButton: false, |
|
|
|
}) |
|
|
|
.setLnglat(e.feature.geometry.coordinates) |
|
|
|
.setHTML(`<span>${e.feature.properties.content}</span>`); |
|
|
|
.setLnglat(e.feature.geometry.coordinates) |
|
|
|
.setHTML(`<span>${e.feature.properties.content}</span>`); |
|
|
|
scene.addPopup(popup); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
dotBgLayer.on("unmousemove", (e) => { |
|
|
|
}); |
|
|
|
dotBgLayer.on("unmousemove", (e) => {}); |
|
|
|
}, |
|
|
|
|
|
|
|
iniMapDot2(scene) { |
|
|
|
const {dotIcoList2: dotIcoList, dotData2: dotData} = this; |
|
|
|
const { dotIcoList2: dotIcoList, dotData2: dotData } = this; |
|
|
|
Object.keys(dotIcoList).forEach((k) => { |
|
|
|
scene.addImage(k, dotIcoList[k]); |
|
|
|
}); |
|
|
|
@ -637,13 +639,13 @@ export default { |
|
|
|
dotLayer2 = new PointLayer({ |
|
|
|
zIndex: 21, |
|
|
|
}) |
|
|
|
.source(dotData) |
|
|
|
.shape("categoryKey", (k) => k) |
|
|
|
.size(20) |
|
|
|
.style({ |
|
|
|
offsets: [0, 0], |
|
|
|
layerType: "fillImage", |
|
|
|
}); |
|
|
|
.source(dotData) |
|
|
|
.shape("categoryKey", (k) => k) |
|
|
|
.size(20) |
|
|
|
.style({ |
|
|
|
offsets: [0, 0], |
|
|
|
layerType: "fillImage", |
|
|
|
}); |
|
|
|
scene.addLayer(dotLayer2); |
|
|
|
|
|
|
|
dotLayer2.on("click", (e) => { |
|
|
|
@ -658,14 +660,13 @@ export default { |
|
|
|
offsets: [0, -0], |
|
|
|
closeButton: false, |
|
|
|
}) |
|
|
|
.setLnglat(e.feature.geometry.coordinates) |
|
|
|
.setHTML(`<span>${e.feature.properties.content}</span>`); |
|
|
|
.setLnglat(e.feature.geometry.coordinates) |
|
|
|
.setHTML(`<span>${e.feature.properties.content}</span>`); |
|
|
|
scene.addPopup(popup); |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
dotLayer2.on("unmousemove", (e) => { |
|
|
|
}); |
|
|
|
dotLayer2.on("unmousemove", (e) => {}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 把地图缩放等级在原来基础上大一点 |
|
|
|
@ -687,7 +688,7 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
updateGrid() { |
|
|
|
const {polygonData, polygonDotData} = this; |
|
|
|
const { polygonData, polygonDotData } = this; |
|
|
|
if (polygonLayer) { |
|
|
|
polygonLayer.setData(polygonData); |
|
|
|
lineLayer.setData(polygonData); |
|
|
|
@ -704,7 +705,7 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
updateDot() { |
|
|
|
const {dotData} = this; |
|
|
|
const { dotData } = this; |
|
|
|
if (dotLayer) { |
|
|
|
console.log(dotData); |
|
|
|
dotLayer.setData(dotData); |
|
|
|
@ -713,7 +714,7 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
updateDot2() { |
|
|
|
const {dotData2: dotData} = this; |
|
|
|
const { dotData2: dotData } = this; |
|
|
|
if (dotLayer2) { |
|
|
|
console.log(dotData); |
|
|
|
dotLayer2.setData(dotData); |
|
|
|
@ -776,54 +777,50 @@ export default { |
|
|
|
searchBgLayer = new PolygonLayer({ |
|
|
|
// autoFit: true, |
|
|
|
}) |
|
|
|
.source(sourceData) |
|
|
|
.color("#f0f") |
|
|
|
.shape("fill") |
|
|
|
.style({ |
|
|
|
opacityLinear: { |
|
|
|
enable: true, // true - false |
|
|
|
dir: "out", // in - out |
|
|
|
}, |
|
|
|
opacity: 0.3, |
|
|
|
raisingHeight: 0, |
|
|
|
}); |
|
|
|
.source(sourceData) |
|
|
|
.color("#f0f") |
|
|
|
.shape("fill") |
|
|
|
.style({ |
|
|
|
opacityLinear: { |
|
|
|
enable: true, // true - false |
|
|
|
dir: "out", // in - out |
|
|
|
}, |
|
|
|
opacity: 0.3, |
|
|
|
raisingHeight: 0, |
|
|
|
}); |
|
|
|
|
|
|
|
scene.addLayer(searchBgLayer); |
|
|
|
} |
|
|
|
}, |
|
|
|
setPoint(data) { |
|
|
|
this.clearMarkert() |
|
|
|
|
|
|
|
setPoint(data, level, peopleType) { |
|
|
|
this.clearMarkert(); |
|
|
|
pointMarker = new MarkerLayer({ |
|
|
|
name: 'pointMarker' |
|
|
|
}) |
|
|
|
name: "pointMarker", |
|
|
|
}); |
|
|
|
for (let i in data) { |
|
|
|
console.log(data[i].longitude * 1, data[i].latitude * 1) |
|
|
|
var el = document.createElement('div'); |
|
|
|
el.className = 'label-point-class'; |
|
|
|
el.classList.add(data[i].type) |
|
|
|
// console.log(data[i].longitude * 1, data[i].latitude * 1); |
|
|
|
var el = document.createElement("div"); |
|
|
|
el.className = peopleType === "building" ? "label-pointLd-class" : "label-point-class"; |
|
|
|
el.classList.add(data[i].type); |
|
|
|
// el.textContent = data[i].peopleType+'：'+data[i].personnelNum; |
|
|
|
const pointMarkerItem = new Marker({ |
|
|
|
offsets: [0, 0], |
|
|
|
element: el, |
|
|
|
}).setLnglat([data[i].longitude * 1, data[i].latitude * 1]); |
|
|
|
let popup |
|
|
|
let popup; |
|
|
|
pointMarkerItem.on("mouseover", () => { |
|
|
|
popup = new Popup({ |
|
|
|
offsets: [60, 60], |
|
|
|
closeButton: false, |
|
|
|
maxWidth: 400, |
|
|
|
}) |
|
|
|
.setLnglat([data[i].longitude * 1, data[i].latitude * 1]) |
|
|
|
.setHTML(` |
|
|
|
}).setLnglat([data[i].longitude * 1, data[i].latitude * 1]).setHTML(` |
|
|
|
<div class="jw-popup-container"> |
|
|
|
<div class="jw-popup-con"> |
|
|
|
<div class="jw-popup-title"> |
|
|
|
${data[i].name} |
|
|
|
</div> |
|
|
|
<div class="jw-popup-type">网格类型：<span class="${data[i].type}">${ |
|
|
|
data[i].type === 'red' ? "红" : |
|
|
|
data[i].type === 'yellow' ? "黄" : |
|
|
|
data[i].type === 'green' ? "绿色" : ''}</span> |
|
|
|
<div class="jw-popup-type">网格类型：<span class="${data[i].type}">${data[i].type === "red" ? "红" : data[i].type === "yellow" ? "黄" : data[i].type === "green" ? "绿色" : ""}</span> |
|
|
|
</div> |
|
|
|
<div class="jw-popup-num-list"> |
|
|
|
<div>户数：<span>${data[i].houseNum ? data[i].houseNum : 0}</span></div> |
|
|
|
@ -838,36 +835,33 @@ export default { |
|
|
|
scene.addPopup(popup); |
|
|
|
}); |
|
|
|
pointMarkerItem.on("mouseout", () => { |
|
|
|
popup.remove() |
|
|
|
}) |
|
|
|
popup.remove(); |
|
|
|
}); |
|
|
|
pointMarkerItem.on("click", () => { |
|
|
|
this.$router.push('/homeDetails/index?id=' + data[i].id) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
pointMarker.addMarker(pointMarkerItem) |
|
|
|
this.$router.push(`/homeDetails/index?id=${data[i].id}&type=${peopleType}`); |
|
|
|
}); |
|
|
|
|
|
|
|
pointMarker.addMarker(pointMarkerItem); |
|
|
|
} |
|
|
|
scene.addMarkerLayer(pointMarker); |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
setNum(data) { |
|
|
|
if (numMarker) { |
|
|
|
scene.removeMarkerLayer(numMarker); |
|
|
|
} |
|
|
|
numMarker = new MarkerLayer({ |
|
|
|
name: 'numMarker' |
|
|
|
}) |
|
|
|
name: "numMarker", |
|
|
|
}); |
|
|
|
for (let i in data) { |
|
|
|
var el = document.createElement('label'); |
|
|
|
el.className = 'label-num-class'; |
|
|
|
el.textContent = data[i].peopleType + '：' + data[i].personnelNum; |
|
|
|
var el = document.createElement("label"); |
|
|
|
el.className = "label-num-class"; |
|
|
|
el.textContent = data[i].peopleType + "：" + data[i].personnelNum; |
|
|
|
const numMarkerItem = new Marker({ |
|
|
|
element: el, |
|
|
|
offsets: [0, 40], |
|
|
|
}).setLnglat([data[i].longitude * 1, data[i].latitude]); |
|
|
|
numMarker.addMarker(numMarkerItem) |
|
|
|
numMarker.addMarker(numMarkerItem); |
|
|
|
} |
|
|
|
scene.addMarkerLayer(numMarker); |
|
|
|
}, |
|
|
|
@ -885,8 +879,8 @@ export default { |
|
|
|
closeOnClick: true, |
|
|
|
maxWidth: 400, |
|
|
|
}) |
|
|
|
.setLnglat(posArr) |
|
|
|
.setDOMContent(this.$refs.popup.$el); |
|
|
|
.setLnglat(posArr) |
|
|
|
.setDOMContent(this.$refs.popup.$el); |
|
|
|
marker.setPopup(popup); |
|
|
|
} |
|
|
|
|
|
|
|
@ -922,8 +916,8 @@ export default { |
|
|
|
closeOnClick: true, |
|
|
|
maxWidth: 400, |
|
|
|
}) |
|
|
|
.setLnglat(posArr) |
|
|
|
.setDOMContent(this.$refs.popup.$el); |
|
|
|
.setLnglat(posArr) |
|
|
|
.setDOMContent(this.$refs.popup.$el); |
|
|
|
scene.addPopup(popup); |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -989,7 +983,7 @@ export default { |
|
|
|
/deep/ .l7-popup-content { |
|
|
|
//background: rgba(#fff, 1); |
|
|
|
background: rgba(3, 31, 73, 0.72); |
|
|
|
border: 1px solid #74C9FF; |
|
|
|
border: 1px solid #74c9ff; |
|
|
|
opacity: 0.9; |
|
|
|
border-radius: 5px; |
|
|
|
color: #fff; |
|
|
|
@ -1033,9 +1027,9 @@ export default { |
|
|
|
/deep/ .label-num-class { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 500; |
|
|
|
color: #FFFFFF; |
|
|
|
color: #ffffff; |
|
|
|
background: rgba(3, 31, 73, 0.72); |
|
|
|
border: 1px solid #74C9FF; |
|
|
|
border: 1px solid #74c9ff; |
|
|
|
opacity: 0.9; |
|
|
|
border-radius: 100px; |
|
|
|
padding: 3px 13px; |
|
|
|
@ -1054,19 +1048,17 @@ export default { |
|
|
|
|
|
|
|
/deep/ .jw-popup-container { |
|
|
|
display: flex; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .jw-popup-con { |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .jw-popup-title { |
|
|
|
font-size: 20px; |
|
|
|
font-family: HYShuYuanHeiJ; |
|
|
|
font-weight: 400; |
|
|
|
color: #FFFFFF; |
|
|
|
background: linear-gradient(0deg, #2DC1FF 0%, #FFFFFF 58.5205078125%); |
|
|
|
color: #ffffff; |
|
|
|
background: linear-gradient(0deg, #2dc1ff 0%, #ffffff 58.5205078125%); |
|
|
|
-webkit-background-clip: text; |
|
|
|
-webkit-text-fill-color: transparent; |
|
|
|
margin-bottom: 16px; |
|
|
|
@ -1075,7 +1067,7 @@ export default { |
|
|
|
/deep/ .jw-popup-des { |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 400; |
|
|
|
color: #FFFFFF; |
|
|
|
color: #ffffff; |
|
|
|
line-height: 22px; |
|
|
|
} |
|
|
|
|
|
|
|
@ -1096,20 +1088,26 @@ export default { |
|
|
|
background-image: url("@/assets/images/overview/yellow.png"); |
|
|
|
} |
|
|
|
} |
|
|
|
/deep/ .label-pointLd-class { |
|
|
|
width: 16px; |
|
|
|
height: 16px; |
|
|
|
background: #1ae1ff; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .jw-popup-type { |
|
|
|
margin: 16px 0 21px; |
|
|
|
|
|
|
|
.red { |
|
|
|
color: #FC561F; |
|
|
|
color: #fc561f; |
|
|
|
} |
|
|
|
|
|
|
|
.yellow { |
|
|
|
color: #FAB93F; |
|
|
|
color: #fab93f; |
|
|
|
} |
|
|
|
|
|
|
|
.green { |
|
|
|
color: #08EBAD; |
|
|
|
color: #08ebad; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@ -1128,10 +1126,9 @@ export default { |
|
|
|
span { |
|
|
|
font-size: 18px; |
|
|
|
font-weight: 500; |
|
|
|
color: #FFAA01; |
|
|
|
color: #ffaa01; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
SongZhen
2 years ago