From b27e031827eae0f535d17bb20ff4809699151a17 Mon Sep 17 00:00:00 2001
From: YANGDL <114714267@qq.com>
Date: 星期一, 08 二月 2021 15:42:37 +0800
Subject: [PATCH] 修改了leaflet L加载模式 修改了使用less加载方式
---
public/assets/images/map/marker-shadow.png | 0
src/assets/css/map/map-popup.less | 44 +++++++++++
src/views/MapTemplate.vue | 51 ++++++++++--
src/base/BaseVectorLayer.js | 2
src/components/helpers/ServiceLayerHelper.js | 7 -
src/views/popup/Popup.vue | 53 +++++++++++++
src/Sgis.js | 19 ++--
src/store/modules/map.js | 6 -
src/assets/css/map/_map-variable.less | 2
public/assets/images/map/marker-icon.png | 0
src/main.js | 5 +
src/components/helpers/VectorLayerHelper.js | 4
src/assets/css/map/map-elem-ui.less | 6 +
src/components/helpers/BasemapHelper.js | 4
14 files changed, 170 insertions(+), 33 deletions(-)
diff --git a/public/assets/images/map/marker-icon.png b/public/assets/images/map/marker-icon.png
new file mode 100644
index 0000000..950edf2
--- /dev/null
+++ b/public/assets/images/map/marker-icon.png
Binary files differ
diff --git a/public/assets/images/map/marker-shadow.png b/public/assets/images/map/marker-shadow.png
new file mode 100644
index 0000000..9fd2979
--- /dev/null
+++ b/public/assets/images/map/marker-shadow.png
Binary files differ
diff --git a/src/Sgis.js b/src/Sgis.js
index 79265e7..eec70ab 100644
--- a/src/Sgis.js
+++ b/src/Sgis.js
@@ -1,4 +1,3 @@
-import * as L from 'leaflet'
import BasemapHelper from '@components/helpers/BasemapHelper'
import VectorLayerHelper from '@components/helpers/VectorLayerHelper'
import ServiceLayerHelper from '@components/helpers/ServiceLayerHelper'
@@ -8,12 +7,11 @@
import CanvasIcon from '@components/plugin/CanvasMarkers'
import MagicMarker from '@components/plugin/MagicMarker'
import WmtsSupport from '@components/plugin/wmts_plugins'
-import 'leaflet.markercluster'
import MapConfig from '@/conf/MapConfig'
import DashFlow from '@components/plugin/PathDashFlow'
let map = null
-// let baseMapGroup = null
+const L = window.L
const initMap = (div) => {
if (map != null) {
map.remove()
@@ -36,9 +34,8 @@
})
window.map = map
- window.L = L
- return { map: map, L: L }
+ return map
}
/**
@@ -46,17 +43,17 @@
* @param map
* @param L
*/
-const initBasemapsHelper = (map, L) => {
+const initBasemapsHelper = (map) => {
// todo 杩欓噷杩涜搴曞浘鍦板浘鐨勫垵濮嬪寲
- return new BasemapHelper({ map, L })
+ return new BasemapHelper({ map })
}
/**
* 涓氬姟搴曞浘鍒濆鍖�
* @param map
* @param L
*/
-const initTileLayersHelper = (map, L) => {
- return new ServiceLayerHelper({ map, L })
+const initTileLayersHelper = (map) => {
+ return new ServiceLayerHelper({ map })
}
/**
@@ -64,9 +61,9 @@
* @param map
* @param L
*/
-const initVectorLayersHelper = (map, L) => {
+const initVectorLayersHelper = (map) => {
// todo 杩欓噷杩涜鍦板浘鐨勫垵濮嬪寲
- window.vectorLayerHelper = new VectorLayerHelper({ map, L })
+ window.vectorLayerHelper = new VectorLayerHelper({ map })
return window.vectorLayerHelper
}
diff --git a/src/assets/css/map/_map-variable.less b/src/assets/css/map/_map-variable.less
new file mode 100644
index 0000000..c9f0594
--- /dev/null
+++ b/src/assets/css/map/_map-variable.less
@@ -0,0 +1,2 @@
+@color:#00fff6;
+@background-color:rgba(0,16,30,.9);
diff --git a/src/assets/css/map/map-elem-ui.less b/src/assets/css/map/map-elem-ui.less
new file mode 100644
index 0000000..4d31a33
--- /dev/null
+++ b/src/assets/css/map/map-elem-ui.less
@@ -0,0 +1,6 @@
+@import "_map-variable";
+.el-button--primary{
+ color: @color;
+ background-color: @background-color;
+ border-color: @color;
+}
diff --git a/src/assets/css/map/map-popup.less b/src/assets/css/map/map-popup.less
new file mode 100644
index 0000000..22b9a19
--- /dev/null
+++ b/src/assets/css/map/map-popup.less
@@ -0,0 +1,44 @@
+@import "_map-variable";
+
+.s-map-popup {
+ position: relative;
+ .leaflet-popup-content-wrapper, .leaflet-popup-tip {
+ background-color: @background-color;
+ /*background-color: transparent;*/
+ border: .00521rem solid @color;
+ padding: .10417rem;
+ -webkit-box-shadow: 0 0 0.03125rem 0 @color;
+ box-shadow: 0 0 0.03125rem 0 @color;
+ border-radius: 1rem;
+ }
+
+ .leaflet-popup-tip-container {
+ display: none;
+ }
+
+ .leaflet-popup-content-wrapper:before {
+ content: "";
+ position: absolute;
+ left: 50%;
+ bottom: -.3rem;
+ -webkit-transform: translateX(-50%) rotate(
+ 45deg
+ );
+ transform: translateX(-50%) rotate(
+ 45deg
+ );
+ width: .6rem;
+ height: .6rem;
+ background-color: @background-color;
+ border-right: .00521rem solid @color;
+ border-bottom: .00521rem solid @color;
+ }
+
+}
+
+.s-map-popup-panel {
+ color: @color;
+}
+
+
+
diff --git a/src/base/BaseVectorLayer.js b/src/base/BaseVectorLayer.js
index 2f417cd..0cef3f5 100644
--- a/src/base/BaseVectorLayer.js
+++ b/src/base/BaseVectorLayer.js
@@ -1,4 +1,4 @@
-import L from 'leaflet'
+
/**
* 鍩虹鍥惧眰绫伙紝 鍖呭惈鍥惧眰鐨勫垱寤猴紝鍔犺浇鍜屾竻闄ょ瓑鍩虹鍔熻兘銆�
diff --git a/src/components/helpers/BasemapHelper.js b/src/components/helpers/BasemapHelper.js
index 60fc9e8..a430df0 100644
--- a/src/components/helpers/BasemapHelper.js
+++ b/src/components/helpers/BasemapHelper.js
@@ -7,10 +7,10 @@
class BasemapHelper {
constructor (options) {
this.map = options.map
- this.L = options.L
+ this.L = window.L
this.basemapList = []
this.basemapMap = new Map()
- this.basemapLayerGroup = options.L.layerGroup().addTo(options.map)
+ this.basemapLayerGroup = this.L.layerGroup().addTo(options.map)
}
/**
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index 21d9aca..c85d32b 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/src/components/helpers/ServiceLayerHelper.js
@@ -2,15 +2,14 @@
/**
* 鍒涘缓鍥惧眰鐩稿叧鐨勭被
*/
-import L from 'leaflet'
class ServiceLayerHelper {
constructor (options) {
this.map = options.map
- this.L = options.L
+ this.L = window.L
this.tileLayersMap = new Map()
this.tileLayersWMSArray = []
- this.tileLayerWmslayerGroup = L.layerGroup().addTo(this.map)
+ this.tileLayerWmslayerGroup = this.L.layerGroup().addTo(this.map)
this.tileLayersWMTSArray = []
this.tileLayersTileArray = []
this.mapConfig = {}
@@ -89,7 +88,7 @@
layers: options.layers || 'all', // country
format: options.format || 'image/png',
transparent: options.true || true,
- crs: options.crs || L.CRS.EPSG4326,
+ crs: options.crs || this.L.CRS.EPSG4326,
maxZoom: options.maxZoom || 21,
minZoom: options.minZoom || 1,
zoomOffset: options.zoomOffset || 0
diff --git a/src/components/helpers/VectorLayerHelper.js b/src/components/helpers/VectorLayerHelper.js
index 38b9102..3db8743 100644
--- a/src/components/helpers/VectorLayerHelper.js
+++ b/src/components/helpers/VectorLayerHelper.js
@@ -3,7 +3,7 @@
*/
function VectorLayerHelper (options) {
this.map = options.map
- this.L = options.L
+ this.L = window.L
this.vectorLayerMap = new Map()
this.vectorLayerList = []
this.vectorLayerGroup = null
@@ -14,7 +14,7 @@
* @param map
*/
this.initVectorLayers = (vueState) => {
- this.vectorLayerGroup = options.L.layerGroup().addTo(options.map)
+ this.vectorLayerGroup = this.L.layerGroup().addTo(options.map)
this.vueState = vueState
}
diff --git a/src/main.js b/src/main.js
index fa37006..45c8a84 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,11 +8,14 @@
import echartsDarkTheme from '@/styles/theme-dark/echarts/theme.json'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
-
+import 'leaflet/dist/leaflet.css'
+import L from 'leaflet'
+import 'leaflet.markercluster'
Vue.config.productionTip = false
Vue.use(ElementUI, { size: 'small' })
Vue.prototype.$cancels = []
+Vue.prototype.L = L
// 娉ㄥ唽鎸囦护
// registerDirectives(Vue)
diff --git a/src/store/modules/map.js b/src/store/modules/map.js
index d45b265..a9d9fc5 100644
--- a/src/store/modules/map.js
+++ b/src/store/modules/map.js
@@ -3,7 +3,6 @@
const state = {
currentCorp: null,
currentCorpType: null,
- L: null,
map: null, // 瀹炰緥鍖栫殑map
basemapHelper: {}, // 褰卞儚鍦板浘鍥惧眰鎺у埗鍣ㄥ疄鐜板姪鎵嬬▼搴�
serviceLayerHelper: {}, // 鏈嶅姟鍥惧眰鎺у埗鍣ㄥ疄鐜板姪鎵嬬▼搴�
@@ -17,9 +16,8 @@
mapConfig: mapConfig
}
const mutations = {
- setMapObj (state, mObject) {
- state.L = mObject.L
- state.map = mObject.map
+ setMapObj (state, map) {
+ state.map = map
},
setBasemapHelper (state, layerHelper) {
state.basemapHelper = layerHelper
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index 8b3b26c..bde308c 100644
--- a/src/views/MapTemplate.vue
+++ b/src/views/MapTemplate.vue
@@ -1,6 +1,8 @@
<template>
<div class="full-screen">
- <div id="map" ref="rootmap"></div>
+ <popup ref="popup" @callPopup="callPopup"></popup>
+ <div id="map" ref="rootmap">
+ </div>
<sgis-layer-controller :preset="'warningPreset'">
<lc-basemap></lc-basemap>
<!-- <div class="barline"></div>-->
@@ -24,7 +26,7 @@
import MonitorPanel from '@components/panel/RightSearchPanel'
import TopEnterprisePanel from '@components/panel/TopEnterprisePanel'
import ToolBoxPanel from '@components/panel/ToolBoxPanel'
-
+import Popup from '@views/popup/Popup'
export default {
name: 'MapTemplate',
components: {
@@ -34,10 +36,12 @@
MonitorPanel,
LcBasemap,
LcServiceLayer,
- LcServiceLayerFilter
+ LcServiceLayerFilter,
+ Popup
},
data () {
return {
+ map: null,
basemapHelper: {},
serviceLayerHelper: {},
vectorLayerHelper: {}
@@ -58,22 +62,22 @@
},
methods: {
saveMapStatus () {
- this.$store.commit('setMapObj', this.mapObj)
+ this.$store.commit('setMapObj', this.map)
this.$store.commit('setBasemapHelper', this.basemapHelper)
this.$store.commit('setServiceLayerHelper', this.serviceLayerHelper)
this.$store.commit('setVectorLayerHelper', this.vectorLayerHelper)
},
init () {
const mapcontainer = this.$refs.rootmap
- this.mapObj = Sgis.initMap(mapcontainer)
+ this.map = Sgis.initMap(mapcontainer)
- this.basemapHelper = Sgis.initBasemapsHelper(this.mapObj.map, this.mapObj.L) // 鍒濆鍖栧熀纭�搴曞浘鍔╂墜
+ this.basemapHelper = Sgis.initBasemapsHelper(this.map) // 鍒濆鍖栧熀纭�搴曞浘鍔╂墜
this.basemapHelper.initBasemap(this.mapConfig, false) // 绗簩涓弬鏁帮紝琛ㄧず鏄惁鍐呯綉搴曞浘
- this.serviceLayerHelper = Sgis.initTileLayersHelper(this.mapObj.map, this.mapObj.L) // 鍒濆鍖栦笟鍔″簳鍥惧姪鎵�
+ this.serviceLayerHelper = Sgis.initTileLayersHelper(this.map) // 鍒濆鍖栦笟鍔″簳鍥惧姪鎵�
this.serviceLayerHelper.initServiceLayers(this.mapConfig)
- this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.mapObj.map, this.mapObj.L) // 鍒濆鍖栧姩鎬佽绱犲浘灞傚姪鎵�
+ this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.map) // 鍒濆鍖栧姩鎬佽绱犲浘灞傚姪鎵�
this.vectorLayerHelper.initVectorLayers(this.mapConfig)
this.saveMapStatus()
@@ -81,6 +85,37 @@
// this.setBasemapHelper(this.basemapHelper)
// this.setServiceLayerHelper(this.serviceLayerHelper)
// this.setVectorLayerHelper(this.vectorLayerHelper)
+ this.addMarker()
+ },
+ addMarker () {
+ const L = this.L
+ var icon = new L.Icon({
+ iconUrl: 'assets/images/map/marker-icon.png',
+ shadowUrl: 'assets/images/map/marker-shadow.png',
+ iconSize: [25, 41],
+ iconAnchor: [12, 41],
+ popupAnchor: [1, -34],
+ shadowSize: [41, 41]
+ })
+ var marker = L.marker([32.2221, 118.7843], {
+ icon: icon
+ }).addTo(this.map)
+ .bindPopup(() => this.$refs.popup.$el, { className: 's-map-popup', minWidth: 300, closeButton: false, autoClose: false })
+ .bindTooltip('瀛椾綋鍏夋檿鏁堟灉t.', {
+ // permanent : true,
+ offset: [0, 0], // 鍋忕Щ
+ direction: 'right', // 鏀剧疆浣嶇疆
+ // sticky:true,//鏄惁鏍囪鍦ㄧ偣涓婇潰
+ className: 'anim-tooltip'// CSS鎺у埗
+ })
+
+ marker.on('popupopen', this.onLayerClick)
+ },
+ onLayerClick () {
+ this.$refs.popup.setShow()
+ },
+ callPopup (val) {
+ console.log(val)
}
}
}
diff --git a/src/views/popup/Popup.vue b/src/views/popup/Popup.vue
new file mode 100644
index 0000000..5bc6926
--- /dev/null
+++ b/src/views/popup/Popup.vue
@@ -0,0 +1,53 @@
+<template>
+ <div v-if="isShow" class="s-map-popup-panel" >
+
+ <div>
+ {{ data }}
+ </div>
+ <div>
+ {{ data }}
+ </div>
+ <br>
+ <br>
+ <div>
+ {{ data }}
+ </div>
+ <br>
+ <br>
+
+ <div>
+ {{ data }}
+ </div>
+ <el-button type="primary" @click="onClick">涓昏鎸夐挳</el-button>
+ </div>
+</template>
+
+<script>
+// import '@/assets/css/map/map-popup.scss'
+export default {
+ name: 'Popup',
+ data () {
+ return {
+
+ isShow: false,
+ data: ''
+ }
+ },
+
+ methods: {
+ setShow () {
+ // this.style.display='auto'
+ this.data = 'adsfadfsadfsdafsdfsdfdsafsdafsdafa'
+ this.isShow = true
+ },
+ onClick () {
+ const param = 1111
+ this.$emit('callPopup', param)
+ }
+ }
+}
+</script>
+
+<style lang="less">
+@import '../../assets/css/map/map-popup.less';
+</style>
--
Gitblit v1.8.0