添加Openlayers对接iServer MVT 4326矢量瓦片例子

caoxinke · caoxinke · commit a43f8cfafc7f · 2017-05-23T13:56:05.000+08:00
diff --git a/examples/openlayers/config.js b/examples/openlayers/config.js
@@ -407,6 +407,11 @@ var exampleConfig = {
                         name: "默认风格(MVT)",
                         thumbnail: "mvtVectorLayer.png",
                         fileName: "mvtVectorLayer"
+                    },
+                    {
+                        name: "默认风格(MVT 4326)",
+                        thumbnail: "mvtVectorLayer4326.png",
+                        fileName: "mvtVectorLayer4326"
                     }
                 ]
             },
diff --git a/examples/openlayers/img/mvtVectorLayer4326.png b/examples/openlayers/img/mvtVectorLayer4326.png
diff --git a/examples/openlayers/mvtVectorLayer4326.html b/examples/openlayers/mvtVectorLayer4326.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>iServer MVT矢量瓦片(4326坐标系)</title>
+    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
+    <link href="http://cdn.bootcss.com/openlayers/4.0.1/ol.css" rel="stylesheet">
+</head>
+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:600px;">
+<div id="map" style="margin:0 auto;width: 100%;height: 100%;border: 1px solid #dddddd"></div>
+<script src="http://cdn.bootcss.com/openlayers/4.0.1/ol-debug.js"></script>
+<script type="text/javascript" src="../../dist/iclient9-openlayers.js"></script>
+
+<script type="text/javascript">
+    var url = "http://113.209.64.227:8090/iserver/services/map-World/rest/maps/World";
+    new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
+        var map = new ol.Map({
+            target: 'map',
+            view: new ol.View({
+                center: [0,0],
+                zoom: 2,
+                projection: 'EPSG:4326'
+            }),
+        });
+        var stylesOptions = {
+            url: url,
+            view: map.getView()
+        }
+        var vectorTileStyles = new ol.supermap.VectorTileStyles(stylesOptions);
+        var vectorTileOptions = ol.supermap.VectorTileSuperMapRest.optionsFromMapJSON(url, serviceResult.result);
+        vectorTileOptions.format = new ol.format.MVT({featureClass: ol.Feature});
+        var vectorLayer = new ol.layer.VectorTile({
+            source: new ol.supermap.VectorTileSuperMapRest(vectorTileOptions),
+            style: vectorTileStyles.getFeatureStyle
+        });
+        map.addLayer(vectorLayer);
+
+        map.on('click', function (e) {
+            map.forEachFeatureAtPixel(e.pixel, function (feature) {
+                vectorTileStyles.dispatchEvent(new ol.Collection.Event('featureSelected', {
+                    selectedId: feature.getId(),
+                    layerName: feature.getProperties().layer
+                }));
+                return true;
+            }, {hitTolerance: 5});
+            vectorLayer.changed();
+        })
+
+    });
+</script>
+</body>
+</html>

Original file line number	Diff line number	Diff line change
`@@ -407,6 +407,11 @@ var exampleConfig = {`
`407`	`407`	`name: "默认风格(MVT)",`
`408`	`408`	`thumbnail: "mvtVectorLayer.png",`
`409`	`409`	`fileName: "mvtVectorLayer"`
	`410`	`+ },`
	`411`	`+ {`
	`412`	`+ name: "默认风格(MVT 4326)",`
	`413`	`+ thumbnail: "mvtVectorLayer4326.png",`
	`414`	`+ fileName: "mvtVectorLayer4326"`
`410`	`415`	`}`
`411`	`416`	`]`
`412`	`417`	`},`