补充leaflet自定义图层错级显示示例及其说明

潘卓然-中地数码台式机 · 潘卓然-中地数码台式机 · commit 0de6c37de319 · 2018-12-27T11:54:21.000+08:00
diff --git a/config/config-leaflet.js b/config/config-leaflet.js
@@ -303,6 +303,15 @@ var config = {
           folder: "mapdisplay",
           leaffolder: true,
           childs: [
+            {
+              name: "瓦片错级显示",
+              file: "customlayer",
+              diffcult: "1",
+              detail:"针对自定义的瓦片裁图方式，进行个性化配置。",
+              icon: "customlayer.png",
+              update: "最后更新时间：2018-12-27",
+              person: "基础平台/创新中心-潘卓然"
+            },
             {
               name: "百度炫彩地图-3857",
               file: "baidumap",
@@ -321,7 +330,7 @@ var config = {
               update: "最后更新时间：2018-05-23"
             },
             {
-              name: "瓦片地图显示-4326-BUG",
+              name: "瓦片地图显示-4326",
               file: "tilemapdisplay",
               diffcult: "3",
               detail: "瓦片地图显示",
diff --git a/demo/leaflet/example/map/mapdisplay/customlayer.htm b/demo/leaflet/example/map/mapdisplay/customlayer.htm
@@ -0,0 +1,56 @@
+﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+    <title>瓦片错级显示</title>
+    <script src="../../libs/zondyclient/include-leaflet-local.js"></script>
+    <script type="text/javascript">
+        /**
+         * @description 自定义瓦片图层,这里仅作示例参考，请根据自己的错级逻辑修改
+         * @see Zondy.Map.MapTileLayer
+         */
+        var CustomTileLayer = L.TileLayer.extend({
+            /**
+             * @description 根据行列号获取瓦片地址
+             * @param coords - {Object} 行列号 x,y,z
+             * @return {string} 瓦片地址
+             */
+            getTileUrl: function (coords) {
+                var tileUrl = 'http://localhost:6163/igs/rest/mrms/tile/株洲市/{z}/{y}/{x}';
+                //如果下面需要错一级则 coords.z = coords.z +1
+                tileUrl = tileUrl.replace('{x}', coords.x.toString()).replace('{y}', coords.y.toString()).replace(
+                    '{z}', coords.z.toString());
+                return tileUrl;
+            }
+        });
+
+        //显示地图
+        function init() {
+            var map = L.map('leaf_map', {
+                //参考坐标系，默认是墨卡托坐标系（EPSG3857），EPSG4326为经纬度坐标系
+                crs: L.CRS.EPSG4326,
+                center: [0, 0],
+                minZoom: 1,
+                maxZoom: 5,
+                zoom: 2,
+                //限制显示地理范围
+                maxBounds: L.latLngBounds(L.latLng(-180, -180), L.latLng(180, 180))
+            });
+
+            //添加自定义瓦片图层,这里我直接使用公司内部封装好的的天地图的类
+            //var layer = new CustomTileLayer().addTo(map);
+            var layer = new Zondy.Map.TDTLayer({
+                layerType: 'vec',
+                minZoom: 0,
+                maxZoom: 5
+            }).addTo(map);
+        }
+    </script>
+</head>
+
+<body onload="init()">
+    <div id="leaf_map" style="width: 100%; height:700px;">
+    </div>
+</body>
+
+</html>
diff --git a/demo/leaflet/gallery/map/mapdisplay/customlayer.png b/demo/leaflet/gallery/map/mapdisplay/customlayer.png
diff --git a/demo/leaflet/markdown/map/mapdisplay/customlayer.md b/demo/leaflet/markdown/map/mapdisplay/customlayer.md
@@ -0,0 +1,74 @@
+### 情况说明
+由于各个事业单位对天地图，或者其他世界地图的标准不一致，导致自己裁剪的级别可能与标准的差一级或者错位一级
+
+### 解决方案
+自定义图层 拓展一个TileLayer， `并重写 getTileUrl函数`
+
+``` js
+var TianDiTuLayer = window.L.TileLayer.extend({    
+    layerLabelMap: {
+        "vec": "cva",
+        "ter": "cta",
+        "img": "cia"
+    },
+    layerZoomMap: {
+        "vec": 18,
+        "ter": 14,
+        "img": 18
+    },
+     options: {
+        layerType: "vec",    //(vec:矢量图层，vec:矢量标签图层，img:影像图层,cia:影像标签图层，ter:地形,cta:地形标签图层)
+        isLabel: false,
+        url: "http://t{s}.tianditu.com/{layer}_{proj}/wmts?",
+        zoomOffset: 1,
+        dpi: 96,
+        style: "default",
+        format: "tiles",
+        subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
+        version: '1.0.0',
+        tilematrixSet: '',   
+        tileSize: 256,
+        matrixIds: null,
+        layer: '',
+        attribution: "天地图"
+    },
+
+    initialize: function (options) {
+        options = options || {};
+        window.L.setOptions(this, options);
+        this.options.layer = this.options.isLabel ? this.layerLabelMap[this.options.layerType] : this.options.layerType;
+        this.options.maxZoom = this.layerZoomMap[this.options.layerType];
+
+        this._url = this.options.url;
+        window.L.setOptions(this, this.options);
+        window.L.stamp(this);
+    },
+    onAdd: function (map) {
+        this._crs = this.options.crs || map.options.crs;
+        this.options.tilematrixSet = this._crs.code === "EPSG:4326" ? "c" : "w";
+        this._url = this._url.replace("{layer}", this.options.layer).replace("{proj}", this.options.tilematrixSet);
+        window.L.TileLayer.prototype.onAdd.call(this, map);
+    },
+    getTileUrl: function (coords) { // (Point, Number) -> String
+        var zoom = this._getZoomForUrl();
+        var ident = this.options.matrixIds ? this.options.matrixIds[zoom].identifier : zoom;
+        var url = window.L.Util.template(this._url, {s: this._getSubdomain(coords)});
+        var obj = {
+            service: 'WMTS',
+            request: 'GetTile',
+            version: this.options.version,
+            style: this.options.style,
+            tilematrixSet: this.options.tilematrixSet,
+            format: this.options.format,
+            width: this.options.tileSize,
+            height: this.options.tileSize,
+            layer: this.options.layer,
+            tilematrix: ident,
+            tilerow: coords.y,
+            tilecol: coords.x
+        };
+        return url + window.L.Util.getParamString(obj, url);
+    }
+
+});
+```
