'20191216'

@@ -2,7 +2,7 @@
  * @Author: jiangbotao
  * @Date: 2019-12-13 23:53:57
  * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-15 20:55:42
+ * @LastEditTime: 2019-12-16 12:57:27
  * @FilePath: \supermapvue\src\components\menu\MyMenu.vue
  -->
 <template>
@@ -18,6 +18,7 @@
             <a-menu-item key="1_3"><router-link :to="'/mvt'">矢量瓦片</router-link></a-menu-item>
             <a-menu-item key="1_4"><router-link :to="'/measure'">地图量测</router-link></a-menu-item>
             <a-menu-item key="1_5"><router-link :to="'/mvt_wz'">本地矢量瓦片</router-link></a-menu-item>
+            <a-menu-item key="1_6"><router-link :to="'/mvt_wzdemo'">温州Demo</router-link></a-menu-item>
         </a-sub-menu>
         <a-sub-menu key="sub2">
             <span slot="title"><a-icon type="team" /><span>要素查询</span></span>

@@ -2,7 +2,7 @@
  * @Author: jiangbotao
  * @Date: 2019-12-10 22:15:53
  * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-15 22:59:50
+ * @LastEditTime: 2019-12-16 13:13:06
  * @FilePath: \supermapvue\src\components\vt\Map_wz.vue
  -->
 <template>

+<!--
+ * 使用CGCS2000发布温州地图
+ * @Author: jiangbotao
+ * @Date: 2019-12-10 22:15:53
+ * @LastEditors: jiangbotao
+ * @LastEditTime: 2019-12-16 13:12:16
+ * @FilePath: \supermapvue\src\components\vt\Map_wz.vue
+ -->
+<template>
+    <div >
+        <div id="map"></div>
+    </div>
+</template>
+
+<script>
+import mapboxgl from 'mapbox-gl';
+import { Logo, FeatureService, QueryService } from '@supermap/iclient-mapboxgl';
+
+export default {
+    name: 'MVT',
+    data () {
+        return {
+            map: null
+        }
+    },
+    mounted(){ 
+        this.map = new mapboxgl.Map({
+            container: 'map', // container id
+            style: 
+                'http://127.0.0.1:8090/iserver/services/map-mvt-TDT/rest/maps/TDT/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
+            center: [120.86813445410331, 27.82247481387501],
+            crs: 'EPSG:4490',       // 注意使用非3857的服务时，必须使用crs来确认坐标系才能显示地图
+            minZoom: 8,
+            maxZoom: 13,
+            zoom: 8,
+            // pitch: 45,
+            // bearing: -10
+        });
+        this.map.addControl(new mapboxgl.NavigationControl(), 'top-left');
+        var __this = this;
+        this.map.on('load', function () {
+            // console.log(map.getStyle().sources);
+            // console.log(map.getStyle().layers);
+            var dataUrl = 'http://127.0.0.1:8090/iserver/services/data-wzmap/rest/data/';
+            var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
+                queryParameter: {
+                    name: "point2",
+                    attributeFilter: "SMID > 0",
+                },
+                datasetNames: ["YJDB:pt1"],
+                maxFeatures: 1000,
+                toIndex: -1
+            });
+            var featureService = new mapboxgl.supermap.FeatureService(dataUrl);
+            var features = null;
+            
+            featureService.getFeaturesBySQL(sqlParam, function (serviceResult) {
+                features = serviceResult.result.features;
+                console.log(features);
+                
+                __this.map.addSource("queryDatas", {
+                    "type": "geojson",
+                    "data": features
+                });
+                
+                __this.map.addLayer({
+                    "id": "queryDatasLayer",
+                    "type": "circle",
+                    "source": "queryDatas",
+                    "paint": {
+                        'circle-radius': 4,
+                        'circle-color': [
+                            'match',
+                            ['get', 'TYPE'],
+                            'A',
+                            '#fbb03b',
+                            'B',
+                            '#223b53',
+                            'C',
+                            '#e55e5e',
+                            'D',
+                            '#3bb2d0',
+                            /* other */ '#ccc'
+                        ],
+                        'circle-opacity': 1.0,
+                        "circle-stroke-width": 2,
+                        "circle-stroke-color": "#007cbf",
+                        "circle-stroke-opacity": 0.7
+                    }
+                });
+                var popup = new mapboxgl.Popup({
+                    anchor: 'bottom',
+                    closeButton: false,
+                    offset: {
+                        'bottom': [0, -20],
+                    }
+                });
+                __this.map.on('mousemove', "queryDatasLayer", function (e) {
+                    popup.setLngLat(e.lngLat).setHTML(e.features[0].properties.NAME+':'+ e.features[0].properties.PRICE).addTo(__this.map);
+                    __this.map.getCanvas().style.cursor = 'pointer';
+
+                });
+                __this.map.on('mouseout', "queryDatasLayer", function () {
+                    __this.map.getCanvas().style.cursor = '';
+                    popup.remove();
+                })
+            });
+        });
+    }
+}
+</script>
+
+<style scoped>
+#map {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background-color: white
+}
+</style>
\ No newline at end of file

@@ -2,7 +2,7 @@
  * @Author: jiangbotao
  * @Date: 2019-12-12 17:40:15
  * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-16 01:20:35
+ * @LastEditTime: 2019-12-16 13:14:28
  * @FilePath: \supermapvue\src\main.js
  */
 import Vue from 'vue'

@@ -111,6 +111,11 @@ export default new Router({
       path: '/mvt_wz',
       name: 'Theme_wz',
       component: () => import('@/components/vt/Map_wz')
+    },
+    {
+      path: '/mvt_wzdemo',
+      name: 'Theme_wzdemo',
+      component: () => import('@/components/vt/Map_wzdemo')
     }
   ]
 })