基础图层加载，未实现

wangrui

2020-12-16 b86872dec25f7569b53085cb6da1ccbfe6e8a735

基础图层加载，未实现

 package.json

@@ -1,5 +1,5 @@
{
  "name": "abc",
  "name": "SewerAndRainNetwork",
  "version": "0.1.0",
  "private": true,
  "scripts": {

 src/App.vue

@@ -1,14 +1,23 @@
<template>
  <div id="app">
  <div id="app" ref="app">
    <map-template></map-template>
  </div>
</template>

<script>
import MapTemplate from './views/MapTemplate.vue'

export default {
  name: 'App',
  components: {MapTemplate}
  components: {MapTemplate},
  mounted(){
    this.$nextTick(()=>{
      let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //浏览器高度
      let topH = this.$refs.app.offsetHeight;
      console.log(h)
      this.height = (h - topH) + "px"
    })
  }
}
</script>


 src/Sgis.js

@@ -2,42 +2,45 @@
import BasemapHelper from '@components/helpers/BasemapHelper'
import VectorLayerHelper from '@components/helpers/VectorLayerHelper'

import Editable from '@components/plugin/Editable'
import PathDrag from '@components/plugin/PathDrag'
import CanvasIcon from '@components/plugin/CanvasMarkers'
import MagicMarker from '@components/plugin/MagicMarker'
// import Editable from '@components/plugin/Editable'
// import PathDrag from '@components/plugin/PathDrag'
// import CanvasIcon from '@components/plugin/CanvasMarkers'
// import MagicMarker from '@components/plugin/MagicMarker'
import 'leaflet.markercluster'

import MapConfig from '@/conf/MapConfig'
import CommonLayerLoad from '@components/mapmodules/CommonLayerLoad'
import DashFlow from '@components/plugin/PathDashFlow'
import AjaxUtils from '@/utils/AjaxUtils'
// import DashFlow from '@components/plugin/PathDashFlow'
// import AjaxUtils from '@/utils/AjaxUtils'
let map = null
let baseMapGroup = null
// let baseMapGroup = null
let commonLayerLoad = null
const initMap = (div) => {
    if (map != null) {
        map.remove()
        baseMapGroup = null
        // baseMapGroup = null
        commonLayerLoad = null
    }

    Editable.init(L)
    PathDrag.init(L)
    MagicMarker.init(L)
    CanvasIcon.init(L)
    // Editable.init(L)
    // PathDrag.init(L)
    // MagicMarker.init(L)
    // CanvasIcon.init(L)

    // CustomPopup.init(L)
    // DashFlow.DashFlow(L)
    map = L.map(div, MapConfig.mapOptions)
    DashFlow.DashFlow(L, map)
    // DashFlow.DashFlow(L, map)
    commonLayerLoad = new CommonLayerLoad()
    const blueMap = commonLayerLoad.loadBlueMap()
    // const imgMapm = commonLayerLoad.loadImgMapm()
    // const imgMapa = commonLayerLoad.loadImgMapa()
    // L.layerGroup([normalMapm, normalMapa]).addTo(map)
    baseMapGroup = L.layerGroup([blueMap]).addTo(map)
    getToken()
    // const blueMap = commonLayerLoad.loadBlueMap()
    // baseMapGroup = L.layerGroup([blueMap]).addTo(map)

    const imgMapm = commonLayerLoad.loadImgMapm()
    const imgMapa = commonLayerLoad.loadImgMapa()
    
    L.layerGroup([imgMapm, imgMapa]).addTo(map)
    
    // getToken()
    // L.control.scale({ maxWidth: 200, metric: true, imperial: false }).addTo(map)
    // L.control.layers(SgisConfig.baseLayers, SgisConfig.overlayLayers, { position: 'bottomright' }).addTo(map)
    // 加载国界和铁路
@@ -52,18 +55,18 @@
    return { map: map, L: L }
}

let getToken = () => {
    let params = MapConfig.TokenConfig
    AjaxUtils.GetDataAsynByUrl(params.url, params.option, function(token) {
        showTdt(token)
    })
}
let showTdt = (token) => {
    const imgMapm = commonLayerLoad.loadIntranetImgMap(token)
    const imgMapa = commonLayerLoad.loadIntranetImgMapCia(token)
    baseMapGroup.addLayer(imgMapm)
    baseMapGroup.addLayer(imgMapa)
}
// let getToken = () => {
//     let params = MapConfig.TokenConfig
//     AjaxUtils.GetDataAsynByUrl(params.url, params.option, function(token) {
//         showTdt(token)
//     })
// }
// let showTdt = (token) => {
//     const imgMapm = commonLayerLoad.loadIntranetImgMap(token)
//     const imgMapa = commonLayerLoad.loadIntranetImgMapCia(token)
//     baseMapGroup.addLayer(imgMapm)
//     baseMapGroup.addLayer(imgMapa)
// }
/**
 * 瓦片底图初始化
 * @param map

 src/components/mapmodules/CommonLayerLoad.js

@@ -19,7 +19,7 @@
        return L.tileLayer('http://t0.tianditu.gov.cn/vec_c/wmts?' + tokenStr +
            'layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
            maxZoom: 18,
            minZoom: 7,
            minZoom: 1,
            zoomOffset: 1

        })
@@ -28,7 +28,7 @@
        return L.tileLayer('http://t0.tianditu.gov.cn/cva_c/wmts?' + tokenStr +
            'layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
            maxZoom: 18,
            minZoom: 7,
            minZoom: 1,
            zoomOffset: 1

        })
@@ -37,7 +37,7 @@
        return L.tileLayer('http://t0.tianditu.gov.cn/img_c/wmts?' + tokenStr +
            'layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
            maxZoom: 18,
            minZoom: 7,
            minZoom: 1,
            zoomOffset: 1
        })
    }
@@ -45,7 +45,7 @@
        return L.tileLayer('http://t0.tianditu.gov.cn/cia_c/wmts?' + tokenStr +
            'layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
            maxZoom: 18,
            minZoom: 7,
            minZoom: 1,
            zoomOffset: 1
        })
    }
@@ -53,7 +53,7 @@
        return L.tileLayer('http://10.246.132.249:8080/OneMapServer/rest/services/base-tdt-image-globe/WMTS?token=' + token + '&' +
            'layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
            maxZoom: 18,
            minZoom: 7,
            minZoom: 1,
            zoomOffset: 1
        })
    }
@@ -62,7 +62,7 @@
        return L.tileLayer('http://10.246.132.249:8080/OneMapServer/rest/services/base-tdt-label-image/WMTS?token=' + token + '&' +
            'layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}', {
            maxZoom: 18,
            minZoom: 7,
            minZoom: 1,
            zoomOffset: 1
        })
    }

 src/store/app.js

 src/store/index.js

@@ -1,6 +1,6 @@
import Vue from 'vue'
import Vuex from 'vuex'
import map from './map'
import app from './app'

Vue.use(Vuex)

@@ -31,6 +31,6 @@
  getters: {
  },
  modules: {
    map
    app
  }
})