|
|
|
@ -297,46 +297,59 @@ export default {
|
|
|
|
|
this.mapLayer.mapLayer1.clearLayers() //清除该图层中数据
|
|
|
|
|
this.parkName = name
|
|
|
|
|
let mapObj = mapJson.filter((item) => item.parkName == name)
|
|
|
|
|
console.log(mapObj)
|
|
|
|
|
console.log(name)
|
|
|
|
|
console.log(mapObj, '面数据')
|
|
|
|
|
if (mapObj.length == 0) {
|
|
|
|
|
this.$message.error('暂无该工业园面数据...')
|
|
|
|
|
return
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
L.geoJSON(mapObj[0].floorLayer, {
|
|
|
|
|
let mapGeoJons = L.geoJSON(mapObj[0].floorLayer, {
|
|
|
|
|
pane: 'mapLayer1',
|
|
|
|
|
style: function (feature) {
|
|
|
|
|
// let bounds = layer.getBounds()
|
|
|
|
|
// let latlng = bounds.getCenter()
|
|
|
|
|
return {
|
|
|
|
|
color: '#4A8AFF',
|
|
|
|
|
color: '#177FD4',
|
|
|
|
|
weight: 2,
|
|
|
|
|
fillColor: '#4A8AFF',
|
|
|
|
|
fillColor: '#177FD4',
|
|
|
|
|
fillOpacity: 0.2,
|
|
|
|
|
dashArray: '6,4',
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
}).addTo(this.mapLayer.mapLayer1)
|
|
|
|
|
|
|
|
|
|
let bounds = mapGeoJons.getBounds()
|
|
|
|
|
let latlng = bounds.getCenter()
|
|
|
|
|
|
|
|
|
|
var myIcon = L.divIcon({
|
|
|
|
|
className: 'map-icon-box',
|
|
|
|
|
html: `<div class="park-icon">
|
|
|
|
|
<div class="icon"></div>
|
|
|
|
|
<div class="icon-name">${this.parkName}</div>
|
|
|
|
|
</div >`,
|
|
|
|
|
iconSize: [200, 0],
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
L.marker([latlng.lat, latlng.lng], { icon: myIcon }).addTo(
|
|
|
|
|
this.mapLayer.mapLayer1
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
this.face = L.geoJSON(mapObj[0].parkLayer, {
|
|
|
|
|
pane: 'mapLayer2',
|
|
|
|
|
style: function (feature) {
|
|
|
|
|
var backgroundColor
|
|
|
|
|
if (feature.properties.level === '低风险') {
|
|
|
|
|
backgroundColor = '#188AFF'
|
|
|
|
|
backgroundColor = '#4CBAF3'
|
|
|
|
|
} else if (feature.properties.level === '一般风险') {
|
|
|
|
|
backgroundColor = '#F2E406'
|
|
|
|
|
backgroundColor = '#FFD619'
|
|
|
|
|
} else if (feature.properties.level === '较大风险') {
|
|
|
|
|
backgroundColor = '#DB8C02'
|
|
|
|
|
backgroundColor = '#FF9600'
|
|
|
|
|
} else {
|
|
|
|
|
backgroundColor = '#FF2F47'
|
|
|
|
|
backgroundColor = '#E8B25F'
|
|
|
|
|
}
|
|
|
|
|
return {
|
|
|
|
|
color: backgroundColor,
|
|
|
|
|
weight: 1,
|
|
|
|
|
fillColor: backgroundColor,
|
|
|
|
|
fillOpacity: 0.6,
|
|
|
|
|
fillOpacity: 1,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onEachFeature: (feature, layer) => {
|
|
|
|
@ -579,8 +592,4 @@ div {
|
|
|
|
|
color: #fff;
|
|
|
|
|
font-family: 'AlibabaPuHuiTi-Medium';
|
|
|
|
|
}
|
|
|
|
|
.layerItem {
|
|
|
|
|
text-align: center;
|
|
|
|
|
margin-left: 0.02rem;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|