|
|
|
@ -1,17 +1,39 @@ |
|
|
|
<template> |
|
|
|
<div class="m-map" :class="{ 'z-td': mapType == 'td' }"> |
|
|
|
<div id="map" :style="{ transform: `scale(${zoom})` }"></div> |
|
|
|
<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> |
|
|
|
<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 nextTick from "dai-js/tools/nextTick"; |
|
|
|
import { Scene, PolygonLayer, LineLayer, MarkerLayer, RasterLayer, PointLayer, Marker, Popup } from "@antv/l7"; |
|
|
|
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"; |
|
|
|
@ -146,7 +168,11 @@ export default { |
|
|
|
computed: { |
|
|
|
polygonData() { |
|
|
|
const { srcGridData } = this; |
|
|
|
if (!srcGridData || !srcGridData.children || !Array.isArray(srcGridData.children)) { |
|
|
|
if ( |
|
|
|
!srcGridData || |
|
|
|
!srcGridData.children || |
|
|
|
!Array.isArray(srcGridData.children) |
|
|
|
) { |
|
|
|
return { type: "FeatureCollection", features: [] }; |
|
|
|
} |
|
|
|
const polygon = [ |
|
|
|
@ -178,7 +204,11 @@ export default { |
|
|
|
|
|
|
|
polygonDotData() { |
|
|
|
const { srcGridData } = this; |
|
|
|
if (!srcGridData || !srcGridData.children || !Array.isArray(srcGridData.children)) { |
|
|
|
if ( |
|
|
|
!srcGridData || |
|
|
|
!srcGridData.children || |
|
|
|
!Array.isArray(srcGridData.children) |
|
|
|
) { |
|
|
|
return { type: "FeatureCollection", features: [] }; |
|
|
|
} |
|
|
|
const polygon = [ |
|
|
|
@ -199,7 +229,9 @@ export default { |
|
|
|
item.latitude |
|
|
|
? [[item.longitude, item.latitude]] |
|
|
|
: spliceIntoChunks( |
|
|
|
item.coordinates.split(",").map((item) => parseFloat(item)), |
|
|
|
item.coordinates |
|
|
|
.split(",") |
|
|
|
.map((item) => parseFloat(item)), |
|
|
|
2 |
|
|
|
).filter((item) => item.length == 2), |
|
|
|
], |
|
|
|
@ -223,7 +255,10 @@ export default { |
|
|
|
}, |
|
|
|
geometry: { |
|
|
|
type: "Point", |
|
|
|
coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)], |
|
|
|
coordinates: [ |
|
|
|
parseFloat(item.longitude), |
|
|
|
parseFloat(item.latitude), |
|
|
|
], |
|
|
|
}, |
|
|
|
})), |
|
|
|
], |
|
|
|
@ -244,7 +279,10 @@ export default { |
|
|
|
}, |
|
|
|
geometry: { |
|
|
|
type: "Point", |
|
|
|
coordinates: [parseFloat(item.longitude), parseFloat(item.latitude)], |
|
|
|
coordinates: [ |
|
|
|
parseFloat(item.longitude), |
|
|
|
parseFloat(item.latitude), |
|
|
|
], |
|
|
|
}, |
|
|
|
})), |
|
|
|
], |
|
|
|
@ -306,7 +344,14 @@ export default { |
|
|
|
styleConfig = lightStyle; |
|
|
|
} |
|
|
|
|
|
|
|
const iniCenter = [srcGridData.longitude || this.$store.state.user.longitude || 116.39743841556731, srcGridData.latitude || this.$store.state.user.latitude || 39.9088810666821]; |
|
|
|
const iniCenter = [ |
|
|
|
srcGridData.longitude || |
|
|
|
this.$store.state.user.longitude || |
|
|
|
116.39743841556731, |
|
|
|
srcGridData.latitude || |
|
|
|
this.$store.state.user.latitude || |
|
|
|
39.9088810666821, |
|
|
|
]; |
|
|
|
|
|
|
|
if (mapType != "qq") { |
|
|
|
myMap = new Map({ |
|
|
|
@ -319,6 +364,7 @@ export default { |
|
|
|
// pitch: this.pitch, |
|
|
|
mapStyle: "amap://styles/darkblue", |
|
|
|
// style: styleConfig.style, |
|
|
|
showLabel: false, |
|
|
|
center: iniCenter, |
|
|
|
token: "fc14b42e0ca18387866d68ebd4f150c1", |
|
|
|
zoom: 18, |
|
|
|
@ -357,15 +403,18 @@ 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, |
|
|
|
}, |
|
|
|
}) |
|
|
|
.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, |
|
|
|
}); |
|
|
|
@ -375,15 +424,18 @@ export default { |
|
|
|
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, |
|
|
|
}, |
|
|
|
}) |
|
|
|
.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, |
|
|
|
}); |
|
|
|
@ -483,8 +535,14 @@ export default { |
|
|
|
}); |
|
|
|
// 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")); |
|
|
|
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 PointLayer({ |
|
|
|
zIndex: 4, |
|
|
|
@ -544,7 +602,11 @@ 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> |
|
|
|
@ -727,7 +789,9 @@ export default { |
|
|
|
// lng 经度；lat 纬度；dis 距离（千米） |
|
|
|
let r = 6371; //地球半径千米 |
|
|
|
let dis = 0.25; //3千米距离 |
|
|
|
let dlng = 2 * Math.asin(Math.sin(dis / (2 * r)) / Math.cos((lat * Math.PI) / 180)); |
|
|
|
let dlng = |
|
|
|
2 * |
|
|
|
Math.asin(Math.sin(dis / (2 * r)) / Math.cos((lat * Math.PI) / 180)); |
|
|
|
dlng = (dlng * 180) / Math.PI; // 经度半径 |
|
|
|
let dlat = dis / r; |
|
|
|
dlat = (dlat * 180) / Math.PI; // 纬度半径 |
|
|
|
@ -802,7 +866,10 @@ export default { |
|
|
|
for (let i in data) { |
|
|
|
// 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.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({ |
|
|
|
@ -821,14 +888,34 @@ export default { |
|
|
|
<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> |
|
|
|
<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>户数：<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> |
|
|
|
@ -839,7 +926,9 @@ export default { |
|
|
|
popup.remove(); |
|
|
|
}); |
|
|
|
pointMarkerItem.on("click", () => { |
|
|
|
this.$router.push(`/homeDetails/index?id=${data[i].id}&typeB=${peopleType}`); |
|
|
|
this.$router.push( |
|
|
|
`/homeDetails/index?id=${data[i].id}&typeB=${peopleType}` |
|
|
|
); |
|
|
|
}); |
|
|
|
|
|
|
|
pointMarker.addMarker(pointMarkerItem); |
|
|
|
@ -930,7 +1019,10 @@ export default { |
|
|
|
|
|
|
|
handleClickDotListItem(item) { |
|
|
|
console.log("handleClickDotListItem", item); |
|
|
|
this.handleClickDot(item, [parseFloat(item.longitude), parseFloat(item.latitude)]); |
|
|
|
this.handleClickDot(item, [ |
|
|
|
parseFloat(item.longitude), |
|
|
|
parseFloat(item.latitude), |
|
|
|
]); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
@ -957,7 +1049,12 @@ export default { |
|
|
|
right: 0; |
|
|
|
bottom: 0; |
|
|
|
pointer-events: none; |
|
|
|
background: radial-gradient(rgba(#020c38, 0) 0%, rgba(#020c38, 0) 60%, rgba(#020c38, 1) 85%, rgba(#020c38, 1) 100%); |
|
|
|
background: radial-gradient( |
|
|
|
rgba(#020c38, 0) 0%, |
|
|
|
rgba(#020c38, 0) 60%, |
|
|
|
rgba(#020c38, 1) 85%, |
|
|
|
rgba(#020c38, 1) 100% |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
&.z-td { |
|
|
|
@ -965,7 +1062,11 @@ export default { |
|
|
|
/deep/ .l7-scene { |
|
|
|
canvas { |
|
|
|
background-color: rgba(43, 51, 73, 0.82); |
|
|
|
background-image: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), #000); |
|
|
|
background-image: radial-gradient( |
|
|
|
rgba(0, 0, 0, 0), |
|
|
|
rgba(0, 0, 0, 0.3), |
|
|
|
#000 |
|
|
|
); |
|
|
|
} |
|
|
|
|
|
|
|
.gray { |
|
|
|
|
张若晨
2 years ago