增加矢量瓦片面绘制示例

songyumeng · songyumeng · commit c8e1911ff43b · 2018-06-28T09:54:15.000+08:00
diff --git a/dist/openlayers/iclient9-openlayers-es6.js b/dist/openlayers/iclient9-openlayers-es6.js
@@ -1275,7 +1275,7 @@ module.exports = function(){try{return elasticsearch}catch(e){return {}}}();
   }
 
   function Promise(fn) {
-    if (typeof this !== 'object') throw new TypeError('Promises must be constructed via new');
+    if (!(this instanceof Promise)) throw new TypeError('Promises must be constructed via new');
     if (typeof fn !== 'function') throw new TypeError('not a function');
     this._state = 0;
     this._handled = false;
@@ -1399,9 +1399,9 @@ module.exports = function(){try{return elasticsearch}catch(e){return {}}}();
   };
 
   Promise.all = function (arr) {
-    var args = Array.prototype.slice.call(arr);
-
     return new Promise(function (resolve, reject) {
+      if (!arr || typeof arr.length === 'undefined') throw new TypeError('Promise.all accepts an array');
+      var args = Array.prototype.slice.call(arr);
       if (args.length === 0) return resolve([]);
       var remaining = args.length;
 
@@ -77810,6 +77810,8 @@ class MapboxStyles_MapboxStyles extends external_ol_default.a.Observable {
         if (mbStyle.sprite) {
             const spriteScale = window.devicePixelRatio >= 1.5 ? 0.5 : 1;
             const sizeFactor = spriteScale == 0.5 ? '@2x' : '';
+            //兼容一下iServer 等iServer修改
+            mbStyle.sprite = mbStyle.sprite.replace('@2x', "");
             const spriteUrl = this._toSpriteUrl(mbStyle.sprite, this.path, sizeFactor + '.json');
             FetchRequest.get(spriteUrl)
                 .then(response =>
diff --git a/dist/openlayers/iclient9-openlayers-es6.min.js b/dist/openlayers/iclient9-openlayers-es6.min.js
diff --git a/dist/openlayers/iclient9-openlayers.js b/dist/openlayers/iclient9-openlayers.js
@@ -61990,6 +61990,8 @@ var MapboxStyles = exports.MapboxStyles = function (_ol$Observable) {
             if (mbStyle.sprite) {
                 var spriteScale = window.devicePixelRatio >= 1.5 ? 0.5 : 1;
                 var sizeFactor = spriteScale == 0.5 ? '@2x' : '';
+                //兼容一下iServer 等iServer修改
+                mbStyle.sprite = mbStyle.sprite.replace('@2x', "");
                 var spriteUrl = this._toSpriteUrl(mbStyle.sprite, this.path, sizeFactor + '.json');
                 _iclientCommon.FetchRequest.get(spriteUrl).then(function (response) {
                     return response.json();
@@ -69322,7 +69324,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 /* 359 */
 /***/ (function(module) {
 
-module.exports = {"_from":"proj4@2.4.4","_id":"proj4@2.4.4","_inBundle":false,"_integrity":"sha512-yo6qTpBQXnxhcPopKJeVwwOBRzUpEa3vzSFlr38f5mF4Jnfb6NOL/ePIomefWiZmPgkUblHpcwnWVMB8FS3GKw==","_location":"/proj4","_phantomChildren":{},"_requested":{"type":"version","registry":true,"raw":"proj4@2.4.4","name":"proj4","escapedName":"proj4","rawSpec":"2.4.4","saveSpec":null,"fetchSpec":"2.4.4"},"_requiredBy":["#USER","/"],"_resolved":"https://registry.npmjs.org/proj4/-/proj4-2.4.4.tgz","_shasum":"c03d825e380f6850a4a7af5d20d365f6b72c4042","_spec":"proj4@2.4.4","_where":"F:\\dev\\iClient-JavaScript","author":"","bugs":{"url":"https://github.com/proj4js/proj4js/issues"},"bundleDependencies":false,"contributors":[{"name":"Mike Adair","email":"madair@dmsolutions.ca"},{"name":"Richard Greenwood","email":"rich@greenwoodmap.com"},{"name":"Calvin Metcalf","email":"calvin.metcalf@gmail.com"},{"name":"Richard Marsden","url":"http://www.winwaed.com"},{"name":"T. Mittan"},{"name":"D. Steinwand"},{"name":"S. Nelson"}],"dependencies":{"mgrs":"1.0.0","wkt-parser":"^1.2.0"},"deprecated":false,"description":"Proj4js is a JavaScript library to transform point coordinates from one coordinate system to another, including datum transformations.","devDependencies":{"chai":"~1.8.1","curl":"git://github.com/cujojs/curl.git","grunt":"^1.0.1","grunt-cli":"~0.1.13","grunt-contrib-connect":"~0.6.0","grunt-contrib-jshint":"~1.1.0","grunt-contrib-uglify":"~0.11.1","grunt-mocha-phantomjs":"~0.4.0","grunt-rollup":"^1.0.1","istanbul":"~0.2.4","mocha":"~1.17.1","rollup":"^0.41.4","rollup-plugin-json":"^2.0.1","rollup-plugin-node-resolve":"^2.0.0","tin":"~0.4.0"},"directories":{"test":"test","doc":"docs"},"homepage":"https://github.com/proj4js/proj4js#readme","license":"MIT","main":"dist/proj4-src.js","module":"lib/index.js","name":"proj4","repository":{"type":"git","url":"git://github.com/proj4js/proj4js.git"},"scripts":{"build":"grunt","build:tmerc":"grunt build:tmerc","test":"npm run build && istanbul test _mocha test/test.js"},"version":"2.4.4"};
+module.exports = {"_from":"proj4@2.4.4","_id":"proj4@2.4.4","_inBundle":false,"_integrity":"sha1-wD2CXjgPaFCkp69dINNl9rcsQEI=","_location":"/proj4","_phantomChildren":{},"_requested":{"type":"version","registry":true,"raw":"proj4@2.4.4","name":"proj4","escapedName":"proj4","rawSpec":"2.4.4","saveSpec":null,"fetchSpec":"2.4.4"},"_requiredBy":["/"],"_resolved":"http://registry.npm.taobao.org/proj4/download/proj4-2.4.4.tgz","_shasum":"c03d825e380f6850a4a7af5d20d365f6b72c4042","_spec":"proj4@2.4.4","_where":"E:\\2018\\git\\iClient-JavaScript","author":"","bugs":{"url":"https://github.com/proj4js/proj4js/issues"},"bundleDependencies":false,"contributors":[{"name":"Mike Adair","email":"madair@dmsolutions.ca"},{"name":"Richard Greenwood","email":"rich@greenwoodmap.com"},{"name":"Calvin Metcalf","email":"calvin.metcalf@gmail.com"},{"name":"Richard Marsden","url":"http://www.winwaed.com"},{"name":"T. Mittan"},{"name":"D. Steinwand"},{"name":"S. Nelson"}],"dependencies":{"mgrs":"1.0.0","wkt-parser":"^1.2.0"},"deprecated":false,"description":"Proj4js is a JavaScript library to transform point coordinates from one coordinate system to another, including datum transformations.","devDependencies":{"chai":"~1.8.1","curl":"git://github.com/cujojs/curl.git","grunt":"^1.0.1","grunt-cli":"~0.1.13","grunt-contrib-connect":"~0.6.0","grunt-contrib-jshint":"~1.1.0","grunt-contrib-uglify":"~0.11.1","grunt-mocha-phantomjs":"~0.4.0","grunt-rollup":"^1.0.1","istanbul":"~0.2.4","mocha":"~1.17.1","rollup":"^0.41.4","rollup-plugin-json":"^2.0.1","rollup-plugin-node-resolve":"^2.0.0","tin":"~0.4.0"},"directories":{"test":"test","doc":"docs"},"homepage":"https://github.com/proj4js/proj4js#readme","license":"MIT","main":"dist/proj4-src.js","module":"lib/index.js","name":"proj4","repository":{"type":"git","url":"git://github.com/proj4js/proj4js.git"},"scripts":{"build":"grunt","build:tmerc":"grunt build:tmerc","test":"npm run build && istanbul test _mocha test/test.js"},"version":"2.4.4"};
 
 /***/ }),
 /* 360 */
@@ -96954,7 +96956,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
   }
 
   function Promise(fn) {
-    if (_typeof(this) !== 'object') throw new TypeError('Promises must be constructed via new');
+    if (!(this instanceof Promise)) throw new TypeError('Promises must be constructed via new');
     if (typeof fn !== 'function') throw new TypeError('not a function');
     this._state = 0;
     this._handled = false;
@@ -97078,9 +97080,9 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
   };
 
   Promise.all = function (arr) {
-    var args = Array.prototype.slice.call(arr);
-
     return new Promise(function (resolve, reject) {
+      if (!arr || typeof arr.length === 'undefined') throw new TypeError('Promise.all accepts an array');
+      var args = Array.prototype.slice.call(arr);
       if (args.length === 0) return resolve([]);
       var remaining = args.length;
 
diff --git a/dist/openlayers/iclient9-openlayers.min.js b/dist/openlayers/iclient9-openlayers.min.js
diff --git a/dist/openlayers/include-openlayers.js b/dist/openlayers/include-openlayers.js
@@ -87,7 +87,9 @@
         if (inArray(includes, 'animatedclusterlayer')) {
             inputScript("http://iclient.supermap.io/libs/openlayers/plugins/animatedclusterlayer/animatedclusterlayer.js");
         }
-
+        if (inArray(includes, 'proj4')) {
+            inputScript("https://cdn.bootcss.com/proj4js/2.4.4/proj4.js");
+        }
         if (inArray(includes, 'layerswitcher')) {
             inputCSS("http://iclient.supermap.io/libs/openlayers/plugins/ol-layerswitcher/2.0.0/ol-layerswitcher.css");
             inputScript("http://iclient.supermap.io/libs/openlayers/plugins/ol-layerswitcher/2.0.0/ol-layerswitcher.js");
diff --git a/examples/locales/en-US/resources.js b/examples/locales/en-US/resources.js
@@ -419,7 +419,8 @@ window.examplesResources = {
         "title_mvtVectorLayer4326": "iServer MVT VectorTile (WGS84)",
         "title_mvtVectorLayer_mapboxStyle": "Style Switch",
         "title_mvtVectorLayer_mapboxStyle_4326": "OSM Style(MVT WGS84)",
-        "title_mvtVectorLayer_mapboxStyle_lineStyle": "lineStyle edit",
+        "title_mvtVectorLayer_mapboxStyle_lineStyle": "LineStyle Edit",
+        "title_mvtVectorLayer_mapboxStyle_landuse": "Land Use",
         "title_onlineSecurity": "Examples of Online SecurityManager",
         "title_onlineWebMap": "Be a backpacker in 2014",
         "title_osmBuildings": "Buildings Stereoscopic Effect of OpenLayers",
diff --git a/examples/locales/zh-CN/resources.js b/examples/locales/zh-CN/resources.js
@@ -364,6 +364,7 @@ window.examplesResources = {
         "title_mvtVectorLayer_mapboxStyle": "OSM风格(MVT WGS84)",
         "title_mvtVectorLayer_mapboxStyle_4326": "风格动态切换",
         "title_mvtVectorLayer_mapboxStyle_lineStyle": "线样式编辑",
+        "title_mvtVectorLayer_mapboxStyle_landuse": "土地利用",
         "title_onlineSecurity": "Online SecurityManager使用示例",
         "title_onlineWebMap": "2014当了一回背包客",
         "title_osmBuildings": "openlayers 建筑立体效果",
diff --git a/examples/openlayers/config.js b/examples/openlayers/config.js
@@ -817,8 +817,16 @@ var exampleConfig = {
                         localIgnore:true,
                         thumbnail: "mvtvectorlayer_mbstyle_linestyle.png",
                         fileName: "mvtvectorlayer_mbstyle_linestyle"
+                    },
+                    {
+                        name: "土地利用",
+                        name_en: "Land Use",
+                        localIgnore:true,
+                        thumbnail: "mvtvectorlayer_mbstyle_landuse.png",
+                        fileName: "mvtvectorlayer_mbstyle_landuse"
                     }
 
+
                 ]
             },
             "themeLayer": {
diff --git a/examples/openlayers/img/mvtvectorlayer_mbstyle_landuse.png b/examples/openlayers/img/mvtvectorlayer_mbstyle_landuse.png
diff --git a/examples/openlayers/mvtvectorlayer_mbstyle_4326.html b/examples/openlayers/mvtvectorlayer_mbstyle_4326.html
@@ -51,6 +51,7 @@
             return 1 / (scale * 96 * inchPerMeter * meterPerMapUnitValue);
         };
         var vectorLayer;
+        //通过缓存sci文件已知第10级的比例尺是0.00000346145499464224，计算0到16级的分辨率
         var resolutions = getResolutions(10, 0.00000346145499464224, 0, 16);
         var map = new ol.Map({
             target: 'map',
diff --git a/examples/openlayers/mvtvectorlayer_mbstyle_beijing.html b/examples/openlayers/mvtvectorlayer_mbstyle_beijing.html
@@ -190,6 +190,8 @@
             source: 'vector-tiles',
             map: map
         }
+        overlay.setPosition(undefined);
+        closer.blur();
         if (styles[styleID]) {
             options.style = styles[styleID];
             targetStyle = new ol.supermap.MapboxStyles(options);
diff --git a/examples/openlayers/mvtvectorlayer_mbstyle_landuse.html b/examples/openlayers/mvtvectorlayer_mbstyle_landuse.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8">
+    <title data-i18n="resources.title_mvtVectorLayer_mapboxStyle_landuse"></title>
+    <!--<script type="text/javascript" src="../../dist/openlayers/include-openlayers.js"></script>-->
+    <link href="https://cdn.bootcss.com/openlayers/4.6.5/ol-debug.css" rel="stylesheet">
+    <!--当前示例使用 ol-debug 原因：ol.format.MVT 默认坐标系为 3857，最新代码未更新该默认设置，需使用ol-debug，设置 defaultDataProjection 参数，以支持4326底图-->
+    <script src="https://cdn.bootcss.com/openlayers/4.6.5/ol-debug.js"></script>
+    <script type="text/javascript" src="http://iclient.supermap.io/web/libs/openlayers/plugins/ol-mapbox-style/2.11.2/olms.js"></script>
+    <script type="text/javascript" src="../../dist/openlayers/iclient9-openlayers.js"></script>
+    <script type="text/javascript" src="https://cdn.bootcss.com/proj4js/2.4.4/proj4.js"></script>
+    <style>
+        .ol-popup {
+            position: absolute;
+            background-color: rgba(0, 60, 136, 0.7);
+            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
+            padding: 10px;
+            border-radius: 5px;
+            border: 1px solid #cccccc;
+            bottom: 20px;
+            left: 10px;
+            opacity: 0;
+            transition: opacity 100ms ease-in;
+        }
+    </style>
+</head>
+
+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
+    <div id="map" style="margin:0 auto;width: 100%;height: 100%;border: 1px solid #dddddd"></div>
+    <div id="popup" class="ol-popup">
+        <div id="popup-content"></div>
+    </div>
+    <script type="text/javascript">
+        var url = (window.isLocal ? window.server : "http://54.223.164.155:8090") +
+            "/iserver/services/map-mvt-landuse/rest/maps/landuse";
+        proj4.defs("EPSG:2362",
+            "+proj=tmerc +lat_0=0 +lon_0=114 +k=1 +x_0=38500000 +y_0=0 +a=6378140 +b=6356755.288157528 +units=m +no_defs "
+        );
+        getResolutions = function (zoom, scale, targetMinZoom, targetMaxZoom) {
+            var res = scaleToResolution(scale);
+            var minRes = res * Math.pow(2, zoom - targetMinZoom);
+            var resolutions = [];
+            for (var index = 0; index < targetMaxZoom - targetMinZoom + 1; index++) {
+                resolutions.push(minRes / Math.pow(2, index));
+            }
+            return resolutions;
+
+        }
+        scaleToResolution = function (scale) {
+            var inchPerMeter = 1 / 0.0254;
+            return 1 / (scale * 96 * inchPerMeter);
+        };
+        var vectorLayer;
+        //通过缓存sci文件已知第9级的比例尺是0.00000346726346971252，计算0到16级的分辨率
+        var resolutions = getResolutions(9, 0.00000346726346971252, 0, 16);
+        var projection = ol.proj.get('EPSG:2362');
+        projection.setExtent([32876993.777095847, -10001970.421227315, 52880934.619550481, 10001970.421227315])
+        var map = new ol.Map({
+            target: 'map',
+            view: new ol.View({
+                center: [37981118.1854434, 2645345.86991791],
+                zoom: 13,
+                minZoom: 11,
+                maxZoom: 15,
+                projection: projection,
+                resolutions: resolutions
+            })
+        });
+        var container = document.getElementById('popup');
+        var content = document.getElementById('popup-content');
+        info = new ol.control.Control({
+            element: container
+        });
+        info.setMap(map);
+        map.addControl(info);
+        var style = new ol.supermap.MapboxStyles({
+            map: map,
+            url: url,
+            source: 'landuse',
+            resolutions: resolutions
+        })
+        style.on('styleloaded', function () {
+            vectorLayer = new ol.layer.VectorTile({
+                //设置避让参数
+                declutter: true,
+                source: new ol.source.VectorTileSuperMapRest({
+                    url: url,
+                    projection: projection,
+                    tileGrid: new ol.tilegrid.TileGrid({
+                        resolutions: resolutions,
+                        origin: [32876993.777095847, 10001970.421227315],
+                        tileSize: 512
+                    }),
+                    tileType: 'ScaleXY',
+                    format:  new ol.format.MVT()
+                }),
+                style: style.getStyleFunction()
+            });
+            map.addLayer(vectorLayer);
+        })
+    </script>
+</body>
+
+</html>
diff --git a/src/openlayers/overlay/vectortile/MapboxStyles.js b/src/openlayers/overlay/vectortile/MapboxStyles.js
@@ -157,6 +157,8 @@ export class MapboxStyles extends ol.Observable {
         if (mbStyle.sprite) {
             const spriteScale = window.devicePixelRatio >= 1.5 ? 0.5 : 1;
             const sizeFactor = spriteScale == 0.5 ? '@2x' : '';
+            //兼容一下iServer 等iServer修改
+            mbStyle.sprite = mbStyle.sprite.replace('@2x', "");
             const spriteUrl = this._toSpriteUrl(mbStyle.sprite, this.path, sizeFactor + '.json');
             FetchRequest.get(spriteUrl)
                 .then(response =>
