【范例】 新增 webmap-vue 范例 review by zhurc

liqian7 · liqian7 · commit 6306b16adfa4 · 2019-01-18T09:41:21.000+08:00
diff --git a/examples/locales/en-US/resources.js b/examples/locales/en-US/resources.js
@@ -522,7 +522,7 @@ window.examplesResources = {
         "title_ChinaEarthquakeHeat": 'China Earthquake',
         "title_ChinaEarthquakeHeatWGS84": 'China Earthquake WGS84',
         "title_ChinaEarthquakeHeatClient": 'China Earthquake(Classic) WGS84',
-
+        "title_webMap_Vue": 'WebMap(Vue)',
 
         "text_code": "Forward Match",
         "text_decode": "Reverse Match",
diff --git a/examples/locales/zh-CN/resources.js b/examples/locales/zh-CN/resources.js
@@ -470,7 +470,8 @@ window.examplesResources = {
         "title_ChinaEarthquakeHeat": '中国地震数据',
         "title_ChinaEarthquakeHeatWGS84": '中国地震数据_WGS84',
         "title_ChinaEarthquakeHeatClient": '中国地震数据（Classic）_WGS84',
-
+        "title_webMap_Vue": 'WebMap(Vue)',
+        
         "text_code": "正向匹配",
         "text_decode": "反向匹配",
         "text_address": "地址　　　",
diff --git a/examples/mapboxgl/config.js b/examples/mapboxgl/config.js
@@ -292,44 +292,44 @@ var exampleConfig = {
     "iPortal": {
         name: "iPortal",
         name_en: "iPortal",
-        version: "9.1.1",
+        version: "10.x.x",
         content: {
             "ip_map": {
                 name: "地图",
                 name_en: "iPortal Web map",
-                version: "9.1.1",
+                version: "10.x.x",
                 content: [{
                     name: "分段专题图",
                     name_en: "Range",
-                    version: "9.1.1",
+                    version: "10.x.x",
                     thumbnail: "iPortalWebmap_range.png",
                     fileName: "iPortalWebmap_range"
                 },
                 {
                     name: "单值专题图",
                     name_en: "Unique",
-                    version: "9.1.1",
+                    version: "10.x.x",
                     thumbnail: "iPortalWebmap_unique.png",
                     fileName: "iPortalWebmap_unique"
                 },
                 {
                     name: "标签专题图",
                     name_en: "Label",
-                    version: "9.1.1",
+                    version: "10.x.x",
                     thumbnail: "iPortalWebmap_label.png",
                     fileName: "iPortalWebmap_label"
                 },
                 {
                     name: "热力图",
                     name_en: "Heat map",
-                    version: "9.1.1",
+                    version: "10.x.x",
                     thumbnail: "iPortalWebmap_heat.png",
                     fileName: "iPortalWebmap_heat"
                 },
                 {
                     name: "点样式",
                     name_en: "Point style",
-                    version: "9.1.1",
+                    version: "10.x.x",
                     thumbnail: "iPortalWebmap_unicode.png",
                     fileName: "iPortalWebmap_unicode"
                 }]
@@ -1062,6 +1062,17 @@ var exampleConfig = {
                         fileName: "widgets_chart_iptl"
                     } 
                 ]
+            },
+            "widgetsAdvanced": {
+                name: "扩展",
+                name_en: "Advanced",
+                content: [{
+                    name: "WebMap(Vue)",
+                    name_en: "WebMap(Vue)",
+                    version: "10.X.X",
+                    thumbnail: "iPortalWebmap_unique.png",
+                    fileName: "iportalWebMap_vue"
+                }]
             }
         }
     },
diff --git a/examples/mapboxgl/iportalWebMap_vue.html b/examples/mapboxgl/iportalWebMap_vue.html
@@ -0,0 +1,83 @@
+<!--********************************************************************
+* Copyright© 2000 - 2018 SuperMap Software Co.Ltd. All rights reserved.
+*********************************************************************-->
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title data-i18n="resources.title_webMap_Vue"></title>
+    <script type="text/javascript" include="vue" src="../js/include-web.js"></script>
+    <script type="text/javascript" include='mapbox-gl-enhance' src="../../dist/mapboxgl/include-mapboxgl.js"></script>
+</head>
+<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
+    <div id='app' style="margin:0 auto;width: 100%;height: 100%">
+        <div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
+        <webmap server-id='1649097980' :web-map-options="webMapOptions" @add-layers-succeed="addLayersSucceeded"></webmap>
+    </div>
+    <script>
+
+        var webMapComponent = {
+            props: {
+                serverId: {
+                    type: String,
+                    required: true
+                },
+                webMapOptions: {
+                    type: Object
+                }
+            },
+            template: `<div v-if="!webMapOptions.target" id="map"></div>`,
+            mounted() {
+                var webmap = this.initializeWebMap();
+                this.webmap = webmap;
+                this.registerEvents(webmap);
+            },
+            methods: {
+                initializeWebMap() {
+                    var webmap = new mapboxgl.supermap.WebMap(this.serverId, this.webMapOptions);
+                    return webmap;
+                },
+                registerEvents(webmap) {
+                    var _this = this;
+                    webmap.on("getmapfailed", function (e) {
+                        _this.$emit("get-map-failed", e);
+                    });
+                    webmap.on("getwmtsfailed", function (e) {
+                        _this.$emit("get-wmts-failed", e);
+                    });
+                    webmap.on("getlayersfailed", function (e) {
+                        _this.$emit("get-layers-failed", e);
+                    });
+                    webmap.on("getfeaturesfailed", function (e) {
+                        _this.$emit("get-features-failed", e);
+                    });
+                    webmap.on("addlayerssucceeded", function (e) {
+                        _this.$emit("add-layers-succeed", e);
+                    });
+                },
+                beforeDestroy() {
+                    this.webmap = null;
+                }
+            }
+        }
+
+        Vue.component('webmap', webMapComponent);
+
+        new Vue({
+            el: '#app',
+            data: {
+                webMapOptions: {
+                    target: 'map',
+                    server: 'http://support.supermap.com.cn:8092'
+                },
+            },
+            methods: {
+                addLayersSucceeded(e) {
+                    return e.layers;
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>
