|
|
@ -19,6 +19,9 @@ import shequName from "@/assets/data/shequ-name.json";
|
|
|
|
// 街道
|
|
|
|
// 街道
|
|
|
|
import loujiangjiedao from "@/assets/data/loujiangjiedao.json"; //娄东街道
|
|
|
|
import loujiangjiedao from "@/assets/data/loujiangjiedao.json"; //娄东街道
|
|
|
|
import loujiangjiedaoMove from "@/assets/data/loujiangjiedao-move.json"; //娄东街道
|
|
|
|
import loujiangjiedaoMove from "@/assets/data/loujiangjiedao-move.json"; //娄东街道
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import xiaoqu from "@/assets/data/小区.json";
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
@ -27,9 +30,13 @@ export default {
|
|
|
|
mapLayers: {
|
|
|
|
mapLayers: {
|
|
|
|
mapLayer1: null,
|
|
|
|
mapLayer1: null,
|
|
|
|
mapLayer2: null,
|
|
|
|
mapLayer2: null,
|
|
|
|
|
|
|
|
mapLayer3: null,
|
|
|
|
|
|
|
|
mapLayer4: null,
|
|
|
|
mapLayer5: null,
|
|
|
|
mapLayer5: null,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
globalMap: null,
|
|
|
|
globalMap: null,
|
|
|
|
|
|
|
|
markerXiaoqu: null,
|
|
|
|
|
|
|
|
markerShequ: null,
|
|
|
|
};
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
mounted() {
|
|
|
@ -60,6 +67,16 @@ export default {
|
|
|
|
this.globalMap.getPane("mapLayer2").style.zIndex = 504;
|
|
|
|
this.globalMap.getPane("mapLayer2").style.zIndex = 504;
|
|
|
|
this.globalMap.getPane("mapLayer2").style.pointerEvents = "none";
|
|
|
|
this.globalMap.getPane("mapLayer2").style.pointerEvents = "none";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 小区面
|
|
|
|
|
|
|
|
this.globalMap.createPane("mapLayer3", rotatePane);
|
|
|
|
|
|
|
|
this.globalMap.getPane("mapLayer3").style.zIndex = 505;
|
|
|
|
|
|
|
|
this.globalMap.getPane("mapLayer3").style.pointerEvents = "none";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 小区名字
|
|
|
|
|
|
|
|
this.globalMap.createPane("mapLayer4", noRotatePane);
|
|
|
|
|
|
|
|
this.globalMap.getPane("mapLayer4").style.zIndex = 703;
|
|
|
|
|
|
|
|
this.globalMap.getPane("mapLayer4").style.pointerEvents = "none";
|
|
|
|
|
|
|
|
|
|
|
|
// 社区名字
|
|
|
|
// 社区名字
|
|
|
|
this.globalMap.createPane("mapLayer5", noRotatePane);
|
|
|
|
this.globalMap.createPane("mapLayer5", noRotatePane);
|
|
|
|
this.globalMap.getPane("mapLayer5").style.zIndex = 702;
|
|
|
|
this.globalMap.getPane("mapLayer5").style.zIndex = 702;
|
|
|
@ -67,12 +84,24 @@ export default {
|
|
|
|
|
|
|
|
|
|
|
|
this.mapLayers.mapLayer1 = L.featureGroup().addTo(this.globalMap);
|
|
|
|
this.mapLayers.mapLayer1 = L.featureGroup().addTo(this.globalMap);
|
|
|
|
this.mapLayers.mapLayer2 = L.featureGroup().addTo(this.globalMap);
|
|
|
|
this.mapLayers.mapLayer2 = L.featureGroup().addTo(this.globalMap);
|
|
|
|
|
|
|
|
this.mapLayers.mapLayer3 = L.featureGroup();
|
|
|
|
|
|
|
|
this.mapLayers.mapLayer4 = L.featureGroup().addTo(this.globalMap);
|
|
|
|
this.mapLayers.mapLayer5 = L.featureGroup().addTo(this.globalMap);
|
|
|
|
this.mapLayers.mapLayer5 = L.featureGroup().addTo(this.globalMap);
|
|
|
|
|
|
|
|
|
|
|
|
// 渲染街道
|
|
|
|
// 渲染街道
|
|
|
|
this.addStreet();
|
|
|
|
this.addStreet();
|
|
|
|
|
|
|
|
//社区
|
|
|
|
this.addShequ();
|
|
|
|
this.addShequ();
|
|
|
|
|
|
|
|
//小区
|
|
|
|
|
|
|
|
this.addXiaoqu();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.globalMap.on("zoomend", (e) => {
|
|
|
|
|
|
|
|
let zoom = e.target._zoom;
|
|
|
|
|
|
|
|
if (zoom >= 15) {
|
|
|
|
|
|
|
|
// this.mapLayers.mapLayer3.setStyle({ opacity: 1, fillOpacity: 0.2 });
|
|
|
|
|
|
|
|
// this.markerXiaoqu.setOpacity(1);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
addStreet() {
|
|
|
|
addStreet() {
|
|
|
@ -114,7 +143,8 @@ export default {
|
|
|
|
};
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}).addTo(this.mapLayers.mapLayer2);
|
|
|
|
}).addTo(this.mapLayers.mapLayer2);
|
|
|
|
|
|
|
|
let bounds = geojsons.getBounds();
|
|
|
|
|
|
|
|
this.globalMap.fitBounds(bounds);
|
|
|
|
// 社区名称
|
|
|
|
// 社区名称
|
|
|
|
L.geoJSON(shequName, {
|
|
|
|
L.geoJSON(shequName, {
|
|
|
|
pointToLayer: (feature) => {
|
|
|
|
pointToLayer: (feature) => {
|
|
|
@ -124,7 +154,7 @@ export default {
|
|
|
|
iconSize: [80, 20],
|
|
|
|
iconSize: [80, 20],
|
|
|
|
iconAnchor: [40, 10],
|
|
|
|
iconAnchor: [40, 10],
|
|
|
|
});
|
|
|
|
});
|
|
|
|
var marker = L.marker(
|
|
|
|
return L.marker(
|
|
|
|
L.latLng(
|
|
|
|
L.latLng(
|
|
|
|
feature.geometry.coordinates[1],
|
|
|
|
feature.geometry.coordinates[1],
|
|
|
|
feature.geometry.coordinates[0]
|
|
|
|
feature.geometry.coordinates[0]
|
|
|
@ -136,11 +166,57 @@ export default {
|
|
|
|
rotationOrigin: "left center",
|
|
|
|
rotationOrigin: "left center",
|
|
|
|
}
|
|
|
|
}
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
|
|
|
},
|
|
|
|
return marker;
|
|
|
|
style: {
|
|
|
|
|
|
|
|
opacity: 0,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}).addTo(this.mapLayers.mapLayer5);
|
|
|
|
}).addTo(this.mapLayers.mapLayer5);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
addXiaoqu() {
|
|
|
|
|
|
|
|
L.geoJSON(xiaoqu, {
|
|
|
|
|
|
|
|
pane: "mapLayer3",
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
style: function (feature) {
|
|
|
|
|
|
|
|
let id = feature.properties.Id;
|
|
|
|
|
|
|
|
/* 没有人口数据面给灰色 */
|
|
|
|
|
|
|
|
if (id == 254 || id == 257 || id == 260) {
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
color: "#545454",
|
|
|
|
|
|
|
|
weight: 5,
|
|
|
|
|
|
|
|
fillColor: "#545454",
|
|
|
|
|
|
|
|
fillOpacity: 0.5,
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
color: "#ffeb3b",
|
|
|
|
|
|
|
|
weight: 5,
|
|
|
|
|
|
|
|
fillColor: "#ffeb3b",
|
|
|
|
|
|
|
|
fillOpacity: 0.2,
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
onEachFeature: (feature, layer) => {
|
|
|
|
|
|
|
|
let bounds = layer._bounds;
|
|
|
|
|
|
|
|
let center = bounds.getCenter();
|
|
|
|
|
|
|
|
let text = feature.properties.name;
|
|
|
|
|
|
|
|
let html = text;
|
|
|
|
|
|
|
|
let myIcon = L.divIcon({
|
|
|
|
|
|
|
|
className: "land-name",
|
|
|
|
|
|
|
|
html: html,
|
|
|
|
|
|
|
|
iconSize: [150, 24],
|
|
|
|
|
|
|
|
iconAnchor: [75, 12],
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
// 多边形上的标记点;
|
|
|
|
|
|
|
|
let marker = L.marker(center, {
|
|
|
|
|
|
|
|
pane: "mapLayer3",
|
|
|
|
|
|
|
|
properties: feature.properties,
|
|
|
|
|
|
|
|
icon: myIcon,
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
marker.addTo(this.mapLayers.mapLayer3);
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
}).addTo(this.mapLayers.mapLayer3);
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|