|
|
|
@ -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,9 +145,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 |
|
|
|
@ -168,13 +172,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 |
|
|
|
@ -201,11 +205,11 @@ export default { |
|
|
|
}, |
|
|
|
})), |
|
|
|
]; |
|
|
|
return {type: "FeatureCollection", features: polygon}; |
|
|
|
return { type: "FeatureCollection", features: polygon }; |
|
|
|
}, |
|
|
|
|
|
|
|
dotData() { |
|
|
|
const {dotList} = this; |
|
|
|
const { dotList } = this; |
|
|
|
return { |
|
|
|
type: "FeatureCollection", |
|
|
|
features: [ |
|
|
|
@ -226,7 +230,7 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
dotData2() { |
|
|
|
const {dotList2} = this; |
|
|
|
const { dotList2 } = this; |
|
|
|
return { |
|
|
|
type: "FeatureCollection", |
|
|
|
features: [ |
|
|
|
@ -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; |
|
|
|
@ -404,7 +414,7 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
iniMapGrid(scene) { |
|
|
|
const {darkStyle, lightStyle, polygonData, polygonDotData} = this; |
|
|
|
const { darkStyle, lightStyle, polygonData, polygonDotData } = this; |
|
|
|
|
|
|
|
let styleConfig = darkStyle; |
|
|
|
if (this.mapStyleType == "light") { |
|
|
|
@ -477,8 +487,8 @@ export default { |
|
|
|
|
|
|
|
posLayer = new PointLayer({ |
|
|
|
zIndex: 4, |
|
|
|
name: 'gridPoint', |
|
|
|
visible: false |
|
|
|
name: "gridPoint", |
|
|
|
visible: false, |
|
|
|
}) |
|
|
|
.source(polygonDotData) |
|
|
|
.shape("name", [ |
|
|
|
@ -488,12 +498,11 @@ export default { |
|
|
|
]) |
|
|
|
.size(12) |
|
|
|
.style({ |
|
|
|
options: this.level === 'grid' ? 1 : 0, |
|
|
|
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 { |
|
|
|
@ -520,16 +529,14 @@ export default { |
|
|
|
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,7 +579,7 @@ 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]); |
|
|
|
}); |
|
|
|
@ -624,12 +627,11 @@ 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]); |
|
|
|
}); |
|
|
|
@ -664,8 +666,7 @@ export default { |
|
|
|
} |
|
|
|
}); |
|
|
|
|
|
|
|
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); |
|
|
|
@ -791,39 +792,35 @@ export default { |
|
|
|
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); |
|
|
|
}, |
|
|
|
@ -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