|
|
|
@ -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,9 +141,9 @@ 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 |
|
|
|
@ -162,13 +168,13 @@ export default { |
|
|
|
}, |
|
|
|
})), |
|
|
|
]; |
|
|
|
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 |
|
|
|
@ -195,11 +201,11 @@ export default { |
|
|
|
}, |
|
|
|
})), |
|
|
|
]; |
|
|
|
return { type: "FeatureCollection", features: polygon }; |
|
|
|
return {type: "FeatureCollection", features: polygon}; |
|
|
|
}, |
|
|
|
|
|
|
|
dotData() { |
|
|
|
const { dotList } = this; |
|
|
|
const {dotList} = this; |
|
|
|
return { |
|
|
|
type: "FeatureCollection", |
|
|
|
features: [ |
|
|
|
@ -220,7 +226,7 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
dotData2() { |
|
|
|
const { dotList2 } = this; |
|
|
|
const {dotList2} = this; |
|
|
|
return { |
|
|
|
type: "FeatureCollection", |
|
|
|
features: [ |
|
|
|
@ -281,7 +287,7 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
iniMap() { |
|
|
|
const { darkStyle, lightStyle, srcGridData } = this; |
|
|
|
const {darkStyle, lightStyle, srcGridData} = this; |
|
|
|
if (!srcGridData) return false; |
|
|
|
|
|
|
|
let styleConfig = darkStyle; |
|
|
|
@ -398,7 +404,7 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
iniMapGrid(scene) { |
|
|
|
const { darkStyle, lightStyle, polygonData, polygonDotData } = this; |
|
|
|
const {darkStyle, lightStyle, polygonData, polygonDotData} = this; |
|
|
|
|
|
|
|
let styleConfig = darkStyle; |
|
|
|
if (this.mapStyleType == "light") { |
|
|
|
@ -465,12 +471,14 @@ export default { |
|
|
|
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", [ |
|
|
|
@ -480,16 +488,21 @@ export default { |
|
|
|
]) |
|
|
|
.size(12) |
|
|
|
.style({ |
|
|
|
offsets: [0, 8], // 文本相对锚点的偏移量 [水平, 垂直] |
|
|
|
// rotation: 60, |
|
|
|
// layerType: "fillImage", |
|
|
|
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) |
|
|
|
.source(polygonData) |
|
|
|
.color("name", styleConfig.textColor) |
|
|
|
.shape("name", "text") |
|
|
|
.size(16) |
|
|
|
@ -507,46 +520,63 @@ export default { |
|
|
|
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>`); |
|
|
|
.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]); |
|
|
|
}); |
|
|
|
@ -594,11 +624,12 @@ export default { |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
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]); |
|
|
|
}); |
|
|
|
@ -633,7 +664,8 @@ export default { |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
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); |
|
|
|
@ -753,7 +791,86 @@ export default { |
|
|
|
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); |
|
|
|
@ -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
