|
@@ -6,23 +6,23 @@
|
|
|
import 'leaflet-side-by-side'
|
|
|
import '@supermap/iclient-leaflet'
|
|
|
import 'leaflet/dist/leaflet.css'
|
|
|
- import 'leaflet.markercluster/dist/leaflet.markercluster-src.js';
|
|
|
- import 'leaflet.markercluster/dist/MarkerCluster.css';
|
|
|
- import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
|
|
|
- import 'leaflet-draw';
|
|
|
+ import 'leaflet.markercluster/dist/leaflet.markercluster-src.js'
|
|
|
+ import 'leaflet.markercluster/dist/MarkerCluster.css'
|
|
|
+ import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
|
|
|
+ import 'leaflet-draw'
|
|
|
import 'leaflet-draw/dist/leaflet.draw.css'
|
|
|
|
|
|
import L from 'leaflet'
|
|
|
|
|
|
- import {getSuperMap, iconList} from '@/api/components/supermap.js'
|
|
|
+ import { getSuperMap, iconList } from '@/api/components/supermap.js'
|
|
|
// import {setToken} from '../plugins/auth'
|
|
|
import modal from '@/plugins/modal'
|
|
|
|
|
|
export default {
|
|
|
- name: "sookaSuperMap",
|
|
|
+ name: 'sookaSuperMap',
|
|
|
data() {
|
|
|
return {
|
|
|
- mapDivId: "",
|
|
|
+ mapDivId: '',
|
|
|
map: null,
|
|
|
layers: [],
|
|
|
isAggregationLayers: [],
|
|
@@ -36,15 +36,15 @@
|
|
|
latLngGroup: [],
|
|
|
isEditableLayers: false,//绘图控件
|
|
|
drawControl: null,//绘图控件
|
|
|
- deckglLayer : null,//图层Layer
|
|
|
+ deckglLayer: null//图层Layer
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
isEditableLayers: {
|
|
|
- handler (newValue, oldValue) {
|
|
|
+ handler(newValue, oldValue) {
|
|
|
if (newValue) {
|
|
|
- var editableLayers = new window.L.FeatureGroup();
|
|
|
- this.map.addLayer(editableLayers);
|
|
|
+ var editableLayers = new window.L.FeatureGroup()
|
|
|
+ this.map.addLayer(editableLayers)
|
|
|
let options = {
|
|
|
position: 'topleft',
|
|
|
draw: {
|
|
@@ -59,52 +59,52 @@
|
|
|
featureGroup: editableLayers,
|
|
|
remove: true
|
|
|
}
|
|
|
- };
|
|
|
- this.drawControl = new window.L.Control.Draw(options);
|
|
|
- this.map.addControl(this.drawControl);
|
|
|
- this.map.on(window.L.Draw.Event.CREATED, function (e) {
|
|
|
- let editableLayer = e.layer;
|
|
|
- let layerType = e.layerType;
|
|
|
- editableLayer.on('dblclick', function (e) {
|
|
|
- if (layerType === "polygon"||layerType === "rectangle") {
|
|
|
- let latlng = editableLayer.getLatLngs()[0];
|
|
|
+ }
|
|
|
+ this.drawControl = new window.L.Control.Draw(options)
|
|
|
+ this.map.addControl(this.drawControl)
|
|
|
+ this.map.on(window.L.Draw.Event.CREATED, function(e) {
|
|
|
+ let editableLayer = e.layer
|
|
|
+ let layerType = e.layerType
|
|
|
+ editableLayer.on('dblclick', function(e) {
|
|
|
+ if (layerType === 'polygon' || layerType === 'rectangle') {
|
|
|
+ let latlng = editableLayer.getLatLngs()[0]
|
|
|
//一个自定义的计算面积的函数
|
|
|
- var seeArea = window.L.GeometryUtil.geodesicArea(latlng);
|
|
|
- let area = (seeArea / 10e5).toFixed(2) + "k㎡";
|
|
|
- modal.msg(area);
|
|
|
- } else if (layerType === "polyline") {
|
|
|
- let latlng = editableLayer.getLatLngs();
|
|
|
+ var seeArea = window.L.GeometryUtil.geodesicArea(latlng)
|
|
|
+ let area = (seeArea / 10e5).toFixed(2) + 'k㎡'
|
|
|
+ modal.msg(area)
|
|
|
+ } else if (layerType === 'polyline') {
|
|
|
+ let latlng = editableLayer.getLatLngs()
|
|
|
//一个自定义的计算长度的函数
|
|
|
- let dis = 0;
|
|
|
+ let dis = 0
|
|
|
for (let i = 0; i < latlng.length - 1; i++) {
|
|
|
- let start = latlng[i];
|
|
|
- let end = latlng[i + 1];
|
|
|
- dis += window.L.latLng([start.lat, start.lng]).distanceTo([end.lat, end.lng]);//计算两个点之间的距离,并累加
|
|
|
+ let start = latlng[i]
|
|
|
+ let end = latlng[i + 1]
|
|
|
+ dis += window.L.latLng([start.lat, start.lng]).distanceTo([end.lat, end.lng])//计算两个点之间的距离,并累加
|
|
|
}
|
|
|
//结果得到的也是number类型,单位是KM
|
|
|
- modal.msg((dis / 10e2).toFixed(2) + "km");
|
|
|
+ modal.msg((dis / 10e2).toFixed(2) + 'km')
|
|
|
}
|
|
|
})
|
|
|
- if(layerType === "marker"){
|
|
|
+ if (layerType === 'marker') {
|
|
|
let icon = new window.L.Icon({
|
|
|
iconUrl: iconList['marker'],
|
|
|
iconSize: [48, 48],
|
|
|
iconAnchor: [24, 40],
|
|
|
popupAnchor: [-3, -40],
|
|
|
- shadowSize: [41, 41],
|
|
|
+ shadowSize: [41, 41]
|
|
|
})
|
|
|
- editableLayer.options.icon=icon;
|
|
|
+ editableLayer.options.icon = icon
|
|
|
}
|
|
|
- editableLayers.addLayer(editableLayer);
|
|
|
- });
|
|
|
- }else{
|
|
|
- this.map.removeControl(this.drawControl);
|
|
|
+ editableLayers.addLayer(editableLayer)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.map.removeControl(this.drawControl)
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.initMap();
|
|
|
+ this.initMap()
|
|
|
//添加画图的提示信息
|
|
|
window.L.drawLocal.draw.toolbar = {
|
|
|
actions: {
|
|
@@ -216,17 +216,17 @@
|
|
|
isSideBySide: null,
|
|
|
showLatLng: null,
|
|
|
showAreaLatLng: null,
|
|
|
- showLineLatLng: null,
|
|
|
+ showLineLatLng: null
|
|
|
},
|
|
|
methods: {
|
|
|
- clearM: async function (isAggregation) {//清理地图标点
|
|
|
+ clearM: async function(isAggregation) {//清理地图标点
|
|
|
if (isAggregation) {
|
|
|
if (this.isAggregationMyGroup != undefined && this.isAggregationMyGroup != false) {
|
|
|
this.isAggregationMyGroup.clearLayers()
|
|
|
}
|
|
|
- this.map.removeLayer(this.isAggregationLayers);
|
|
|
- this.isAggregationLayers = [];
|
|
|
- this.radiusLayers = [];
|
|
|
+ this.map.removeLayer(this.isAggregationLayers)
|
|
|
+ this.isAggregationLayers = []
|
|
|
+ this.radiusLayers = []
|
|
|
this.isAggregationLayers = window.L.markerClusterGroup({
|
|
|
//设置为true时显示聚类所占据的范围
|
|
|
showCoverageOnHover: true,
|
|
@@ -235,8 +235,8 @@
|
|
|
//增加点位时增加聚合动画(否则会出问题)
|
|
|
animateAddingMarkers: true,
|
|
|
//最大缩放级别点击聚合图标展开图标
|
|
|
- spiderfyOnMaxZoom:true,
|
|
|
- });
|
|
|
+ spiderfyOnMaxZoom: true
|
|
|
+ })
|
|
|
|
|
|
} else {
|
|
|
if (this.myGroup != undefined && this.myGroup != false) {
|
|
@@ -246,27 +246,29 @@
|
|
|
}
|
|
|
|
|
|
},
|
|
|
- clearC: async function () {//清理地图画线
|
|
|
+ clearC: async function() {//清理地图画线
|
|
|
if (this.connectLayer != undefined && this.connectLayer != false) {
|
|
|
- this.connectLayer.clearLayers();
|
|
|
+ this.connectLayer.clearLayers()
|
|
|
}
|
|
|
+ this.connectLayer = []
|
|
|
},
|
|
|
- clearG: async function () {//清理地图图形
|
|
|
+ clearG: async function() {//清理地图图形
|
|
|
if (this.graphicsLayer != undefined && this.graphicsLayer != false) {
|
|
|
- this.graphicsLayer.clearLayers();
|
|
|
+ this.graphicsLayer.clearLayers()
|
|
|
}
|
|
|
+ this.graphicsLayer = []
|
|
|
},
|
|
|
- clearP: async function () {//清理点击事件落点
|
|
|
+ clearP: async function() {//清理点击事件落点
|
|
|
if (this.latLngGroup != undefined && this.latLngGroup != false) {
|
|
|
this.latLngGroup.clearLayers()
|
|
|
}
|
|
|
this.latLngLayers = []
|
|
|
},
|
|
|
- initMap: function () {
|
|
|
- let _that = this;
|
|
|
- this.mapDivId = this.mapDiv;
|
|
|
- let mapSite = this.mapSite;
|
|
|
- let isSideBySide = this.isSideBySide;
|
|
|
+ initMap: function() {
|
|
|
+ let _that = this
|
|
|
+ this.mapDivId = this.mapDiv
|
|
|
+ let mapSite = this.mapSite
|
|
|
+ let isSideBySide = this.isSideBySide
|
|
|
// setToken("eyJhbGciOiJIUzUxMiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VyX2tleSI6ImY5Zjg3ZjVmLWQ4NTctNDQxZC04NmQ5LTg4OWExZWRlODE4ZSIsInVzZXJuYW1lIjoiYWRtaW4ifQ.26mAzmaM9pUza9585aLnRMyRd4GxvrWbCxN0erYsuiBDYQiYnyc-TwXVNDI7Xrpt3Bqmbnul-XMszOxYQi12LA");
|
|
|
_that.isAggregationLayers = window.L.markerClusterGroup({
|
|
|
//设置为true时显示聚类所占据的范围
|
|
@@ -276,26 +278,26 @@
|
|
|
//增加点位时增加聚合动画(否则会出问题)
|
|
|
animateAddingMarkers: true,
|
|
|
//最大缩放级别点击聚合图标展开图标
|
|
|
- spiderfyOnMaxZoom:true,
|
|
|
- });
|
|
|
+ spiderfyOnMaxZoom: true
|
|
|
+ })
|
|
|
if (!isSideBySide) { //只有一个地图
|
|
|
if (this.codes.length != 1) {
|
|
|
- modal.msgError("请输入一个地图code!");
|
|
|
+ modal.msgError('请输入一个地图code!')
|
|
|
return
|
|
|
}
|
|
|
getSuperMap(this.codes).then(resp => {
|
|
|
- let mapList = resp.data;
|
|
|
+ let mapList = resp.data
|
|
|
if (mapList != null && mapList.length > 0) {
|
|
|
- let url = mapList[0].url;
|
|
|
- let centerLat = mapList[0].centerLat;
|
|
|
- let centerLng = mapList[0].centerLng;
|
|
|
- let zoom = mapList[0].zoom; //默认比例
|
|
|
- let maxZoom = mapList[0].maxZoom; //最大比例
|
|
|
- let minZoom = mapList[0].minZoom; //最小比例
|
|
|
- let zoomControl = mapList[0].zoomControl == null ? true : mapList[0].zoomControl; //地图缩放+-号是否显示
|
|
|
- let attributionControl = mapList[0].attributionControl == null ? true : mapList[0].attributionControl; //logo是否显示
|
|
|
- let logoControl = mapList[0].logoControl == null ? false : mapList[0].logoControl; //logo是否显示
|
|
|
- let dragging = mapList[0].dragging == null ? true : mapList[0].dragging; //地图是否允许鼠标拖拽
|
|
|
+ let url = mapList[0].url
|
|
|
+ let centerLat = mapList[0].centerLat
|
|
|
+ let centerLng = mapList[0].centerLng
|
|
|
+ let zoom = mapList[0].zoom //默认比例
|
|
|
+ let maxZoom = mapList[0].maxZoom //最大比例
|
|
|
+ let minZoom = mapList[0].minZoom //最小比例
|
|
|
+ let zoomControl = mapList[0].zoomControl == null ? true : mapList[0].zoomControl //地图缩放+-号是否显示
|
|
|
+ let attributionControl = mapList[0].attributionControl == null ? true : mapList[0].attributionControl //logo是否显示
|
|
|
+ let logoControl = mapList[0].logoControl == null ? false : mapList[0].logoControl //logo是否显示
|
|
|
+ let dragging = mapList[0].dragging == null ? true : mapList[0].dragging //地图是否允许鼠标拖拽
|
|
|
|
|
|
let defaultConfigure = {
|
|
|
crs: window.L.CRS.EPSG4326,
|
|
@@ -308,9 +310,9 @@
|
|
|
attributionControl: attributionControl,
|
|
|
dragging: dragging,
|
|
|
logoControl: logoControl
|
|
|
- };
|
|
|
- let loadConfiguration = Object.assign(defaultConfigure, mapSite);
|
|
|
- this.map = window.L.map(this.mapDiv, loadConfiguration);
|
|
|
+ }
|
|
|
+ let loadConfiguration = Object.assign(defaultConfigure, mapSite)
|
|
|
+ this.map = window.L.map(this.mapDiv, loadConfiguration)
|
|
|
//鼠标双击落点
|
|
|
if (this.showLatLng != undefined) {
|
|
|
let icon = new window.L.Icon({
|
|
@@ -318,15 +320,15 @@
|
|
|
iconSize: [48, 48],
|
|
|
iconAnchor: [24, 40],
|
|
|
popupAnchor: [-3, -40],
|
|
|
- shadowSize: [41, 41],
|
|
|
+ shadowSize: [41, 41]
|
|
|
})
|
|
|
|
|
|
- this.map.on('dblclick', function (e) {
|
|
|
- _that.clearP();
|
|
|
- _that.showLatLng(e.latlng.lat, e.latlng.lng);
|
|
|
+ this.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(this.map)
|
|
|
_that.latLngLayers.push(marker)
|
|
|
_that.latLngGroup = window.L.layerGroup(_that.latLngLayers)
|
|
|
this.map.addLayer(_that.latLngGroup)
|
|
@@ -334,8 +336,8 @@
|
|
|
}
|
|
|
//鼠标绘制区域
|
|
|
if (this.showAreaLatLng != undefined) {
|
|
|
- var editableLayers = new window.L.FeatureGroup();
|
|
|
- this.map.addLayer(editableLayers);
|
|
|
+ var editableLayers = new window.L.FeatureGroup()
|
|
|
+ this.map.addLayer(editableLayers)
|
|
|
let options = {
|
|
|
position: 'topleft',
|
|
|
draw: {
|
|
@@ -351,25 +353,25 @@
|
|
|
featureGroup: editableLayers,
|
|
|
remove: true
|
|
|
}
|
|
|
- };
|
|
|
- var drawControl = new window.L.Control.Draw(options);
|
|
|
- this.map.addControl(drawControl);
|
|
|
- this.map.on(window.L.Draw.Event.CREATED, function (e) {
|
|
|
- let editableLayer = e.layer;
|
|
|
- let layerType = e.layerType;
|
|
|
- editableLayer.on('dblclick', function (e) {
|
|
|
- if (layerType === "polygon"||layerType === "rectangle") {
|
|
|
- let latlng = editableLayer.getLatLngs()[0];
|
|
|
+ }
|
|
|
+ var drawControl = new window.L.Control.Draw(options)
|
|
|
+ this.map.addControl(drawControl)
|
|
|
+ this.map.on(window.L.Draw.Event.CREATED, function(e) {
|
|
|
+ let editableLayer = e.layer
|
|
|
+ let layerType = e.layerType
|
|
|
+ editableLayer.on('dblclick', function(e) {
|
|
|
+ if (layerType === 'polygon' || layerType === 'rectangle') {
|
|
|
+ let latlng = editableLayer.getLatLngs()[0]
|
|
|
_that.showAreaLatLng(latlng)
|
|
|
}
|
|
|
})
|
|
|
- editableLayers.addLayer(editableLayer);
|
|
|
- });
|
|
|
+ editableLayers.addLayer(editableLayer)
|
|
|
+ })
|
|
|
}
|
|
|
//鼠标绘制线段
|
|
|
if (this.showLineLatLng != undefined) {
|
|
|
- var editableLayers = new window.L.FeatureGroup();
|
|
|
- this.map.addLayer(editableLayers);
|
|
|
+ var editableLayers = new window.L.FeatureGroup()
|
|
|
+ this.map.addLayer(editableLayers)
|
|
|
let options = {
|
|
|
position: 'topleft',
|
|
|
draw: {
|
|
@@ -385,43 +387,43 @@
|
|
|
featureGroup: editableLayers,
|
|
|
remove: true
|
|
|
}
|
|
|
- };
|
|
|
- var drawControl = new window.L.Control.Draw(options);
|
|
|
- this.map.addControl(drawControl);
|
|
|
- this.map.on(window.L.Draw.Event.CREATED, function (e) {
|
|
|
- let editableLayer = e.layer;
|
|
|
- let layerType = e.layerType;
|
|
|
- editableLayer.on('dblclick', function (e) {
|
|
|
- if (layerType === "polyline") {
|
|
|
- let latlng = editableLayer.getLatLngs();
|
|
|
+ }
|
|
|
+ var drawControl = new window.L.Control.Draw(options)
|
|
|
+ this.map.addControl(drawControl)
|
|
|
+ this.map.on(window.L.Draw.Event.CREATED, function(e) {
|
|
|
+ let editableLayer = e.layer
|
|
|
+ let layerType = e.layerType
|
|
|
+ editableLayer.on('dblclick', function(e) {
|
|
|
+ if (layerType === 'polyline') {
|
|
|
+ let latlng = editableLayer.getLatLngs()
|
|
|
_that.showLineLatLng(latlng)
|
|
|
}
|
|
|
})
|
|
|
- editableLayers.addLayer(editableLayer);
|
|
|
- });
|
|
|
+ editableLayers.addLayer(editableLayer)
|
|
|
+ })
|
|
|
}
|
|
|
- window.L.supermap.tiledMapLayer(url).addTo(this.map);
|
|
|
+ window.L.supermap.tiledMapLayer(url).addTo(this.map)
|
|
|
}
|
|
|
})
|
|
|
} else { //卷帘地图
|
|
|
if (this.codes.length != 2) {
|
|
|
- modal.msgError("请输入两个地图code!");
|
|
|
+ modal.msgError('请输入两个地图code!')
|
|
|
return
|
|
|
}
|
|
|
getSuperMap(this.codes).then(resp => {
|
|
|
- let mapList = resp.data;
|
|
|
+ let mapList = resp.data
|
|
|
if (mapList != null && mapList.length == 2) {
|
|
|
- let stamenurl = mapList[0].url;
|
|
|
- let osmurl = mapList[1].url;
|
|
|
- let centerLat = mapList[0].centerLat;
|
|
|
- let centerLng = mapList[0].centerLng;
|
|
|
- let zoom = mapList[0].zoom; //默认比例
|
|
|
- let maxZoom = mapList[0].maxZoom; //最大比例
|
|
|
- let minZoom = mapList[0].minZoom; //最小比例
|
|
|
- let zoomControl = mapList[0].zoomControl == null ? true : mapList[0].zoomControl; //地图缩放+-号是否显示
|
|
|
- let attributionControl = mapList[0].attributionControl == null ? true : mapList[0].attributionControl; //logo是否显示
|
|
|
- let logoControl = mapList[0].logoControl == null ? false : mapList[0].logoControl; //logo是否显示
|
|
|
- let dragging = mapList[0].dragging == null ? true : mapList[0].dragging; //地图是否允许鼠标拖拽
|
|
|
+ let stamenurl = mapList[0].url
|
|
|
+ let osmurl = mapList[1].url
|
|
|
+ let centerLat = mapList[0].centerLat
|
|
|
+ let centerLng = mapList[0].centerLng
|
|
|
+ let zoom = mapList[0].zoom //默认比例
|
|
|
+ let maxZoom = mapList[0].maxZoom //最大比例
|
|
|
+ let minZoom = mapList[0].minZoom //最小比例
|
|
|
+ let zoomControl = mapList[0].zoomControl == null ? true : mapList[0].zoomControl //地图缩放+-号是否显示
|
|
|
+ let attributionControl = mapList[0].attributionControl == null ? true : mapList[0].attributionControl //logo是否显示
|
|
|
+ let logoControl = mapList[0].logoControl == null ? false : mapList[0].logoControl //logo是否显示
|
|
|
+ let dragging = mapList[0].dragging == null ? true : mapList[0].dragging //地图是否允许鼠标拖拽
|
|
|
|
|
|
let defaultConfigure = {
|
|
|
crs: window.L.CRS.EPSG4326,
|
|
@@ -434,10 +436,10 @@
|
|
|
attributionControl: attributionControl,
|
|
|
dragging: dragging,
|
|
|
logoControl: logoControl
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
- let loadConfiguration = Object.assign(defaultConfigure, mapSite);
|
|
|
- this.map = window.L.map(this.mapDiv, loadConfiguration);
|
|
|
+ let loadConfiguration = Object.assign(defaultConfigure, mapSite)
|
|
|
+ this.map = window.L.map(this.mapDiv, loadConfiguration)
|
|
|
//鼠标双击落点
|
|
|
if (this.showLatLng != undefined) {
|
|
|
let icon = new window.L.Icon({
|
|
@@ -445,15 +447,15 @@
|
|
|
iconSize: [48, 48],
|
|
|
iconAnchor: [24, 40],
|
|
|
popupAnchor: [-3, -40],
|
|
|
- shadowSize: [41, 41],
|
|
|
+ shadowSize: [41, 41]
|
|
|
})
|
|
|
|
|
|
- this.map.on('dblclick', function (e) {
|
|
|
- _that.clearP();
|
|
|
- _that.showLatLng(e.latlng.lat, e.latlng.lng);
|
|
|
+ this.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(this.map)
|
|
|
_that.latLngLayers.push(marker)
|
|
|
_that.latLngGroup = window.L.layerGroup(_that.latLngLayers)
|
|
|
this.map.addLayer(_that.latLngGroup)
|
|
@@ -461,8 +463,8 @@
|
|
|
}
|
|
|
//鼠标绘制区域
|
|
|
if (this.showAreaLatLng != undefined) {
|
|
|
- var editableLayers = new window.L.FeatureGroup();
|
|
|
- this.map.addLayer(editableLayers);
|
|
|
+ var editableLayers = new window.L.FeatureGroup()
|
|
|
+ this.map.addLayer(editableLayers)
|
|
|
let options = {
|
|
|
position: 'topleft',
|
|
|
draw: {
|
|
@@ -478,25 +480,25 @@
|
|
|
featureGroup: editableLayers,
|
|
|
remove: true
|
|
|
}
|
|
|
- };
|
|
|
- var drawControl = new window.L.Control.Draw(options);
|
|
|
- this.map.addControl(drawControl);
|
|
|
- this.map.on(window.L.Draw.Event.CREATED, function (e) {
|
|
|
- let editableLayer = e.layer;
|
|
|
- let layerType = e.layerType;
|
|
|
- editableLayer.on('dblclick', function (e) {
|
|
|
- if (layerType === "polygon"||layerType === "rectangle") {
|
|
|
- let latlng = editableLayer.getLatLngs()[0];
|
|
|
+ }
|
|
|
+ var drawControl = new window.L.Control.Draw(options)
|
|
|
+ this.map.addControl(drawControl)
|
|
|
+ this.map.on(window.L.Draw.Event.CREATED, function(e) {
|
|
|
+ let editableLayer = e.layer
|
|
|
+ let layerType = e.layerType
|
|
|
+ editableLayer.on('dblclick', function(e) {
|
|
|
+ if (layerType === 'polygon' || layerType === 'rectangle') {
|
|
|
+ let latlng = editableLayer.getLatLngs()[0]
|
|
|
_that.showAreaLatLng(latlng)
|
|
|
}
|
|
|
})
|
|
|
- editableLayers.addLayer(editableLayer);
|
|
|
- });
|
|
|
+ editableLayers.addLayer(editableLayer)
|
|
|
+ })
|
|
|
}
|
|
|
//鼠标绘制线段
|
|
|
if (this.showLineLatLng != undefined) {
|
|
|
- var editableLayers = new window.L.FeatureGroup();
|
|
|
- this.map.addLayer(editableLayers);
|
|
|
+ var editableLayers = new window.L.FeatureGroup()
|
|
|
+ this.map.addLayer(editableLayers)
|
|
|
let options = {
|
|
|
position: 'topleft',
|
|
|
draw: {
|
|
@@ -512,25 +514,25 @@
|
|
|
featureGroup: editableLayers,
|
|
|
remove: true
|
|
|
}
|
|
|
- };
|
|
|
- var drawControl = new window.L.Control.Draw(options);
|
|
|
- this.map.addControl(drawControl);
|
|
|
- this.map.on(window.L.Draw.Event.CREATED, function (e) {
|
|
|
- let editableLayer = e.layer;
|
|
|
- let layerType = e.layerType;
|
|
|
- editableLayer.on('dblclick', function (e) {
|
|
|
- if (layerType === "polyline") {
|
|
|
- let latlng = editableLayer.getLatLngs();
|
|
|
+ }
|
|
|
+ var drawControl = new window.L.Control.Draw(options)
|
|
|
+ this.map.addControl(drawControl)
|
|
|
+ this.map.on(window.L.Draw.Event.CREATED, function(e) {
|
|
|
+ let editableLayer = e.layer
|
|
|
+ let layerType = e.layerType
|
|
|
+ editableLayer.on('dblclick', function(e) {
|
|
|
+ if (layerType === 'polyline') {
|
|
|
+ let latlng = editableLayer.getLatLngs()
|
|
|
_that.showLineLatLng(latlng)
|
|
|
}
|
|
|
})
|
|
|
- editableLayers.addLayer(editableLayer);
|
|
|
- });
|
|
|
+ editableLayers.addLayer(editableLayer)
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
- 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(this.map)
|
|
|
+ let osmLayer = window.L.supermap.tiledMapLayer(osmurl).addTo(this.map)
|
|
|
+ L.control.sideBySide(stamenLayer, osmLayer).addTo(this.map)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
@@ -539,76 +541,76 @@
|
|
|
/**
|
|
|
* polygon [{lat:30,lng:104},{lat:30,lng:104},{lat:30,lng:104}]
|
|
|
*/
|
|
|
- formatArea: function (polygon) {
|
|
|
+ formatArea: function(polygon) {
|
|
|
//L.GeometryUtil.geodesicArea(),返回number类型的数据,单位是平方米,这里做了一下转化
|
|
|
- var seeArea = window.L.GeometryUtil.geodesicArea(polygon);
|
|
|
- let area = (seeArea / 10e5).toFixed(2) + "k㎡";
|
|
|
- return area;
|
|
|
+ var seeArea = window.L.GeometryUtil.geodesicArea(polygon)
|
|
|
+ let area = (seeArea / 10e5).toFixed(2) + 'k㎡'
|
|
|
+ return area
|
|
|
},
|
|
|
// 获取长度
|
|
|
/**
|
|
|
* line[{lat:30,lng:104},{lat:30,lng:104},{lat:30,lng:104}]
|
|
|
*/
|
|
|
- formatLength: function (line) {
|
|
|
- let dis = 0;
|
|
|
+ formatLength: function(line) {
|
|
|
+ let dis = 0
|
|
|
for (let i = 0; i < line.length - 1; i++) {
|
|
|
- let start = line[i];
|
|
|
- let end = line[i + 1];
|
|
|
- dis += window.L.latLng([start.lat, start.lng]).distanceTo([end.lat, end.lng]);//计算两个点之间的距离,并累加
|
|
|
+ let start = line[i]
|
|
|
+ let end = line[i + 1]
|
|
|
+ dis += window.L.latLng([start.lat, start.lng]).distanceTo([end.lat, end.lng])//计算两个点之间的距离,并累加
|
|
|
}
|
|
|
//结果得到的也是number类型,单位是 米
|
|
|
- return (dis / 10e2).toFixed(2) + "km";
|
|
|
+ return (dis / 10e2).toFixed(2) + 'km'
|
|
|
},
|
|
|
- setMarkers: function (markersList) {//地图标点
|
|
|
- const _that = this;
|
|
|
+ setMarkers: function(markersList) {//地图标点
|
|
|
+ const _that = this
|
|
|
for (let i = 0; i < markersList.length; i++) {
|
|
|
- let isAggregation = markersList[i].isAggregation == null ? false : markersList[i].isAggregation; //是否聚合点位
|
|
|
- let keepBindPopup = isAggregation == true ? false : markersList[i].keepBindPopup; //提示气泡是否一直显示
|
|
|
+ let isAggregation = markersList[i].isAggregation == null ? false : markersList[i].isAggregation //是否聚合点位
|
|
|
+ let keepBindPopup = isAggregation == true ? false : markersList[i].keepBindPopup //提示气泡是否一直显示
|
|
|
|
|
|
let icon = new window.L.Icon({
|
|
|
iconUrl: iconList[markersList[i].icon],
|
|
|
iconSize: [48, 48],
|
|
|
iconAnchor: [24, 40],
|
|
|
popupAnchor: [-3, -40],
|
|
|
- shadowSize: [41, 41],
|
|
|
+ shadowSize: [41, 41]
|
|
|
})
|
|
|
let markerClick = window.L.marker([markersList[i].lat, markersList[i].lng], {
|
|
|
icon: icon
|
|
|
- }).addTo(this.map);
|
|
|
- if (markersList[i].bindPopupHtml != null && markersList[i].bindPopupHtml !== "") {
|
|
|
- let html = markersList[i].bindPopupHtml;
|
|
|
+ }).addTo(this.map)
|
|
|
+ if (markersList[i].bindPopupHtml != null && markersList[i].bindPopupHtml !== '') {
|
|
|
+ let html = markersList[i].bindPopupHtml
|
|
|
if (keepBindPopup) {
|
|
|
markerClick.bindPopup(html, {
|
|
|
autoClose: false,
|
|
|
closeOnClick: null,
|
|
|
closeButton: false
|
|
|
- }).openPopup(markerClick.getLatLng());
|
|
|
+ }).openPopup(markerClick.getLatLng())
|
|
|
} else {
|
|
|
- markerClick.on('mouseover', function () {
|
|
|
- let html = markersList[i].bindPopupHtml;
|
|
|
- this.bindPopup(html).openPopup(this.getLatLng());
|
|
|
- }).on('mouseout', function () {
|
|
|
- this.closePopup();
|
|
|
+ markerClick.on('mouseover', function() {
|
|
|
+ let html = markersList[i].bindPopupHtml
|
|
|
+ this.bindPopup(html).openPopup(this.getLatLng())
|
|
|
+ }).on('mouseout', function() {
|
|
|
+ this.closePopup()
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
- if (markersList[i].click != null && markersList[i].click !== "") {
|
|
|
- if(markersList[i].parameter != null && markersList[i].parameter !== ""){
|
|
|
- markerClick.on('click', function () {
|
|
|
- let clickName = markersList[i].click;
|
|
|
- _that.$emit(clickName,markersList[i].parameter);
|
|
|
+ if (markersList[i].click != null && markersList[i].click !== '') {
|
|
|
+ if (markersList[i].parameter != null && markersList[i].parameter !== '') {
|
|
|
+ markerClick.on('click', function() {
|
|
|
+ let clickName = markersList[i].click
|
|
|
+ _that.$emit(clickName, markersList[i].parameter)
|
|
|
})
|
|
|
- }else{
|
|
|
- markerClick.on('click', function () {
|
|
|
- let clickName = markersList[i].click;
|
|
|
- _that.$emit(clickName);
|
|
|
+ } else {
|
|
|
+ markerClick.on('click', function() {
|
|
|
+ let clickName = markersList[i].click
|
|
|
+ _that.$emit(clickName)
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
if (isAggregation) {
|
|
|
_that.isAggregationLayers.addLayer(markerClick)
|
|
|
_that.isAggregationMyGroup = window.L.layerGroup(_that.isAggregationLayers)
|
|
|
- this.map.addLayer(_that.isAggregationLayers);
|
|
|
+ this.map.addLayer(_that.isAggregationLayers)
|
|
|
} else {
|
|
|
_that.layers.push(markerClick)
|
|
|
_that.myGroup = window.L.layerGroup(_that.layers)
|
|
@@ -617,110 +619,116 @@
|
|
|
|
|
|
}
|
|
|
},
|
|
|
- setMarkersRadius: function (markersList) {//地图标点带范围
|
|
|
- const _that = this;
|
|
|
+ setMarkersRadius: function(markersList) {//地图标点带范围
|
|
|
+ const _that = this
|
|
|
for (let i = 0; i < markersList.length; i++) {
|
|
|
- let isAggregation = markersList[i].isAggregation == null ? false : markersList[i].isAggregation; //是否聚合点位
|
|
|
- let keepBindPopup = isAggregation == true ? false : markersList[i].keepBindPopup; //提示气泡是否一直显示
|
|
|
+ let isAggregation = markersList[i].isAggregation == null ? false : markersList[i].isAggregation //是否聚合点位
|
|
|
+ let keepBindPopup = isAggregation == true ? false : markersList[i].keepBindPopup //提示气泡是否一直显示
|
|
|
|
|
|
- _that.polygon = window.L.circle([markersList[i].lat, markersList[i].lng], {radius: markersList[i].radius * 1000});
|
|
|
+ _that.polygon = window.L.circle([markersList[i].lat, markersList[i].lng], { radius: markersList[i].radius * 1000 })
|
|
|
let icon = new window.L.Icon({//传感器
|
|
|
iconUrl: iconList[markersList[i].icon],
|
|
|
iconSize: [48, 48],
|
|
|
iconAnchor: [24, 40],
|
|
|
popupAnchor: [-3, -40],
|
|
|
- shadowSize: [41, 41],
|
|
|
+ shadowSize: [41, 41]
|
|
|
})
|
|
|
let marker = window.L.marker([markersList[i].lat, markersList[i].lng], {
|
|
|
icon: icon
|
|
|
- });
|
|
|
- if (markersList[i].bindPopupHtml != null && markersList[i].bindPopupHtml !== "") {
|
|
|
- let html = markersList[i].bindPopupHtml;
|
|
|
+ })
|
|
|
+ if (markersList[i].bindPopupHtml != null && markersList[i].bindPopupHtml !== '') {
|
|
|
+ let html = markersList[i].bindPopupHtml
|
|
|
if (keepBindPopup) {
|
|
|
marker.bindPopup(html, {
|
|
|
autoClose: false,
|
|
|
closeOnClick: null,
|
|
|
closeButton: false
|
|
|
- }).openPopup(marker.getLatLng());
|
|
|
+ }).openPopup(marker.getLatLng())
|
|
|
} else {
|
|
|
- marker.on('mouseover', function () {
|
|
|
- let html = markersList[i].bindPopupHtml;
|
|
|
- this.bindPopup(html).openPopup(this.getLatLng());
|
|
|
- }).on('mouseout', function () {
|
|
|
- this.closePopup();
|
|
|
+ marker.on('mouseover', function() {
|
|
|
+ let html = markersList[i].bindPopupHtml
|
|
|
+ this.bindPopup(html).openPopup(this.getLatLng())
|
|
|
+ }).on('mouseout', function() {
|
|
|
+ this.closePopup()
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
- if (markersList[i].click != null && markersList[i].click != "") {
|
|
|
- if(markersList[i].parameter != null && markersList[i].parameter !== ""){
|
|
|
- marker.on('click', function () {
|
|
|
- let clickName = markersList[i].click;
|
|
|
- _that.$emit(clickName,markersList[i].parameter);
|
|
|
+ if (markersList[i].click != null && markersList[i].click != '') {
|
|
|
+ if (markersList[i].parameter != null && markersList[i].parameter !== '') {
|
|
|
+ marker.on('click', function() {
|
|
|
+ let clickName = markersList[i].click
|
|
|
+ _that.$emit(clickName, markersList[i].parameter)
|
|
|
})
|
|
|
- }else{
|
|
|
- marker.on('click', function () {
|
|
|
- let clickName = markersList[i].click;
|
|
|
- _that.$emit(clickName);
|
|
|
+ } else {
|
|
|
+ marker.on('click', function() {
|
|
|
+ let clickName = markersList[i].click
|
|
|
+ _that.$emit(clickName)
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
- marker.addTo(this.map);
|
|
|
-
|
|
|
+ marker.addTo(this.map)
|
|
|
|
|
|
if (isAggregation) {
|
|
|
- _that.isAggregationLayers.addLayer(marker);
|
|
|
- _that.radiusLayers.push(_that.polygon);
|
|
|
- this.map.addLayer(_that.isAggregationLayers);
|
|
|
+ _that.isAggregationLayers.addLayer(marker)
|
|
|
+ _that.radiusLayers.push(_that.polygon)
|
|
|
+ this.map.addLayer(_that.isAggregationLayers)
|
|
|
_that.isAggregationMyGroup = window.L.layerGroup(_that.radiusLayers)
|
|
|
this.map.addLayer(_that.isAggregationMyGroup)
|
|
|
} else {
|
|
|
- _that.layers.push(marker);
|
|
|
- _that.layers.push(_that.polygon);
|
|
|
+ _that.layers.push(marker)
|
|
|
+ _that.layers.push(_that.polygon)
|
|
|
_that.myGroup = window.L.layerGroup(_that.layers)
|
|
|
this.map.addLayer(_that.myGroup)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- setConnectList: function (connectList, color) {//地图画线
|
|
|
- const _that = this;
|
|
|
- let points = [];
|
|
|
+ setConnectList: function(connectList, color) {//地图画线
|
|
|
+ const _that = this
|
|
|
+ let points = []
|
|
|
for (let i = 0; i < connectList.length; i++) {
|
|
|
- points.push([connectList[i].lat, connectList[i].lng]);//创建点
|
|
|
+ points.push([connectList[i].lat, connectList[i].lng])//创建点
|
|
|
+ }
|
|
|
+ let polyline = window.L.polyline(points, { color: color })
|
|
|
+ if (this.connectLayer != undefined && this.connectLayer != false) {
|
|
|
+ _that.connectLayer.addLayer(polyline)
|
|
|
+ } else {
|
|
|
+ _that.connectLayer = window.L.featureGroup().addTo(this.map)
|
|
|
+ _that.connectLayer.addLayer(polyline)
|
|
|
}
|
|
|
- let polyline = window.L.polyline(points, {color: color});
|
|
|
- _that.connectLayer = window.L.featureGroup().addTo(this.map);
|
|
|
- _that.connectLayer.addLayer(polyline);
|
|
|
},
|
|
|
- setGraphicsList: function (graphicsList, color) {//地图图形
|
|
|
- const _that = this;
|
|
|
- let points = [];
|
|
|
+ setGraphicsList: function(graphicsList, color) {//地图图形
|
|
|
+ const _that = this
|
|
|
+ let points = []
|
|
|
for (let i = 0; i < graphicsList.length; i++) {
|
|
|
- points.push([graphicsList[i].lat, graphicsList[i].lng]);//创建点
|
|
|
+ points.push([graphicsList[i].lat, graphicsList[i].lng])//创建点
|
|
|
+ }
|
|
|
+ let polygon = window.L.polygon(points, { color: color })
|
|
|
+ polygon.addTo(this.map)
|
|
|
+ if (this.graphicsLayer != undefined && this.graphicsLayer != false) {
|
|
|
+ _that.graphicsLayer.addLayer(polygon)
|
|
|
+ } else {
|
|
|
+ _that.graphicsLayer = window.L.featureGroup().addTo(this.map)
|
|
|
+ _that.graphicsLayer.addLayer(polygon)
|
|
|
}
|
|
|
- let polygon = window.L.polygon(points, {color: color});
|
|
|
- polygon.addTo(this.map);
|
|
|
- _that.graphicsLayer = window.L.featureGroup().addTo(this.map);
|
|
|
- _that.graphicsLayer.addLayer(polygon);
|
|
|
},
|
|
|
- dropLocation: function (lat, lng) {//落点定位
|
|
|
+ dropLocation: function(lat, lng) {//落点定位
|
|
|
this.controlLevel(10)
|
|
|
setTimeout(() => {
|
|
|
- this.map.panTo([lat, lng]);
|
|
|
- },500)
|
|
|
+ this.map.panTo([lat, lng])
|
|
|
+ }, 500)
|
|
|
},
|
|
|
- controlLevel: function (level) {//控制地图缩放级别
|
|
|
+ controlLevel: function(level) {//控制地图缩放级别
|
|
|
this.map.setZoom(level)
|
|
|
},
|
|
|
- layerSwitching: function (url,isClear) {//图层切换 url 图层地址 isClear 是否清除图层
|
|
|
- if(isClear){
|
|
|
- if(this.deckglLayer!=null){
|
|
|
+ layerSwitching: function(url, isClear) {//图层切换 url 图层地址 isClear 是否清除图层
|
|
|
+ if (isClear) {
|
|
|
+ if (this.deckglLayer != null) {
|
|
|
this.deckglLayer.remove()
|
|
|
}
|
|
|
}
|
|
|
- this.deckglLayer = window.L.supermap.tiledMapLayer(url,{
|
|
|
- });
|
|
|
- this.map.addLayer(this.deckglLayer);
|
|
|
- },
|
|
|
+ this.deckglLayer = window.L.supermap.tiledMapLayer(url, {})
|
|
|
+ this.map.addLayer(this.deckglLayer)
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|