|
@@ -27,9 +27,9 @@
|
|
import MapSelector from '@/components/MapSelector'
|
|
import MapSelector from '@/components/MapSelector'
|
|
import { getMapLayerById, createMapLayer, delMapLayer, updateMapLayer, getMapLayer } from '@/api/goaf/layer'
|
|
import { getMapLayerById, createMapLayer, delMapLayer, updateMapLayer, getMapLayer } from '@/api/goaf/layer'
|
|
const markerIcon = L.icon({
|
|
const markerIcon = L.icon({
|
|
- iconUrl: require('@/assets/icon/4.png'),
|
|
|
|
- shadowUrl: require('@/assets/icon/4hover.png'),
|
|
|
|
- iconSize: [60, 70],
|
|
|
|
|
|
+ iconUrl: require('@/assets/map/default.png'),
|
|
|
|
+ shadowUrl: require('@/assets/map/default.png'),
|
|
|
|
+ iconSize: [37.2, 57.6],
|
|
shadowSize: [0, 0],
|
|
shadowSize: [0, 0],
|
|
iconAnchor: [16, 52],
|
|
iconAnchor: [16, 52],
|
|
popupAnchor: [1, -38]
|
|
popupAnchor: [1, -38]
|
|
@@ -174,17 +174,20 @@
|
|
}
|
|
}
|
|
})
|
|
})
|
|
L.geoJSON(feature, {
|
|
L.geoJSON(feature, {
|
|
- // pointToLayer: function(_feature, latlng) {
|
|
|
|
- // // var smallIcon = L.Icon({
|
|
|
|
- // // options: {
|
|
|
|
- // // iconSize: [27, 27],
|
|
|
|
- // // iconAnchor: [13, 27],
|
|
|
|
- // // popupAnchor: [1, -24],
|
|
|
|
- // // iconUrl: 'icone/chapel-2.png'
|
|
|
|
- // // }
|
|
|
|
- // // })
|
|
|
|
- // // return L.marker(latlng, { icon: smallIcon })
|
|
|
|
- // },
|
|
|
|
|
|
+ pointToLayer: function(_feature, latlng) {
|
|
|
|
+ const goafInfo = _feature.properties.goafInfo
|
|
|
|
+ let Volume = 0
|
|
|
|
+ if (goafInfo) {
|
|
|
|
+ Volume = (goafInfo.goafCanfillVolume - goafInfo.goafRemainVolume) / goafInfo.goafCanfillVolume
|
|
|
|
+ Volume = (Volume * 100).toFixed(2)
|
|
|
|
+ }
|
|
|
|
+ const html = `<div class="goaf-icon-box" style="width:100%;height:100%;position: relative;"><div class="goaf-fill-v" style="height:${Volume}%;"></div></div>`
|
|
|
|
+ var icon = L.divIcon({
|
|
|
|
+ html,
|
|
|
|
+ iconSize: [50, 50]
|
|
|
|
+ })
|
|
|
|
+ return L.marker(latlng, { icon })
|
|
|
|
+ },
|
|
onEachFeature: (_feature, layer) => {
|
|
onEachFeature: (_feature, layer) => {
|
|
this.layerGroup.addLayer(layer)
|
|
this.layerGroup.addLayer(layer)
|
|
// layer.on('click', (ev) => {
|
|
// layer.on('click', (ev) => {
|
|
@@ -307,4 +310,16 @@
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|
|
|
|
|
|
-
|
|
|
|
|
|
+ <style lang="scss">
|
|
|
|
+ .goaf-fill-v{
|
|
|
|
+ width:100%;
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ left: 0;
|
|
|
|
+ background-image: url("./goaf/stone.png");
|
|
|
|
+ background-size: 7px;
|
|
|
|
+ &.fill{
|
|
|
|
+ background-image: url("./goaf/stone.png");
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|