|
|
|
@ -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, 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"; |
|
|
|
@ -31,6 +31,8 @@ let dotBgLayer; |
|
|
|
let dotLayer2; |
|
|
|
let searchMarker; |
|
|
|
let searchBgLayer; |
|
|
|
let numMarker; |
|
|
|
let pointMarker; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: "l7", |
|
|
|
@ -128,6 +130,10 @@ export default { |
|
|
|
type: Object, |
|
|
|
default: () => ({}), |
|
|
|
}, |
|
|
|
level: { |
|
|
|
type: String, |
|
|
|
default: '' |
|
|
|
} |
|
|
|
}, |
|
|
|
components: { |
|
|
|
cptPopup, |
|
|
|
@ -135,107 +141,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), |
|
|
|
], |
|
|
|
}, |
|
|
|
})), |
|
|
|
]; |
|
|
|
return { type: "FeatureCollection", features: polygon }; |
|
|
|
}, |
|
|
|
|
|
|
|
dotData() { |
|
|
|
const { dotList } = this; |
|
|
|
return { |
|
|
|
type: "FeatureCollection", |
|
|
|
features: [ |
|
|
|
...dotList |
|
|
|
.filter((item) => item.latitude) |
|
|
|
.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: "Point", |
|
|
|
coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)], |
|
|
|
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}; |
|
|
|
}, |
|
|
|
|
|
|
|
dotData() { |
|
|
|
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)], |
|
|
|
}, |
|
|
|
})), |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
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)], |
|
|
|
}, |
|
|
|
})), |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
@ -281,7 +287,7 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
iniMap() { |
|
|
|
const { darkStyle, lightStyle, srcGridData } = this; |
|
|
|
const {darkStyle, lightStyle, srcGridData} = this; |
|
|
|
if (!srcGridData) return false; |
|
|
|
|
|
|
|
let styleConfig = darkStyle; |
|
|
|
@ -340,36 +346,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); |
|
|
|
@ -383,22 +389,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") { |
|
|
|
@ -411,23 +417,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); |
|
|
|
|
|
|
|
@ -436,144 +442,168 @@ 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")); |
|
|
|
scene.addImage("pos-yellow", require("@/assets/img/shuju/grid/pos-yellow.png")); |
|
|
|
posLayer = new PolygonLayer({ |
|
|
|
|
|
|
|
posLayer = new PointLayer({ |
|
|
|
zIndex: 4, |
|
|
|
name: 'gridPoint', |
|
|
|
visible: false |
|
|
|
}) |
|
|
|
.source(polygonDotData) |
|
|
|
.shape("name", [ |
|
|
|
// "pos-red", |
|
|
|
"pos-green", |
|
|
|
// "pos-yellow" |
|
|
|
]) |
|
|
|
.size(12) |
|
|
|
.style({ |
|
|
|
offsets: [0, 8], // 文本相对锚点的偏移量 [水平, 垂直] |
|
|
|
// rotation: 60, |
|
|
|
// layerType: "fillImage", |
|
|
|
}); |
|
|
|
// scene.addLayer(posLayer); |
|
|
|
.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) |
|
|
|
/* if (this.level === 'grid') { |
|
|
|
posLayer.show() |
|
|
|
} else { |
|
|
|
posLayer.hide() |
|
|
|
}*/ |
|
|
|
textLayer = new PolygonLayer({ |
|
|
|
zIndex: 20, |
|
|
|
}) |
|
|
|
.source(polygonDotData) |
|
|
|
.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) => { |
|
|
|
// console.log("e", e); |
|
|
|
// const { lng, lat } = e.lngLat; |
|
|
|
// const popup = new Popup({ |
|
|
|
// title: e.feature.properties.name, |
|
|
|
// html: e.feature.properties.center_addre, |
|
|
|
// lngLat: { |
|
|
|
// lng, |
|
|
|
// lat, |
|
|
|
// }, |
|
|
|
// }); |
|
|
|
// scene.addPopup(popup); |
|
|
|
if (this.level === 'grid') { |
|
|
|
return |
|
|
|
} |
|
|
|
const popup = new Popup({ |
|
|
|
offsets: [0, 0], |
|
|
|
offsets: [60, 60], |
|
|
|
closeButton: false, |
|
|
|
maxWidth: 400, |
|
|
|
}) |
|
|
|
.setLnglat(e.lngLat) |
|
|
|
.setHTML(`<span>街道: ${e.feature.properties.name}</span><br><span>网格: ${e.feature.properties.center_addre}</span>`); |
|
|
|
.setLnglat(e.lngLat) |
|
|
|
.setHTML(` |
|
|
|
<div class="jw-popup-container"> |
|
|
|
<div class="jw-popup-bg"></div> |
|
|
|
<div class="jw-popup-con"> |
|
|
|
<div class="jw-popup-title"> |
|
|
|
${e.feature.properties.name} |
|
|
|
</div> |
|
|
|
<div class="jw-popup-des"> |
|
|
|
${e.feature.properties.description ? e.feature.properties.description : ''} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
`); |
|
|
|
scene.addPopup(popup); |
|
|
|
}); |
|
|
|
|
|
|
|
// polygonLayer.on("mousemove", (e) => { |
|
|
|
// polygonLayer.style({ |
|
|
|
// raisingHeight: 0, |
|
|
|
// }); |
|
|
|
// }); |
|
|
|
polygonLayer.on("click", (e) => { |
|
|
|
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) |
|
|
|
}); |
|
|
|
|
|
|
|
// polygonLayer.on("unmousemove", (e) => { |
|
|
|
// polygonLayer.style({ |
|
|
|
// raisingHeight: 0, |
|
|
|
// }); |
|
|
|
// }); |
|
|
|
}, |
|
|
|
clearMarkert() { |
|
|
|
if (numMarker) { |
|
|
|
scene.removeMarkerLayer(numMarker); |
|
|
|
|
|
|
|
} |
|
|
|
if (pointMarker) { |
|
|
|
scene.removeMarkerLayer(pointMarker); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
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) => { |
|
|
|
@ -588,17 +618,18 @@ 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]); |
|
|
|
}); |
|
|
|
@ -606,13 +637,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) => { |
|
|
|
@ -627,13 +658,14 @@ 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) => { |
|
|
|
}); |
|
|
|
}, |
|
|
|
|
|
|
|
// 把地图缩放等级在原来基础上大一点 |
|
|
|
@ -655,18 +687,24 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
updateGrid() { |
|
|
|
const { polygonData, polygonDotData } = this; |
|
|
|
const {polygonData, polygonDotData} = this; |
|
|
|
if (polygonLayer) { |
|
|
|
polygonLayer.setData(polygonData); |
|
|
|
lineLayer.setData(polygonData); |
|
|
|
textLayer.setData(polygonDotData); |
|
|
|
posLayer.setData(polygonDotData); |
|
|
|
/* posLayer.setData(polygonDotData); |
|
|
|
// let gridPoint = scene.getLayerByName('gridPoint') |
|
|
|
if (this.level === 'grid') { |
|
|
|
posLayer.show() |
|
|
|
} else { |
|
|
|
posLayer.hide() |
|
|
|
}*/ |
|
|
|
circleLayer.setData(polygonDotData); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
updateDot() { |
|
|
|
const { dotData } = this; |
|
|
|
const {dotData} = this; |
|
|
|
if (dotLayer) { |
|
|
|
console.log(dotData); |
|
|
|
dotLayer.setData(dotData); |
|
|
|
@ -675,7 +713,7 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
updateDot2() { |
|
|
|
const { dotData2: dotData } = this; |
|
|
|
const {dotData2: dotData} = this; |
|
|
|
if (dotLayer2) { |
|
|
|
console.log(dotData); |
|
|
|
dotLayer2.setData(dotData); |
|
|
|
@ -738,22 +776,101 @@ 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() |
|
|
|
pointMarker = new MarkerLayer({ |
|
|
|
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) |
|
|
|
// 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 |
|
|
|
pointMarkerItem.on("mouseover", () => { |
|
|
|
popup = new Popup({ |
|
|
|
offsets: [60, 60], |
|
|
|
closeButton: false, |
|
|
|
maxWidth: 400, |
|
|
|
}) |
|
|
|
.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> |
|
|
|
<div class="jw-popup-num-list"> |
|
|
|
<div>户数：<span>${data[i].houseNum ? data[i].houseNum : 0}</span></div> |
|
|
|
<div>需求：<span>${data[i].demandNum ? data[i].demandNum : 0}</span></div> |
|
|
|
<div>事件：<span>${data[i].eventNum ? data[i].eventNum : 0}</span></div> |
|
|
|
<div>重点人群：<span>${data[i].importanceNum ? data[i].importanceNum : 0}</span></div> |
|
|
|
<div>安全隐患：<span>${data[i].safetyNum ? data[i].safetyNum : 0}</span></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
`); |
|
|
|
scene.addPopup(popup); |
|
|
|
}); |
|
|
|
pointMarkerItem.on("mouseout", () => { |
|
|
|
popup.remove() |
|
|
|
}) |
|
|
|
pointMarkerItem.on("click", () => { |
|
|
|
this.$router.push('/homeDetails/index?id='+data[i].id) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
pointMarker.addMarker(pointMarkerItem) |
|
|
|
|
|
|
|
} |
|
|
|
scene.addMarkerLayer(pointMarker); |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
setNum(data) { |
|
|
|
if (numMarker) { |
|
|
|
scene.removeMarkerLayer(numMarker); |
|
|
|
} |
|
|
|
numMarker = new MarkerLayer({ |
|
|
|
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; |
|
|
|
const numMarkerItem = new Marker({ |
|
|
|
element: el, |
|
|
|
offsets: [0, 40], |
|
|
|
}).setLnglat([data[i].longitude * 1, data[i].latitude]); |
|
|
|
numMarker.addMarker(numMarkerItem) |
|
|
|
} |
|
|
|
scene.addMarkerLayer(numMarker); |
|
|
|
}, |
|
|
|
async setDotMarker(item, posArr) { |
|
|
|
this.removeDotMarker(); |
|
|
|
this.drawSearchBg(...posArr); |
|
|
|
@ -768,8 +885,8 @@ export default { |
|
|
|
closeOnClick: true, |
|
|
|
maxWidth: 400, |
|
|
|
}) |
|
|
|
.setLnglat(posArr) |
|
|
|
.setDOMContent(this.$refs.popup.$el); |
|
|
|
.setLnglat(posArr) |
|
|
|
.setDOMContent(this.$refs.popup.$el); |
|
|
|
marker.setPopup(popup); |
|
|
|
} |
|
|
|
|
|
|
|
@ -805,8 +922,8 @@ export default { |
|
|
|
closeOnClick: true, |
|
|
|
maxWidth: 400, |
|
|
|
}) |
|
|
|
.setLnglat(posArr) |
|
|
|
.setDOMContent(this.$refs.popup.$el); |
|
|
|
.setLnglat(posArr) |
|
|
|
.setDOMContent(this.$refs.popup.$el); |
|
|
|
scene.addPopup(popup); |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -851,6 +968,7 @@ export default { |
|
|
|
background-color: rgba(43, 51, 73, 0.82); |
|
|
|
background-image: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), #000); |
|
|
|
} |
|
|
|
|
|
|
|
.gray { |
|
|
|
-webkit-filter: grayscale(100%); |
|
|
|
filter: grayscale(100%); |
|
|
|
@ -863,10 +981,18 @@ export default { |
|
|
|
/deep/ .l7-popup { |
|
|
|
z-index: 100; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .l7-popup-content { |
|
|
|
background: rgba(#fff, 1); |
|
|
|
//background: rgba(#fff, 1); |
|
|
|
background: rgba(3, 31, 73, 0.72); |
|
|
|
border: 1px solid #74C9FF; |
|
|
|
opacity: 0.9; |
|
|
|
border-radius: 5px; |
|
|
|
color: #fff; |
|
|
|
box-shadow: 0 0 20px 3px inset rgba(#22f, 0.1); |
|
|
|
width: 416px; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .l7-popup-close-button { |
|
|
|
padding: 4px; |
|
|
|
font-size: 36px; |
|
|
|
@ -877,6 +1003,7 @@ export default { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
#searchMap { |
|
|
|
position: absolute; |
|
|
|
width: 200px; |
|
|
|
@ -884,6 +1011,7 @@ export default { |
|
|
|
visibility: hidden; |
|
|
|
pointer-events: none; |
|
|
|
} |
|
|
|
|
|
|
|
.btn { |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
@ -897,5 +1025,108 @@ export default { |
|
|
|
background-color: rgba(#000, 0.2); |
|
|
|
cursor: pointer; |
|
|
|
} |
|
|
|
/deep/ .label-num-class { |
|
|
|
font-size: 16px; |
|
|
|
font-weight: 500; |
|
|
|
color: #FFFFFF; |
|
|
|
background: rgba(3, 31, 73, 0.72); |
|
|
|
border: 1px solid #74C9FF; |
|
|
|
opacity: 0.9; |
|
|
|
border-radius: 100px; |
|
|
|
padding: 3px 13px; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .l7-popup-tip { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .jw-popup-bg { |
|
|
|
background: url('@/assets/images/overview/map-pop-img.png') no-repeat; |
|
|
|
width: 80px; |
|
|
|
height: 80px; |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
/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%); |
|
|
|
-webkit-background-clip: text; |
|
|
|
-webkit-text-fill-color: transparent; |
|
|
|
margin-bottom: 16px; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .jw-popup-des { |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 400; |
|
|
|
color: #FFFFFF; |
|
|
|
line-height: 22px; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .label-point-class { |
|
|
|
width: 32px; |
|
|
|
height: 32px; |
|
|
|
background-repeat: no-repeat; |
|
|
|
|
|
|
|
&.green { |
|
|
|
background-image: url("@/assets/images/overview/green.png"); |
|
|
|
} |
|
|
|
|
|
|
|
&.red { |
|
|
|
background-image: url("@/assets/images/overview/red.png"); |
|
|
|
} |
|
|
|
|
|
|
|
&.yellow { |
|
|
|
background-image: url("@/assets/images/overview/yellow.png"); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .jw-popup-type { |
|
|
|
margin: 16px 0 21px; |
|
|
|
|
|
|
|
.red { |
|
|
|
color: #FC561F; |
|
|
|
} |
|
|
|
|
|
|
|
.yellow { |
|
|
|
color: #FAB93F; |
|
|
|
} |
|
|
|
|
|
|
|
.green { |
|
|
|
color: #08EBAD; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .jw-popup-num-list { |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
|
|
|
|
& > div { |
|
|
|
flex: 0 0 131px; |
|
|
|
width: 131px; |
|
|
|
height: 14px; |
|
|
|
font-size: 14px; |
|
|
|
font-weight: 400; |
|
|
|
margin-bottom: 15px; |
|
|
|
|
|
|
|
span { |
|
|
|
font-size: 18px; |
|
|
|
font-weight: 500; |
|
|
|
color: #FFAA01; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
</style> |
|
|
|
|
战立标
2 years ago
