派生自 wuyushui/SewerAndRainNetwork

YANGDL
2021-02-08 b27e031827eae0f535d17bb20ff4809699151a17
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)
    }
  }
}