From 612ac3de5dc5067b8140272feb378e4f4da8bde4 Mon Sep 17 00:00:00 2001
From: wangrui <zephyrs0894@163.com>
Date: 星期二, 22 十二月 2020 16:53:12 +0800
Subject: [PATCH] 添加服务图层的配置加载。
---
src/components/plugin/wmts_plugins.js | 96 ++++++++++++++++++++++++
src/conf/MapConfig.js | 25 +++++
src/views/MapTemplate.vue | 4
.DS_Store | 0
src/components/helpers/ServiceLayerHelper.js | 99 +++++++++++++++---------
src/Sgis.js | 2
6 files changed, 183 insertions(+), 43 deletions(-)
diff --git a/.DS_Store b/.DS_Store
index ff7ad87..37a22f3 100644
--- a/.DS_Store
+++ b/.DS_Store
Binary files differ
diff --git a/src/Sgis.js b/src/Sgis.js
index 1165a85..20e2d1a 100644
--- a/src/Sgis.js
+++ b/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鎵╁睍浠ｇ爜
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index 6d4ce8c..128a827 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/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)
}
/**
* 寰�鍦板浘涓姞鍏ヤ竴涓猈MS鏈嶅姟
* @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){
diff --git a/src/components/plugin/wmts_plugins.js b/src/components/plugin/wmts_plugins.js
new file mode 100644
index 0000000..7c6e370
--- /dev/null
+++ b/src/components/plugin/wmts_plugins.js
@@ -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
+}
diff --git a/src/conf/MapConfig.js b/src/conf/MapConfig.js
index ffca88b..731f76d 100644
--- a/src/conf/MapConfig.js
+++ b/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
+ }
+ }
]
}
diff --git a/src/views/MapTemplate.vue b/src/views/MapTemplate.vue
index 6ee012d..9dfea6c 100644
--- a/src/views/MapTemplate.vue
+++ b/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
--
Gitblit v1.8.0