底图切换组件开发完成

wangrui

2020-12-23 3eda2a49edc60f3961604223f557dcd6ab6db94f

底图切换组件开发完成

 public/assets/images/map-pages/icon/img.png

 public/assets/images/map-pages/icon/road.png

 public/assets/images/map-pages/icon/terrain.png

 src/assets/images/map-pages/icon/img.png

 src/assets/images/map-pages/icon/road.png

 src/assets/images/map-pages/icon/terrain.png

 src/components/LayerController/LayerController.vue

@@ -196,7 +196,7 @@
  }

  .bodyBox{
    background-color: rgba(0x04, 0x52, 0x7f, 0.6);
    background-color: rgba(44,62,80, 0.6);
    border: 1px solid #10488c;
    margin-top: -1px;
    height: auto;

 src/components/LayerController/modules/LcBaseMap.vue

@@ -1,46 +1,74 @@
<template>
<div class="inner-panel">
  <div class="inner-panel">
    <div v-for="item in basemapList" :key="item.code" class="basemap-layer-item">
        <img src="" width="40" height="40" :title="item.name"/>
        <input type="checkbox" title="显示标注" />
      <img :src="item.conf.icon_actived" width="50" height="50" :title="item.name"/>
      <input type="radio" name="basemap" v-model="selectedBasemap" :value="item.code" title="显示标注" @change="changeBasemap"/>
    </div>
</div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: 'LcBaseMap',
  name: "LcBaseMap",
  components: {},
  porps:['helper'],
  data() {
    return {
      basemapHelper:null,
        basemapList:[]
    }
      basemapList: [],
      selectedBasemap: "tianditu_img",
    };
  },
  mounted(){
  computed: {
    ...mapState({
      basemapHelper: (state) => {
        return state.basemapHelper;
      },
    }),
  },
  mounted() {
    // console.log('03步骤：', this.helper)
  },
  methods:{
init(basemapHelper){
  console.log('03步骤：', this.helper)
  console.log(basemapHelper)
  this.basemapHelper =basemapHelper
}

  }
}
  methods: {
    ...mapMutations([]),
    updateBasemapList() {
      let list = this.basemapHelper.getBasemapList();
      this.basemapList = list;
    },
    changeBasemap() {
      this.basemapHelper.showBasemap(this.selectedBasemap, true)
    },
  },
  watch: {
    basemapHelper(newVal) {
      if (newVal != null) {
        this.updateBasemapList();
      }
    },
  },
};
</script>

<style scoped lang="less">
.inner-panel{
    display: flex;
    justify-content: center;
    align-items: center;
.inner-panel {
  display: flex;
  justify-content: center;
  align-items: center;
}
.basemap-layer-item{
    width: 40px;
    height: 40px;
    margin: 10px;
.basemap-layer-item {
  width: 50px;
  height: 50px;
  margin: 10px;
  border: 2px solid white;

  input {
    position: relative;
    left: 0px;
    top: -53px;
  }
  .basemap-layer-item-name {
    position: relative;
    left: 0px;
    top: -53px;
  }
}
</style>

 src/components/helpers/BasemapHelper.js

@@ -46,30 +46,31 @@

    /**
     * 显示某个图层
     * @param map 地图对象
     * @param layer 待显示图层引用
     * @param isHideOthers 是否先关闭其他图层，默认是true
     */
    showBasemap = (map, code, isHideOthers = true) => {
    showBasemap = (code, isHideOthers = true) => {
        debugger
        let basemap = this.basemapMap.get(code)
        if(isHideOthers) {
            for(let i = 0, len = this.basemapList.length; i < len; ++i){
                map.removeLayer(this.basemapList[i])
                this.map.removeLayer(this.basemapList[i].layer)
                this.map.removeLayer(this.basemapList[i].annotation)
            }
        }
        map.addLayer(basemap.layer)
        map.addLayer(basemap.annotation)
        this.map.addLayer(basemap.layer)
        this.map.addLayer(basemap.annotation)
    }

    /**
     * 隐藏某个图层
     * @param map 地图对象
     * @param layer 待关闭图层引用
     */
    hideBasemap = (map, code) => {
    hideBasemap = (code) => {
        debugger
        let basemap = this.basemapMap.get(code)
        map.removeLayer(basemap.layer)
        map.removeLayer(basemap.annotation)
        this.map.removeLayer(basemap.layer)
        this.map.removeLayer(basemap.annotation)
    }

    // 公网创建地图部分

 src/conf/MapConfig.js

@@ -36,8 +36,8 @@
        {
            code: 'sinopec_img',
            name: '中石化天地图影像',
            icon_actived: '',
            icon_deactived: '',
            icon_actived: '/assets/images/map-pages/icon/img.png',
            icon_deactived: '/assets/images/map-pages/icon/img.png',
            isAddToMap: true,
            map: {
                layerName: '天地图影像地图',
@@ -71,8 +71,8 @@
        {
            code: 'sinopec_vec',
            name: '中石化天地图矢量',
            icon_actived: '',
            icon_deactived: '',
            icon_actived: '/assets/images/map-pages/icon/road.png',
            icon_deactived: '/assets/images/map-pages/icon/road.png',
            isAddToMap: false,
            map: {
                layerName: '天地图矢量地图',
@@ -108,8 +108,8 @@
        {
            code: 'tianditu_img',
            name: '天地图影像',
            icon_actived: '',
            icon_deactived: '',
            icon_actived: '/assets/images/map-pages/icon/img.png',
            icon_deactived: '/assets/images/map-pages/icon/img.png',
            isAddToMap: true,
            map: {
                layerName: '天地图影像地图',
@@ -145,8 +145,8 @@
        {
            code: 'tianditu_vec',
            name: '天地图影像',
            icon_actived: '',
            icon_deactived: '',
            icon_actived: '/assets/images/map-pages/icon/road.png',
            icon_deactived: '/assets/images/map-pages/icon/road.png',
            isAddToMap: false,
            map: {
                layerName: '天地图矢量地图',

 src/views/MapTemplate.vue

@@ -2,7 +2,7 @@
  <div class="full-screen">
        <div id="map" ref="rootmap"></div>
        <sgis-layer-controller :preset="'warningPreset'">
            <lc-basemap ref="lcBasemap"></lc-basemap>
            <lc-basemap></lc-basemap>
        </sgis-layer-controller>
        <monitor-panel></monitor-panel>
  </div>
@@ -42,7 +42,6 @@
      init() {
        const mapcontainer = this.$refs.rootmap
        this.mapObj = Sgis.initMap(mapcontainer)
        console.log('01步骤：', this.mapObj)

        this.basemapHelper = Sgis.initBasemapsHelper(this.mapObj.map, this.mapObj.L) // 初始化基础底图助手
        this.basemapHelper.initBasemap(mapConfig, false) // 第二个参数，表示是否内网底图
@@ -53,12 +52,10 @@
        this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.mapObj.map, this.mapObj.L) // 初始化动态要素图层助手
        this.vectorLayerHelper.initVectorLayers(mapConfig)

        console.log('02步骤：', this.basemapHelper)
        this.$refs.lcBasemap.init(this.basemapHelper)
        this.setMapObj(this.mapObj)
        this.setBasemapHelper(this.basemapHelper)
        this.setServiceLayerHelper(this.serviceLayerHelper)
        this.setVectorLayerHelper(this.vectorLayerHelper)
        return this.map
      }
  }
}