|
|
@@ -1,291 +1,291 @@
|
|
|
<template>
|
|
|
- <div class="map-container">
|
|
|
- <nav>
|
|
|
- <map-selector :default-val="formData.mapId" @setMapInfo="handleSelectMap" />
|
|
|
- </nav>
|
|
|
- <div class="layout-map">
|
|
|
- <div id="vmap" />
|
|
|
- <div id="marker-tip" :style="marker_tip_style">
|
|
|
- <div class="head">基本信息</div>
|
|
|
- <div class="item">
|
|
|
- <p class="title">巡检任务统计(20)</p>
|
|
|
- <p><span>未完成：8</span><span>已完成：8</span></p>
|
|
|
- </div>
|
|
|
- <div class="item">
|
|
|
- <p class="title">传感器统计(21)</p>
|
|
|
- <p><span>在线：8</span><span>离线：8</span></p>
|
|
|
- <p><span class="warn">预警：8</span></p>
|
|
|
- </div>
|
|
|
+ <div class="map-container">
|
|
|
+ <nav>
|
|
|
+ <map-selector :default-val="formData.mapId" @setMapInfo="handleSelectMap" />
|
|
|
+ </nav>
|
|
|
+ <div class="layout-map">
|
|
|
+ <div id="vmap" />
|
|
|
+ <div id="marker-tip" :style="marker_tip_style">
|
|
|
+ <div class="head">基本信息</div>
|
|
|
+ <div class="item">
|
|
|
+ <p class="title">巡检任务统计(20)</p>
|
|
|
+ <p><span>未完成：8</span><span>已完成：8</span></p>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <p class="title">传感器统计(21)</p>
|
|
|
+ <p><span>在线：8</span><span>离线：8</span></p>
|
|
|
+ <p><span class="warn">预警：8</span></p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
-
|
|
|
- <script>
|
|
|
- import * as L from 'leaflet'
|
|
|
- import '@geoman-io/leaflet-geoman-free'
|
|
|
- import MapSelector from '@/components/MapSelector'
|
|
|
- import { getMapLayerById, getMapLayer } from '@/api/goaf/layer'
|
|
|
- import { NumConvertLM } from '@/utils'
|
|
|
- const iconSize=[110,110]
|
|
|
- export default {
|
|
|
- name: 'GoafVisualEditor',
|
|
|
- components: {
|
|
|
- MapSelector
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- viewData: {},
|
|
|
- formData: {
|
|
|
- mapId: undefined,
|
|
|
- layerId: undefined,
|
|
|
- layerVector: ''
|
|
|
- },
|
|
|
- map: undefined,
|
|
|
- geoLayer: undefined,
|
|
|
- conditions: {
|
|
|
- layerId: undefined
|
|
|
- },
|
|
|
- layer: {
|
|
|
- containerPoint:{
|
|
|
- x:"",
|
|
|
- y:""
|
|
|
- }
|
|
|
- },
|
|
|
- marker_tip_style:"",
|
|
|
- layers: [],
|
|
|
- layerGroup: [],
|
|
|
- mapList:[],
|
|
|
- imageOverlay: undefined
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.init()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- init() {
|
|
|
- this.initMap()
|
|
|
+
|
|
|
+<script>
|
|
|
+import * as L from 'leaflet'
|
|
|
+import '@geoman-io/leaflet-geoman-free'
|
|
|
+import MapSelector from '@/components/MapSelector'
|
|
|
+import { getMapLayerById, getMapLayer } from '@/api/goaf/layer'
|
|
|
+import { NumConvertLM } from '@/utils'
|
|
|
+const iconSize = [110, 110]
|
|
|
+export default {
|
|
|
+ name: 'GoafVisualEditor',
|
|
|
+ components: {
|
|
|
+ MapSelector
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ viewData: {},
|
|
|
+ formData: {
|
|
|
+ mapId: undefined,
|
|
|
+ layerId: undefined,
|
|
|
+ layerVector: ''
|
|
|
},
|
|
|
- // 初始化
|
|
|
- getData() {
|
|
|
- getMapLayerById(this.conditions.layerId).then((resp) => {
|
|
|
- const { data } = resp
|
|
|
- this.viewData = data
|
|
|
- this.setRasterLayer()
|
|
|
- })
|
|
|
+ map: undefined,
|
|
|
+ geoLayer: undefined,
|
|
|
+ conditions: {
|
|
|
+ layerId: undefined
|
|
|
},
|
|
|
-
|
|
|
- // 初始化地图
|
|
|
- initMap() {
|
|
|
- var yx = L.latLng
|
|
|
- var xy = function xy(x, y) {
|
|
|
- if (L.Util.isArray(x)) {
|
|
|
- return yx(x[1], x[0])
|
|
|
- }
|
|
|
- return yx(y, x)
|
|
|
+ layer: {
|
|
|
+ containerPoint: {
|
|
|
+ x: '',
|
|
|
+ y: ''
|
|
|
}
|
|
|
- var bounds = [xy(-600, -600), xy(300, 300)]
|
|
|
- this.map = L.map('vmap', {
|
|
|
- crs: L.CRS.Simple, // 一个简单的CRS，可将经度和纬度直接映射到x其中y。可用于平面地图（例如游戏地图）
|
|
|
- minZoom: 0,
|
|
|
- maxZoom: 1,
|
|
|
- zoom: 1,
|
|
|
- maxBounds: bounds, // 地图拖动到边界后自动弹回
|
|
|
- maxBoundsViscosity: 0.2,
|
|
|
- attributionControl: true,
|
|
|
- zoomControl: true // zoomControl（缩放控制）：确定缩放控制是否默认加载在地图上。
|
|
|
- })
|
|
|
- this.layerGroup = L.layerGroup().addTo(this.map)
|
|
|
- this.geoLayer = L.geoJson(null, { pmIgnore: false })
|
|
|
- this.geoLayer.addTo(this.map)
|
|
|
- if (!this.viewData.layerVector) return
|
|
|
- this.geoLayer.addData(this.viewData.layerVector)
|
|
|
},
|
|
|
-
|
|
|
- // 设置地图背景图
|
|
|
- setRasterLayer() {
|
|
|
- var yx = L.latLng
|
|
|
- var xy = function xy(x, y) {
|
|
|
- if (L.Util.isArray(x)) {
|
|
|
- return yx(x[1], x[0])
|
|
|
- }
|
|
|
- return yx(y, x)
|
|
|
+ marker_tip_style: '',
|
|
|
+ layers: [],
|
|
|
+ layerGroup: [],
|
|
|
+ mapList: [],
|
|
|
+ imageOverlay: undefined
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ this.initMap()
|
|
|
+ },
|
|
|
+ // 初始化
|
|
|
+ getData() {
|
|
|
+ getMapLayerById(this.conditions.layerId).then((resp) => {
|
|
|
+ const { data } = resp
|
|
|
+ this.viewData = data
|
|
|
+ this.setRasterLayer()
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 初始化地图
|
|
|
+ initMap() {
|
|
|
+ var yx = L.latLng
|
|
|
+ var xy = function xy(x, y) {
|
|
|
+ if (L.Util.isArray(x)) {
|
|
|
+ return yx(x[1], x[0])
|
|
|
}
|
|
|
- var bounds = [xy(-600, -600), xy(300, 300)]
|
|
|
- if (this.imageOverlay) {
|
|
|
- this.imageOverlay.setUrl(this.viewData.mapRasterLayer)
|
|
|
- } else {
|
|
|
- this.imageOverlay = L.imageOverlay(this.viewData.mapRasterLayer, bounds).addTo(this.map)
|
|
|
+ return yx(y, x)
|
|
|
+ }
|
|
|
+ var bounds = [xy(-600, -600), xy(300, 300)]
|
|
|
+ this.map = L.map('vmap', {
|
|
|
+ crs: L.CRS.Simple, // 一个简单的CRS，可将经度和纬度直接映射到x其中y。可用于平面地图（例如游戏地图）
|
|
|
+ minZoom: 0,
|
|
|
+ maxZoom: 1,
|
|
|
+ zoom: 1,
|
|
|
+ maxBounds: bounds, // 地图拖动到边界后自动弹回
|
|
|
+ maxBoundsViscosity: 0.2,
|
|
|
+ attributionControl: true,
|
|
|
+ zoomControl: true // zoomControl（缩放控制）：确定缩放控制是否默认加载在地图上。
|
|
|
+ })
|
|
|
+ this.layerGroup = L.layerGroup().addTo(this.map)
|
|
|
+ this.geoLayer = L.geoJson(null, { pmIgnore: false })
|
|
|
+ this.geoLayer.addTo(this.map)
|
|
|
+ if (!this.viewData.layerVector) return
|
|
|
+ this.geoLayer.addData(this.viewData.layerVector)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 设置地图背景图
|
|
|
+ setRasterLayer() {
|
|
|
+ var yx = L.latLng
|
|
|
+ var xy = function xy(x, y) {
|
|
|
+ if (L.Util.isArray(x)) {
|
|
|
+ return yx(x[1], x[0])
|
|
|
}
|
|
|
-
|
|
|
- this.map.fitBounds(bounds)
|
|
|
- this.map.scrollWheelZoom.disable()
|
|
|
- this.getMapLayers()
|
|
|
- },
|
|
|
-
|
|
|
- // 选择地图
|
|
|
- handleSelectMap(obj,mapList) {
|
|
|
- this.viewData.mapRasterLayer = obj.mapRasterLayer
|
|
|
- this.viewData.mapId = obj.mapId
|
|
|
- this.formData.mapId = obj.mapId
|
|
|
- if(mapList){
|
|
|
- this.mapList=mapList
|
|
|
+ return yx(y, x)
|
|
|
+ }
|
|
|
+ var bounds = [xy(-600, -600), xy(300, 300)]
|
|
|
+ if (this.imageOverlay) {
|
|
|
+ this.imageOverlay.setUrl(this.viewData.mapRasterLayer)
|
|
|
+ } else {
|
|
|
+ this.imageOverlay = L.imageOverlay(this.viewData.mapRasterLayer, bounds).addTo(this.map)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.map.fitBounds(bounds)
|
|
|
+ this.map.scrollWheelZoom.disable()
|
|
|
+ this.getMapLayers()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选择地图
|
|
|
+ handleSelectMap(obj, mapList) {
|
|
|
+ this.viewData.mapRasterLayer = obj.mapRasterLayer
|
|
|
+ this.viewData.mapId = obj.mapId
|
|
|
+ this.formData.mapId = obj.mapId
|
|
|
+ if (mapList) {
|
|
|
+ this.mapList = mapList
|
|
|
+ }
|
|
|
+ this.setRasterLayer()
|
|
|
+ this.clearLayers()
|
|
|
+ },
|
|
|
+ formSuccess() {
|
|
|
+ this.$emit('formSuccess')
|
|
|
+ },
|
|
|
+ // 获取地图图层数据
|
|
|
+ getMapLayers() {
|
|
|
+ getMapLayer({
|
|
|
+ mapId: this.formData.mapId
|
|
|
+ }).then((resp) => {
|
|
|
+ const { code, data, msg } = resp
|
|
|
+ if (code === 0) {
|
|
|
+ this.mapLayerList = data
|
|
|
+ this.initMapLayers()
|
|
|
+ } else {
|
|
|
+ this.$message.error(msg)
|
|
|
}
|
|
|
+ })
|
|
|
+ },
|
|
|
+ updateMapLayers(mapId, type = 1) {
|
|
|
+ if (type === 1) {
|
|
|
this.setRasterLayer()
|
|
|
this.clearLayers()
|
|
|
- },
|
|
|
- formSuccess() {
|
|
|
- this.$emit('formSuccess')
|
|
|
- },
|
|
|
- // 获取地图图层数据
|
|
|
- getMapLayers() {
|
|
|
- getMapLayer({
|
|
|
- mapId:this.formData.mapId
|
|
|
- }).then((resp) => {
|
|
|
- const { code, data, msg } = resp
|
|
|
- if (code === 0) {
|
|
|
- this.mapLayerList = data
|
|
|
- this.initMapLayers()
|
|
|
- } else {
|
|
|
- this.$message.error(msg)
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- updateMapLayers(mapId,type=1){
|
|
|
- if(type===1){
|
|
|
+ } else {
|
|
|
+ /** 其他图层改变需要跳转 */
|
|
|
+ if (this.formData.mapId === mapId) {
|
|
|
+ this.setRasterLayer()
|
|
|
+ this.clearLayers()
|
|
|
+ } else {
|
|
|
+ const obj = this.mapList.filter(item => item.mapId === mapId)[0]
|
|
|
+ this.viewData.mapRasterLayer = obj.mapRasterLayer
|
|
|
+ this.viewData.mapId = obj.mapId
|
|
|
+ this.formData.mapId = obj.mapId
|
|
|
this.setRasterLayer()
|
|
|
this.clearLayers()
|
|
|
- }else{
|
|
|
- /** 其他图层改变需要跳转 */
|
|
|
- if(this.formData.mapId===mapId){
|
|
|
- this.setRasterLayer()
|
|
|
- this.clearLayers()
|
|
|
- }else{
|
|
|
- let obj=this.mapList.filter(item=>item.mapId===mapId)[0]
|
|
|
- this.viewData.mapRasterLayer = obj.mapRasterLayer
|
|
|
- this.viewData.mapId = obj.mapId
|
|
|
- this.formData.mapId = obj.mapId
|
|
|
- this.setRasterLayer()
|
|
|
- this.clearLayers()
|
|
|
- }
|
|
|
}
|
|
|
- },
|
|
|
- // 初始化地图图层
|
|
|
- initMapLayers() {
|
|
|
- const self = this
|
|
|
- const layerList = this.mapLayerList
|
|
|
- const feature = []
|
|
|
- if (layerList != null && layerList.length > 0) {
|
|
|
- layerList.forEach((item) => {
|
|
|
- const layerMarker = item.layerMarker && JSON.parse(item.layerMarker)
|
|
|
- const layerVector = item.layerMarker && JSON.parse(item.layerVector)
|
|
|
- if (layerMarker && layerMarker.properties) {
|
|
|
- layerMarker.properties.layerId = item.layerId
|
|
|
- feature.push(layerMarker)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 初始化地图图层
|
|
|
+ initMapLayers() {
|
|
|
+ const layerList = this.mapLayerList
|
|
|
+ const feature = []
|
|
|
+ if (layerList != null && layerList.length > 0) {
|
|
|
+ layerList.forEach((item) => {
|
|
|
+ const layerMarker = item.layerMarker && JSON.parse(item.layerMarker)
|
|
|
+ const layerVector = item.layerMarker && JSON.parse(item.layerVector)
|
|
|
+ if (layerMarker && layerMarker.properties) {
|
|
|
+ layerMarker.properties.layerId = item.layerId
|
|
|
+ feature.push(layerMarker)
|
|
|
+ }
|
|
|
+ if (layerVector && layerVector.properties) {
|
|
|
+ layerVector.properties.layerId = item.layerId
|
|
|
+ feature.push(layerVector)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ L.geoJSON(feature, {
|
|
|
+ pointToLayer: function(_feature, latlng) {
|
|
|
+ const goafInfo = _feature.properties.goafInfo
|
|
|
+ const layerId = _feature.properties.layerId
|
|
|
+ var goafAlarmStatus = ''
|
|
|
+ let Volume = 0
|
|
|
+ if (goafInfo) {
|
|
|
+ Volume = (goafInfo.goafCanfillVolume - goafInfo.goafRemainVolume) / goafInfo.goafCanfillVolume
|
|
|
+ Volume = (Volume * 100).toFixed(2)
|
|
|
}
|
|
|
- if (layerVector && layerVector.properties) {
|
|
|
- layerVector.properties.layerId = item.layerId
|
|
|
- feature.push(layerVector)
|
|
|
+ // eslint-disable-next-line eqeqeq
|
|
|
+ if (_feature.properties.goafAlarmStatus == 1) {
|
|
|
+ goafAlarmStatus = 'ico-warning'
|
|
|
}
|
|
|
- })
|
|
|
- L.geoJSON(feature, {
|
|
|
- pointToLayer: function(_feature, latlng) {
|
|
|
- const goafInfo = _feature.properties.goafInfo
|
|
|
- const layerId= _feature.properties.layerId
|
|
|
- var goafAlarmStatus=""
|
|
|
- let Volume = 0
|
|
|
- if (goafInfo) {
|
|
|
- Volume = (goafInfo.goafCanfillVolume - goafInfo.goafRemainVolume) / goafInfo.goafCanfillVolume
|
|
|
- Volume = (Volume * 100).toFixed(2)
|
|
|
- }
|
|
|
- if(_feature.properties.goafAlarmStatus==1){
|
|
|
- goafAlarmStatus='ico-warning'
|
|
|
- }
|
|
|
- const goafOrebelt = _feature.properties.goafOrebelt
|
|
|
- const goafOrebody = _feature.properties.goafOrebody
|
|
|
- const goafOreheight = _feature.properties.goafOreheight
|
|
|
- const goafName = _feature.properties.goafName
|
|
|
+ const goafOrebelt = _feature.properties.goafOrebelt
|
|
|
+ const goafOrebody = _feature.properties.goafOrebody
|
|
|
+ const goafOreheight = _feature.properties.goafOreheight
|
|
|
+ const goafName = _feature.properties.goafName
|
|
|
|
|
|
- const goaf_icon_tag = `<div class="goaf-icon-tag" title="${NumConvertLM(goafOrebelt)}-${goafOrebody}-${goafOreheight}-${goafName}">${NumConvertLM(goafOrebelt)}-${goafOrebody}-${goafOreheight}-${goafName}</div>`
|
|
|
- const html = `<div data-layer="${layerId}" class="goaf-icon-box ${goafAlarmStatus}" style="width:100%;height:100%;position: relative;">${goaf_icon_tag}<div class="goaf-fill-v" style="height:${Volume}%;"></div></div>`
|
|
|
- var icon = L.divIcon({
|
|
|
- html,
|
|
|
- iconSize
|
|
|
- })
|
|
|
- return L.marker(latlng, { icon })
|
|
|
- },
|
|
|
- onEachFeature: (_feature, layer) => {
|
|
|
- this.layerGroup.addLayer(layer)
|
|
|
- // layer.on('click', (ev) => {
|
|
|
- // self.layer=ev
|
|
|
- // self.marker_tip_style=`left:${ev.containerPoint.x+24}px;top:${ev.containerPoint.y-20}px`
|
|
|
- // console.log({
|
|
|
- // layer:ev
|
|
|
- // })
|
|
|
- // })
|
|
|
- // layer.on('mouseover', (ev) => {
|
|
|
- // self.layer=ev
|
|
|
- // self.marker_tip_style=`left:${ev.containerPoint.x+30}px;top:${ev.containerPoint.y-10}px;display:block;`
|
|
|
- // console.log({
|
|
|
- // layer:ev
|
|
|
- // })
|
|
|
- // })
|
|
|
- // layer.on('mouseout', (ev) => {
|
|
|
- // self.layer=ev
|
|
|
- // self.marker_tip_style="left:-1000px;top:0;display:none;"
|
|
|
- // })
|
|
|
- }
|
|
|
- }).addTo(this.layerGroup)
|
|
|
- }
|
|
|
- },
|
|
|
- clearLayers() {
|
|
|
- if (this.layerGroup && this.layerGroup.clearLayers) {
|
|
|
- this.layerGroup.clearLayers()
|
|
|
- }
|
|
|
- },
|
|
|
- createGeoJson() {
|
|
|
- var layerArray = []
|
|
|
- this.map.eachLayer(function(layer) {
|
|
|
- if (layer.pm !== 'undefined' && layer.pm != null && layer.pm !== '') {
|
|
|
- if (layer.pm._enabled === false && layer.pm.options.draggable === true) {
|
|
|
- layerArray.push(layer)
|
|
|
- }
|
|
|
+ const goaf_icon_tag = `<div class="goaf-icon-tag" title="${NumConvertLM(goafOrebelt)}-${goafOrebody}-${goafOreheight}-${goafName}">${NumConvertLM(goafOrebelt)}-${goafOrebody}-${goafOreheight}-${goafName}</div>`
|
|
|
+ const html = `<div data-layer="${layerId}" class="goaf-icon-box ${goafAlarmStatus}" style="width:100%;height:100%;position: relative;">${goaf_icon_tag}<div class="goaf-fill-v" style="height:${Volume}%;"></div></div>`
|
|
|
+ var icon = L.divIcon({
|
|
|
+ html,
|
|
|
+ iconSize
|
|
|
+ })
|
|
|
+ return L.marker(latlng, { icon })
|
|
|
+ },
|
|
|
+ onEachFeature: (_feature, layer) => {
|
|
|
+ this.layerGroup.addLayer(layer)
|
|
|
+ // layer.on('click', (ev) => {
|
|
|
+ // self.layer=ev
|
|
|
+ // self.marker_tip_style=`left:${ev.containerPoint.x+24}px;top:${ev.containerPoint.y-20}px`
|
|
|
+ // console.log({
|
|
|
+ // layer:ev
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ // layer.on('mouseover', (ev) => {
|
|
|
+ // self.layer=ev
|
|
|
+ // self.marker_tip_style=`left:${ev.containerPoint.x+30}px;top:${ev.containerPoint.y-10}px;display:block;`
|
|
|
+ // console.log({
|
|
|
+ // layer:ev
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ // layer.on('mouseout', (ev) => {
|
|
|
+ // self.layer=ev
|
|
|
+ // self.marker_tip_style="left:-1000px;top:0;display:none;"
|
|
|
+ // })
|
|
|
}
|
|
|
- })
|
|
|
- var geojson = L.layerGroup(layerArray).toGeoJSON()
|
|
|
- for (var n = 0; n < geojson.features.length; n++) {
|
|
|
- var nowJson = JSON.stringify(geojson.features[n])
|
|
|
- for (var m = n + 1; m < geojson.features.length; m++) {
|
|
|
- var nextJson = JSON.stringify(geojson.features[m])
|
|
|
- if (nowJson === nextJson) {
|
|
|
- geojson.features.splice(n, 1)
|
|
|
- }
|
|
|
+ }).addTo(this.layerGroup)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clearLayers() {
|
|
|
+ if (this.layerGroup && this.layerGroup.clearLayers) {
|
|
|
+ this.layerGroup.clearLayers()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ createGeoJson() {
|
|
|
+ var layerArray = []
|
|
|
+ this.map.eachLayer(function(layer) {
|
|
|
+ if (layer.pm !== 'undefined' && layer.pm != null && layer.pm !== '') {
|
|
|
+ if (layer.pm._enabled === false && layer.pm.options.draggable === true) {
|
|
|
+ layerArray.push(layer)
|
|
|
}
|
|
|
}
|
|
|
- return geojson
|
|
|
- },
|
|
|
- updateLayerState(layerId=0,type=1){
|
|
|
- var marker = $(`.goaf-icon-box[data-layer='${layerId}']`);
|
|
|
- if(type===1){
|
|
|
- // 添加隐患预警
|
|
|
- marker.addClass("ico-warning " )
|
|
|
- }else if(type===3){
|
|
|
- //修改矿坑体积
|
|
|
- }else{
|
|
|
- marker.removeClass("ico-warning " )
|
|
|
+ })
|
|
|
+ var geojson = L.layerGroup(layerArray).toGeoJSON()
|
|
|
+ for (var n = 0; n < geojson.features.length; n++) {
|
|
|
+ var nowJson = JSON.stringify(geojson.features[n])
|
|
|
+ for (var m = n + 1; m < geojson.features.length; m++) {
|
|
|
+ var nextJson = JSON.stringify(geojson.features[m])
|
|
|
+ if (nowJson === nextJson) {
|
|
|
+ geojson.features.splice(n, 1)
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- },
|
|
|
- unique(arr = [], name = 'name') {
|
|
|
- const res = new Map()
|
|
|
- return arr.filter((item) => !res.has(item[name]) && res.set(item[name], 1))
|
|
|
- },
|
|
|
- deeepClone(params) {
|
|
|
- return JSON.parse(JSON.stringify(params))
|
|
|
}
|
|
|
+ return geojson
|
|
|
+ },
|
|
|
+ updateLayerState(layerId = 0, type = 1) {
|
|
|
+ // eslint-disable-next-line no-undef
|
|
|
+ var marker = $(`.goaf-icon-box[data-layer='${layerId}']`)
|
|
|
+ if (type === 1) {
|
|
|
+ // 添加隐患预警
|
|
|
+ marker.addClass('ico-warning ')
|
|
|
+ } else if (type === 3) {
|
|
|
+ // 修改矿坑体积
|
|
|
+ } else {
|
|
|
+ marker.removeClass('ico-warning ')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ unique(arr = [], name = 'name') {
|
|
|
+ const res = new Map()
|
|
|
+ return arr.filter((item) => !res.has(item[name]) && res.set(item[name], 1))
|
|
|
+ },
|
|
|
+ deeepClone(params) {
|
|
|
+ return JSON.parse(JSON.stringify(params))
|
|
|
}
|
|
|
}
|
|
|
- </script>
|
|
|
+}
|
|
|
+</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.map-container{
|
|
|
nav{
|
|
|
@@ -344,10 +344,10 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
}
|
|
|
</style>
|
|
|
-
|
|
|
+
|
|
|
<style lang="scss">
|
|
|
.goaf-fill-v{
|
|
|
width:100%;
|
|
|
@@ -364,9 +364,9 @@
|
|
|
width: 100%;
|
|
|
display: inline-block;
|
|
|
background: linear-gradient(90deg, #21649c 0.21%, #060F1E 100%);
|
|
|
- overflow:hidden;
|
|
|
- text-overflow:ellipsis;
|
|
|
- white-space:nowrap;
|
|
|
+ overflow:hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space:nowrap;
|
|
|
color: #fff;
|
|
|
text-align: center;
|
|
|
z-index: 99999;
|
|
|
@@ -398,4 +398,4 @@
|
|
|
50% {opacity: 0.5;}
|
|
|
100% {opacity: 0;}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
