20191215

@@ -2,7 +2,7 @@
  * @Author: jiangbotao
  * @Date: 2019-12-09 23:17:48
  * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-15 18:51:41
+ * @LastEditTime: 2019-12-15 23:19:53
  * @FilePath: \mymapbox\src\components\Map3857.vue
  -->
 <template>
@@ -90,8 +90,8 @@ export default {
                             ]
                         },
                         'circle-color': { 
-                            property:'SMID',
-                            stops: [
+                            'property':'SMID',
+                            'stops': [
                                 [min,'#6879FB'],
                                 [min + 1/3*range,'#68FB75'],
                                 [min + 2/3*range, '#F94B18'], 

@@ -2,7 +2,7 @@
  * @Author: jiangbotao
  * @Date: 2019-12-10 22:15:53
  * @LastEditors: jiangbotao
- * @LastEditTime: 2019-12-15 21:21:43
+ * @LastEditTime: 2019-12-15 22:59:50
  * @FilePath: \supermapvue\src\components\vt\Map_wz.vue
  -->
 <template>
@@ -44,12 +44,11 @@ export default {
             var dataUrl = 'http://127.0.0.1:8090/iserver/services/data-China/rest/data/';
             var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
                 queryParameter: {
-                    name: "poi",
+                    name: "point2",
                     attributeFilter: "SMID > 0",
                 },
-                datasetNames: ["China:poi"],
-                targetEpsgCode:4326,
-                maxFeatures: 1500,
+                datasetNames: ["China:point2"],
+                maxFeatures: 1000,
                 toIndex: -1
             });
             var featureService = new mapboxgl.supermap.FeatureService(dataUrl);
@@ -69,22 +68,42 @@ export default {
                     "type": "circle",
                     "source": "queryDatas",
                     "paint": {
-                        'circle-radius': 2,
-                        'circle-color': '#6879FB',
-                        //     property:'value',
-                        //     stops: [
-                        //         [min,'#6879FB'],
-                        //         [min + 1/3*range,'#68FB75'],
-                        //         [min + 2/3*range, '#F94B18'], 
-                        //         [max, '#F92918']
-                        //     ]
-                        // },
+                        '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.VALUE).addTo(__this.map);
+                    __this.map.getCanvas().style.cursor = 'pointer';
+
+                });
+                __this.map.on('mouseout', "queryDatasLayer", function () {
+                    __this.map.getCanvas().style.cursor = '';
+                    popup.remove();
+                })
             });
         });
     }