添加服务图层的配置加载。

wangrui

2020-12-22 612ac3de5dc5067b8140272feb378e4f4da8bde4

添加服务图层的配置加载。

 .DS_Store

Binary files differ

 src/Sgis.js

@@ -7,6 +7,7 @@
import PathDrag from '@components/plugin/PathDrag'
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'
@@ -23,6 +24,7 @@
    PathDrag.init(L) // 路径拖拽
    MagicMarker.init(L) // 动画Marker
    CanvasIcon.init(L) // 使用canvas绘制Marker
    WmtsSupport.init(L) // 扩展，使支持WMTS
    // CustomPopup.init(L) // 自定义弹出框
    DashFlow.DashFlow(L) // 流动线图
    // Leaflet扩展代码

 src/components/helpers/ServiceLayerHelper.js

@@ -1,3 +1,4 @@
/* eslint-disable no-debugger */
/**
 * 创建图层相关的类
 */
@@ -17,6 +18,15 @@
    initServiceLayers(mapConfig){
        console.log(mapConfig)
        this.mapConfig = mapConfig

        this._loadLayers(mapConfig)
    }

    _loadLayers(mapConfig, isAddToMap = true){
        console.debug('ServiceLayerHelper加载参数：',mapConfig)
        this.loadTileLayer(mapConfig, isAddToMap)
        this.loadWmtsLayer(mapConfig, isAddToMap)
        this.loadWmtsLayer(mapConfig, isAddToMap)
    }

    /**
@@ -24,38 +34,42 @@
     * @param {}} options 
     * @param {*} isAddToMap 
     */
    loadWmtsLayer(options, isAddToMap) {
        const layer =L.tileLayer.wmts(options.url, {
            layers: options.layers || 'all',//country
            format: options.format || "image/png",
            transparent: options.true || true,
            crs:options.crs || L.CRS.EPSG4326
        });
   
        if(isAddToMap) {
            layer.addTo(this.map)
    loadWmtsLayer(options, isAddToMap = true) {
        for(let i = 0, len = options.mapConfig.ServiceLayers.length; i < len; ++i) {
            let opt = options.mapConfig.ServiceLayers[i]
            if(opt.type !== 'wmts') {
                continue
            }
            const layer = this.L.tileLayer(opt.url, opt.option);
       
            if(isAddToMap) {
                layer.addTo(this.map)
            }
            this.tileLayersMap.set(opt.code, layer)
            this.tileLayersArray.push(layer)
        }
        this.tileLayersMap.put(options.name, layer)
        this.tileLayersArray.push(layer)
    }
    /**
     * 往地图中加入一个WMS服务
     * @param {}} options 
     * @param {*} isAddToMap 
     */
    loadWmsLayer(options, isAddToMap) {
        const layer =L.tileLayer.wms(options.url, {
            layers: options.layers || 'all',//country
            format: options.format || "image/png",
            transparent: options.true || true,
            crs:options.crs || L.CRS.EPSG4326
        });
   
        if(isAddToMap) {
            layer.addTo(this.map)
    loadWmsLayer(options, isAddToMap = true) {
        for(let i = 0, len = options.mapConfig.ServiceLayers.length; i < len; ++i) {
            let opt = options.mapConfig.ServiceLayers[i]
            if(opt.type !== 'wms') {
                continue
            }

            const layer =this.L.tileLayer.wms(opt.url, opt.option);
       
            if(isAddToMap) {
                layer.addTo(this.map)
            }
            this.tileLayersMap.set(opt.code, layer)
            this.tileLayersArray.push(layer)
        }
        this.tileLayersMap.put(options.name, layer)
        this.tileLayersArray.push(layer)
        
    }

    /**
@@ -63,22 +77,29 @@
     * @param {}} options 
     * @param {*} isAddToMap 
     */
    loadTileLayer(options, isAddToMap) {
        const layer =L.tileLayer(options.url, {
            layers: options.layers || 'all',//country
            format: options.format || "image/png",
            transparent: options.true || true,
            crs:options.crs || L.CRS.EPSG4326,
            maxZoom: options.maxZoom || 21,
            minZoom: options.minZoom || 1,
            zoomOffset: options.zoomOffset || 0
        });
   
        if(isAddToMap) {
            layer.addTo(this.map)
    loadTileLayer(options, isAddToMap = true) {
        for(let i = 0, len = options.mapConfig.ServiceLayers.length; i < len; ++i) {
            let opt = options.mapConfig.ServiceLayers[i]
            if(opt.type !== 'tile') {
                continue
            }

            const layer =this.L.tileLayer(opt.url, {
                layers: opt.layers || 'all',//country
                format: opt.format || "image/png",
                transparent: opt.true || true,
                crs:opt.crs || L.CRS.EPSG4326,
                maxZoom: opt.maxZoom || 21,
                minZoom: opt.minZoom || 1,
                zoomOffset: opt.zoomOffset || 0
            });
       
            if(isAddToMap) {
                layer.addTo(this.map)
            }
            this.tileLayersMap.set(opt.code , layer)
            this.tileLayersArray.push(layer)
        }
        this.tileLayersMap.put(options.name, layer)
        this.tileLayersArray.push(layer)
    }

    hideTileLayer(name){

 src/components/plugin/wmts_plugins.js

New file
@@ -0,0 +1,96 @@
/* eslint-disable no-prototype-builtins */
'use strict'
const init = (L) => {
    L.TileLayer.WMTS = L.TileLayer.extend({
        defaultWmtsParams: {
            service: 'WMTS',
            request: 'GetTile',
            version: '1.0.0',
            layer: '',
            style: '',
            tilematrixset: '',
            format: 'image/jpeg'
        },
    
        initialize: function (url, options) { // (String, Object)
            this._url = url;
            var lOptions= {};
            var cOptions = Object.keys(options);
            cOptions.forEach(element=>{
               lOptions[element.toLowerCase()]=options[element];
            });
            var wmtsParams = L.extend({}, this.defaultWmtsParams);
            var tileSize = lOptions.tileSize || this.options.tileSize;
            if (lOptions.detectRetina && L.Browser.retina) {
                wmtsParams.width = wmtsParams.height = tileSize * 2;
            } else {
                wmtsParams.width = wmtsParams.height = tileSize;
            }
            for (var i in lOptions) {
                // all keys that are in defaultWmtsParams options go to WMTS params
                if (wmtsParams.hasOwnProperty(i) && i!="matrixIds") {
                    wmtsParams[i] = lOptions[i];
                }
            }
            this.wmtsParams = wmtsParams;
            this.matrixIds = options.matrixIds||this.getDefaultMatrix();
            L.setOptions(this, options);
        },
    
        onAdd: function (map) {
            this._crs = this.options.crs || map.options.crs;
            L.TileLayer.prototype.onAdd.call(this, map);
        },
    
        getTileUrl: function (coords) { // (Point, Number) -> String
            var tileSize = this.options.tileSize;
            var nwPoint = coords.multiplyBy(tileSize);
            nwPoint.x+=1;
            nwPoint.y-=1;
            var sePoint = nwPoint.add(new L.Point(tileSize, tileSize));
            var zoom = this._tileZoom;
            var nw = this._crs.project(this._map.unproject(nwPoint, zoom));
            var se = this._crs.project(this._map.unproject(sePoint, zoom));
            var tilewidth = se.x-nw.x;
            var ident = this.matrixIds[zoom].identifier;
            var tilematrix = this.wmtsParams.tilematrixset + ":" + ident;
            var X0 = this.matrixIds[zoom].topLeftCorner.lng;
            var Y0 = this.matrixIds[zoom].topLeftCorner.lat;
            var tilecol=Math.floor((nw.x-X0)/tilewidth);
            var tilerow=-Math.floor((nw.y-Y0)/tilewidth);
            var url = L.Util.template(this._url, {s: this._getSubdomain(coords)});
            return url + L.Util.getParamString(this.wmtsParams, url) + "&tilematrix=" + tilematrix + "&tilerow=" + tilerow +"&tilecol=" + tilecol;
        },
    
        setParams: function (params, noRedraw) {
            L.extend(this.wmtsParams, params);
            if (!noRedraw) {
                this.redraw();
            }
            return this;
        },
        
        getDefaultMatrix : function () {
            /**
             * the matrix3857 represents the projection 
             * for in the IGN WMTS for the google coordinates.
             */
            var matrixIds3857 = new Array(22);
            for (var i= 0; i<22; i++) {
                matrixIds3857[i]= {
                    identifier    : "" + i,
                    topLeftCorner : new L.LatLng(20037508.3428,-20037508.3428)
                };
            }
            return matrixIds3857;
        }
    });
    
    L.tileLayer.wmts = function (url, options) {
        return new L.TileLayer.WMTS(url, options);
    };
}

export default {
    init
}

 src/conf/MapConfig.js

@@ -5,11 +5,17 @@
let pos = curWwwPath.indexOf(pathname)
let HOST_URL = curWwwPath.substring(0, pos)

const BLUEMAP_HOST = 'http://xearth.cn:6288/' // 公司发布的地图服务，用于测试的地址

// basemap主机配置
const SINOPEC_GIS_HOST = 'http://10.246.132.249:8080'  // 内网天地图主机地址
const TIANDITU_GIS_HOST = 'http://t0.tianditu.gov.cn' // 公网天地图主机地址
const TIANDITU_GIS_TOKEN = '5d76218063082952d18b76da5005f490' // 备用tk: f1b72b5e7cb1175acddfa485f1bc9770

// service主机配置
const APP_GIS_HOST = 'http://xearth.cn:6299/'

// 自定义主机配置
const BLUEMAP_HOST = APP_GIS_HOST // 公司发布的地图服务，用于测试的地址

const mapOptions = {
    crs: L.CRS.EPSG4326,
    minZoom: 3,
@@ -169,6 +175,21 @@
            isLoadMapByToken: false,
            url: SINOPEC_GIS_HOST + '/OneMapServer/rest/services/base-map-image-globe/MapServer'
        }
    ],

    ServiceLayers:[
        {
            code:'guojie',
            name:'国界',
            type:'wmts',
            url: APP_GIS_HOST + '/server/ogcserver/whp_guojie/wmts?x={x}&y={y}&z={z}',
            option:{
                layers: 'all',
                format: "image/png",
                transparent: true,
                crs: L.CRS.EPSG4326
            }
        }
    ]
}


 src/views/MapTemplate.vue

@@ -39,10 +39,10 @@


        this.serviceLayerHelper = Sgis.initTileLayersHelper(this.mapObj.map, this.mapObj.L) // 初始化业务底图助手
        this.serviceLayerHelper.initServiceLayers()
        this.serviceLayerHelper.initServiceLayers(mapConfig)

        this.vectorLayerHelper = Sgis.initVectorLayersHelper(this.mapObj.map, this.mapObj.L) // 初始化动态要素图层助手
        this.vectorLayerHelper.initVectorLayers()
        this.vectorLayerHelper.initVectorLayers(mapConfig)

        this.setLayerHelper(this.vectorLayerHelper)
        return this.map