|
@@ -1,12 +1,12 @@
|
|
|
<template>
|
|
|
<div v-bind:id="mapDivId" ref="map" style="width: 100%; height: 100%;background: none;">
|
|
|
- <transition-group
|
|
|
- appear
|
|
|
- name="animate__animated animate__bounce"
|
|
|
- enter-active-class="animate__backInLeft"
|
|
|
- leave-active-class="animate__backOutLeft"
|
|
|
- >
|
|
|
- <div id="toolbar" v-if="isdynamicPlotting" class="panel panel-primary" v-show="mapToolShowBH" key="mapFlash"
|
|
|
+ <transition-group
|
|
|
+ appear
|
|
|
+ name="animate__animated animate__bounce"
|
|
|
+ enter-active-class="animate__backInLeft"
|
|
|
+ leave-active-class="animate__backOutLeft"
|
|
|
+ >
|
|
|
+ <div id="toolbar" v-if="isdynamicPlotting" class="panel panel-primary" v-show="mapToolShowBH" key="mapFlash"
|
|
|
style="position:absolute;z-index: 9999;top:4rem;left: 1rem; border-radius: 4px; width: fit-content;height:635px;overflow-y:scroll;background:#040b1f">
|
|
|
<div class="panel-heading" id="panelheading">
|
|
|
<h5 style=" color: #2bacf7;font-size: 1rem;padding:.5rem;">鼠标标绘</h5>
|
|
@@ -317,7 +317,6 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
props: {
|
|
|
- mapToolShowBH:false,
|
|
|
mapDiv: null,
|
|
|
codes: null,
|
|
|
mapSite: {},
|
|
@@ -325,7 +324,8 @@ export default {
|
|
|
isSideBySide: false,
|
|
|
showLatLng: null,
|
|
|
showAreaLatLng: null,
|
|
|
- showLineLatLng: null
|
|
|
+ showLineLatLng: null,
|
|
|
+ mapToolShowBH:false,
|
|
|
},
|
|
|
methods: {
|
|
|
/** ----------------------------------火势蔓延 开始------------------------------------- */
|
|
@@ -716,12 +716,11 @@ export default {
|
|
|
spiderfyOnMaxZoom: true
|
|
|
})
|
|
|
if (!isSideBySide) { //只有一个地图
|
|
|
- if (this.codes.length != 1) {
|
|
|
+ if (_that.codes.length != 1) {
|
|
|
modal.msgError('请输入一个地图code!')
|
|
|
return
|
|
|
}
|
|
|
- getSuperMap(this.codes).then(resp => {
|
|
|
-
|
|
|
+ getSuperMap(_that.codes).then(resp => {
|
|
|
let mapList = resp.data
|
|
|
if (mapList != null && mapList.length > 0) {
|
|
|
let url = mapList[0].url
|
|
@@ -752,10 +751,10 @@ export default {
|
|
|
logoControl: logoControl
|
|
|
}
|
|
|
let loadConfiguration = Object.assign(defaultConfigure, mapSite)
|
|
|
- this.map = window.L.map(this.mapDiv, loadConfiguration)
|
|
|
+ _that.map = window.L.map(_that.mapDiv, loadConfiguration)
|
|
|
|
|
|
//鼠标双击落点
|
|
|
- if (this.showLatLng != undefined) {
|
|
|
+ if (_that.showLatLng != undefined) {
|
|
|
let icon = new window.L.Icon({
|
|
|
iconUrl: iconList['marker'],
|
|
|
iconSize: [48, 48],
|
|
@@ -764,21 +763,21 @@ export default {
|
|
|
shadowSize: [41, 41]
|
|
|
})
|
|
|
|
|
|
- this.map.on('dblclick', function(e) {
|
|
|
+ _that.map.on('dblclick', function(e) {
|
|
|
_that.clearP()
|
|
|
_that.showLatLng(e.latlng.lat, e.latlng.lng)
|
|
|
let marker = window.L.marker([e.latlng.lat, e.latlng.lng], {
|
|
|
icon: icon
|
|
|
- }).addTo(this.map)
|
|
|
+ }).addTo(_that.map)
|
|
|
_that.latLngLayers.push(marker)
|
|
|
_that.latLngGroup = window.L.layerGroup(_that.latLngLayers)
|
|
|
- this.map.addLayer(_that.latLngGroup)
|
|
|
+ _that.map.addLayer(_that.latLngGroup)
|
|
|
})
|
|
|
}
|
|
|
//鼠标绘制区域
|
|
|
- if (this.showAreaLatLng != undefined) {
|
|
|
+ if (_that.showAreaLatLng != undefined) {
|
|
|
var editableLayers = new window.L.FeatureGroup()
|
|
|
- this.map.addLayer(editableLayers)
|
|
|
+ _that.map.addLayer(editableLayers)
|
|
|
let options = {
|
|
|
position: 'topleft',
|
|
|
draw: {
|
|
@@ -796,8 +795,8 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
var drawControl = new window.L.Control.Draw(options)
|
|
|
- this.map.addControl(drawControl)
|
|
|
- this.map.on(window.L.Draw.Event.CREATED, function(e) {
|
|
|
+ _that.map.addControl(drawControl)
|
|
|
+ _that.map.on(window.L.Draw.Event.CREATED, function(e) {
|
|
|
let editableLayer = e.layer
|
|
|
let layerType = e.layerType
|
|
|
editableLayer.on('dblclick', function(e) {
|
|
@@ -811,9 +810,9 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
//鼠标绘制线段
|
|
|
- if (this.showLineLatLng != undefined) {
|
|
|
+ if (_that.showLineLatLng != undefined) {
|
|
|
var editableLayers = new window.L.FeatureGroup()
|
|
|
- this.map.addLayer(editableLayers)
|
|
|
+ _that.map.addLayer(editableLayers)
|
|
|
let options = {
|
|
|
position: 'topleft',
|
|
|
draw: {
|
|
@@ -831,8 +830,8 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
var drawControl = new window.L.Control.Draw(options)
|
|
|
- this.map.addControl(drawControl)
|
|
|
- this.map.on(window.L.Draw.Event.CREATED, function(e) {
|
|
|
+ _that.map.addControl(drawControl)
|
|
|
+ _that.map.on(window.L.Draw.Event.CREATED, function(e) {
|
|
|
let editableLayer = e.layer
|
|
|
let layerType = e.layerType
|
|
|
editableLayer.on('dblclick', function(e) {
|
|
@@ -846,15 +845,15 @@ export default {
|
|
|
}
|
|
|
// url = 'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China_4326'
|
|
|
|
|
|
- window.L.supermap.tiledMapLayer(url).addTo(this.map)
|
|
|
+ window.L.supermap.tiledMapLayer(url).addTo(_that.map)
|
|
|
}
|
|
|
})
|
|
|
} else { //卷帘地图
|
|
|
- if (this.codes.length != 2) {
|
|
|
+ if (_that.codes.length != 2) {
|
|
|
modal.msgError('请输入两个地图code!')
|
|
|
return
|
|
|
}
|
|
|
- getSuperMap(this.codes).then(resp => {
|
|
|
+ getSuperMap(_that.codes).then(resp => {
|
|
|
let mapList = resp.data
|
|
|
if (mapList != null && mapList.length == 2) {
|
|
|
let stamenurl = mapList[0].url
|
|
@@ -887,9 +886,9 @@ export default {
|
|
|
}
|
|
|
|
|
|
let loadConfiguration = Object.assign(defaultConfigure, mapSite)
|
|
|
- this.map = window.L.map(this.mapDiv, loadConfiguration)
|
|
|
+ _that.map = window.L.map(_that.mapDiv, loadConfiguration)
|
|
|
//鼠标双击落点
|
|
|
- if (this.showLatLng != undefined) {
|
|
|
+ if (_that.showLatLng != undefined) {
|
|
|
let icon = new window.L.Icon({
|
|
|
iconUrl: iconList['marker'],
|
|
|
iconSize: [48, 48],
|
|
@@ -898,21 +897,21 @@ export default {
|
|
|
shadowSize: [41, 41]
|
|
|
})
|
|
|
|
|
|
- this.map.on('dblclick', function(e) {
|
|
|
+ _that.map.on('dblclick', function(e) {
|
|
|
_that.clearP()
|
|
|
_that.showLatLng(e.latlng.lat, e.latlng.lng)
|
|
|
let marker = window.L.marker([e.latlng.lat, e.latlng.lng], {
|
|
|
icon: icon
|
|
|
- }).addTo(this.map)
|
|
|
+ }).addTo(_that.map)
|
|
|
_that.latLngLayers.push(marker)
|
|
|
_that.latLngGroup = window.L.layerGroup(_that.latLngLayers)
|
|
|
- this.map.addLayer(_that.latLngGroup)
|
|
|
+ _that.map.addLayer(_that.latLngGroup)
|
|
|
})
|
|
|
}
|
|
|
//鼠标绘制区域
|
|
|
- if (this.showAreaLatLng != undefined) {
|
|
|
+ if (_that.showAreaLatLng != undefined) {
|
|
|
var editableLayers = new window.L.FeatureGroup()
|
|
|
- this.map.addLayer(editableLayers)
|
|
|
+ _that.map.addLayer(editableLayers)
|
|
|
let options = {
|
|
|
position: 'topleft',
|
|
|
draw: {
|
|
@@ -930,8 +929,8 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
var drawControl = new window.L.Control.Draw(options)
|
|
|
- this.map.addControl(drawControl)
|
|
|
- this.map.on(window.L.Draw.Event.CREATED, function(e) {
|
|
|
+ _that.map.addControl(drawControl)
|
|
|
+ _that.map.on(window.L.Draw.Event.CREATED, function(e) {
|
|
|
let editableLayer = e.layer
|
|
|
let layerType = e.layerType
|
|
|
editableLayer.on('dblclick', function(e) {
|
|
@@ -945,9 +944,9 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
//鼠标绘制线段
|
|
|
- if (this.showLineLatLng != undefined) {
|
|
|
+ if (_that.showLineLatLng != undefined) {
|
|
|
var editableLayers = new window.L.FeatureGroup()
|
|
|
- this.map.addLayer(editableLayers)
|
|
|
+ _that.map.addLayer(editableLayers)
|
|
|
let options = {
|
|
|
position: 'topleft',
|
|
|
draw: {
|
|
@@ -965,8 +964,8 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
var drawControl = new window.L.Control.Draw(options)
|
|
|
- this.map.addControl(drawControl)
|
|
|
- this.map.on(window.L.Draw.Event.CREATED, function(e) {
|
|
|
+ _that.map.addControl(drawControl)
|
|
|
+ _that.map.on(window.L.Draw.Event.CREATED, function(e) {
|
|
|
let editableLayer = e.layer
|
|
|
let layerType = e.layerType
|
|
|
editableLayer.on('dblclick', function(e) {
|
|
@@ -979,9 +978,9 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
|
|
|
- let stamenLayer = window.L.supermap.tiledMapLayer(stamenurl).addTo(this.map)
|
|
|
- let osmLayer = window.L.supermap.tiledMapLayer(osmurl).addTo(this.map)
|
|
|
- L.control.sideBySide(stamenLayer, osmLayer).addTo(this.map)
|
|
|
+ let stamenLayer = window.L.supermap.tiledMapLayer(stamenurl).addTo(_that.map)
|
|
|
+ let osmLayer = window.L.supermap.tiledMapLayer(osmurl).addTo(_that.map)
|
|
|
+ L.control.sideBySide(stamenLayer, osmLayer).addTo(_that.map)
|
|
|
}
|
|
|
})
|
|
|
}
|