Skip to content

蒋波涛 / super_mapboxgl_vue

Go to a project
Toggle navigation
Toggle navigation pinning
09470480 by unknown
Options

20191215

1 parent 1e47f312
Inline Side-by-side
Showing 6 changed files with 65 additions and 71 deletions
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: jiangbotao 2 * @Author: jiangbotao
3 * @Date: 2019-12-09 23:17:48 3 * @Date: 2019-12-09 23:17:48
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-15 14:19:14 5 * @LastEditTime: 2019-12-15 18:51:41
6 * @FilePath: \mymapbox\src\components\Map3857.vue 6 * @FilePath: \mymapbox\src\components\Map3857.vue
7 --> 7 -->
8 <template> 8 <template>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: jiangbotao 2 * @Author: jiangbotao
3 * @Date: 2019-12-10 14:16:04 3 * @Date: 2019-12-10 14:16:04
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-10 14:56:09 5 * @LastEditTime: 2019-12-15 18:42:18
6 * @FilePath: \mymapbox\src\components\Map_filter_sql.vue 6 * @FilePath: \mymapbox\src\components\Map_filter_sql.vue
7 --> 7 -->
8 <template> 8 <template>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: jiangbotao 2 * @Author: jiangbotao
3 * @Date: 2019-12-13 23:53:57 3 * @Date: 2019-12-13 23:53:57
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-15 15:28:22 5 * @LastEditTime: 2019-12-15 18:39:11
6 * @FilePath: \supermapvue\src\components\menu\MyMenu.vue 6 * @FilePath: \supermapvue\src\components\menu\MyMenu.vue
7 --> 7 -->
8 <template> 8 <template>
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
17 <a-menu-item key="1_2"><router-link :to="'/rastertile'">栅格瓦片</router-link></a-menu-item> 17 <a-menu-item key="1_2"><router-link :to="'/rastertile'">栅格瓦片</router-link></a-menu-item>
18 <a-menu-item key="1_3"><router-link :to="'/mvt'">矢量瓦片</router-link></a-menu-item> 18 <a-menu-item key="1_3"><router-link :to="'/mvt'">矢量瓦片</router-link></a-menu-item>
19 <a-menu-item key="1_4"><router-link :to="'/measure'">地图量测</router-link></a-menu-item> 19 <a-menu-item key="1_4"><router-link :to="'/measure'">地图量测</router-link></a-menu-item>
20 <a-menu-item key="1_5"><router-link :to="'/mvt_wz'">本地矢量瓦片</router-link></a-menu-item>
20 </a-sub-menu> 21 </a-sub-menu>
21 <a-sub-menu key="sub2"> 22 <a-sub-menu key="sub2">
22 <span slot="title"><a-icon type="team" /><span>要素查询</span></span> 23 <span slot="title"><a-icon type="team" /><span>要素查询</span></span>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: jiangbotao 2 * @Author: jiangbotao
3 * @Date: 2019-12-10 14:16:04 3 * @Date: 2019-12-10 14:16:04
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-10 14:29:45 5 * @LastEditTime: 2019-12-15 18:15:04
6 * @FilePath: \mymapbox\src\components\Map_filter_sql.vue 6 * @FilePath: \mymapbox\src\components\Map_filter_sql.vue
7 --> 7 -->
8 <template> 8 <template>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: jiangbotao 2 * @Author: jiangbotao
3 * @Date: 2019-12-10 22:15:53 3 * @Date: 2019-12-10 22:15:53
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-12 21:07:20 5 * @LastEditTime: 2019-12-15 19:21:09
6 * @FilePath: \supermapvue\src\components\vt\Map_wz.vue 6 * @FilePath: \supermapvue\src\components\vt\Map_wz.vue
7 --> 7 -->
8 <template> 8 <template>
...@@ -13,89 +13,77 @@ ...@@ -13,89 +13,77 @@
13 13
14 <script> 14 <script>
15 import mapboxgl from 'mapbox-gl'; 15 import mapboxgl from 'mapbox-gl';
16 import { Logo } from '@supermap/iclient-mapboxgl'; 16 import { Logo, FeatureService, QueryService } from '@supermap/iclient-mapboxgl';
17 17
18 export default { 18 export default {
19 name: 'MVT', 19 name: 'MVT',
20 data () { 20 data () {
21 return { 21 return {
22 22 map: null
23 } 23 }
24 }, 24 },
25 mounted(){ 25 mounted(){
26 mapboxgl.accessToken = 'pk.eyJ1IjoiY2hpYW5nYnQyIiwiYSI6ImNqemYzODJuejA4ZG0zbW53azE3eWljemsifQ.zCGZHTRuZV2uqovnXYtsew'; 26 this.map = new mapboxgl.Map({
27 var map = new mapboxgl.Map({
28 container: 'map', // container id 27 container: 'map', // container id
29 style: 28 style:
30 'http://127.0.0.1:8090/iserver/services/map-mvt-China_Dark/rest/maps/China_Dark/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true', 29 'http://127.0.0.1:8090/iserver/services/map-mvt-China_Dark/rest/maps/China_Dark/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
31 center: [116.4, 39.9], 30 center: [116.4, 39.9],
32 minZoom: 0, 31 minZoom: 0,
33 zoom: 3, 32 zoom: 3,
34 pitch: 45, 33 // pitch: 45,
35 bearing: -10 34 // bearing: -10
36 }); 35 });
37 map.addControl(new mapboxgl.NavigationControl(), 'top-left'); 36 this.map.addControl(new mapboxgl.NavigationControl(), 'top-left');
37 var __this = this;
38 this.map.on('load', function () {
39 // console.log(map.getStyle().sources);
40 // console.log(map.getStyle().layers);
41 __this.map.setPaintProperty('WorldElements_R@China', 'fill-color', '#a1dab4');
42 __this.map.setPaintProperty('River_R@China', 'fill-color', '#fcfcfc');
38 43
39 map.on('load', function () { 44 var dataUrl = 'http://127.0.0.1:8090/iserver/services/data-China/rest/data/';
40 console.log(map.getStyle().sources); 45 var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
41 console.log(map.getStyle().layers); 46 queryParameter: {
42 map.setPaintProperty('WorldElements_R@China', 'fill-color', '#a1dab4'); 47 name: "poi",
43 map.setPaintProperty('Country_R@China', 'fill-color', '#FFFFFF'); 48 attributeFilter: "SMID > 0"
44 map.setPaintProperty('Province_R@China', 'fill-color', '#fd8d3c');
45 map.setPaintProperty('River_R@China', 'fill-color', '#fcfcfc');
46 map.addLayer({
47 'id': 'population',
48 'type': 'circle',
49 'source': {
50 type: 'vector',
51 url: 'mapbox://examples.8fgz4egr'
52 }, 49 },
53 'source-layer': 'sf2010', 50 datasetNames: ["China:poi"],
54 'paint': { 51 maxFeatures: 1000,
55 // make circles larger as the user zooms from z12 to z22 52 toIndex: -1
56 'circle-radius': {
57 'base': 1.75,
58 'stops': [
59 [12, 2],
60 [22, 180]
61 ]
62 },
63 // color circles by ethnicity, using a match expression
64 // https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-match
65 'circle-color': [
66 'match',
67 ['get', 'ethnicity'],
68 'White',
69 '#fbb03b',
70 'Black',
71 '#223b53',
72 'Hispanic',
73 '#e55e5e',
74 'Asian',
75 '#3bb2d0',
76 /* other */ '#ccc'
77 ]
78 }
79 }); 53 });
80 54 var featureService = new mapboxgl.supermap.FeatureService(dataUrl);
81 var popup = new mapboxgl.Popup({ 55 var features = null;
82 closeButton: false 56
83 }); 57 featureService.getFeaturesBySQL(sqlParam, function (serviceResult) {
84 map.on('mousemove', 'population', function(e) { 58 features = serviceResult.result.features;
85 // Change the cursor style as a UI indicator. 59 console.log(features);
86 map.getCanvas().style.cursor = 'pointer'; 60
87 // Single out the first found feature. 61 __this.map.addSource("queryDatas", {
88 var feature = e.features[0]; 62 "type": "geojson",
89 console.log(feature.properties); 63 "data": features
90 // Display a popup with the name of the county 64 });
91 popup.setLngLat(e.lngLat) 65
92 .setText(feature.properties.ethnicity) 66 __this.map.addLayer({
93 .addTo(map); 67 "id": "queryDatasLayer",
94 }); 68 "type": "circle",
95 69 "source": "queryDatas",
96 map.on('mouseleave', 'population', function() { 70 "paint": {
97 map.getCanvas().style.cursor = ''; 71 'circle-radius': 2,
98 popup.remove(); 72 'circle-color': '#6879FB',
73 // property:'value',
74 // stops: [
75 // [min,'#6879FB'],
76 // [min + 1/3*range,'#68FB75'],
77 // [min + 2/3*range, '#F94B18'],
78 // [max, '#F92918']
79 // ]
80 // },
81 'circle-opacity': 1.0,
82 "circle-stroke-width": 2,
83 "circle-stroke-color": "#007cbf",
84 "circle-stroke-opacity": 0.7
85 }
86 });
99 }); 87 });
100 }); 88 });
101 } 89 }
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 * @Author: jiangbotao 2 * @Author: jiangbotao
3 * @Date: 2019-12-12 17:40:15 3 * @Date: 2019-12-12 17:40:15
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-14 00:05:56 5 * @LastEditTime: 2019-12-15 18:08:19
6 * @FilePath: \supermapvue\src\router\index.js 6 * @FilePath: \supermapvue\src\router\index.js
7 */ 7 */
8 import Vue from 'vue' 8 import Vue from 'vue'
...@@ -106,6 +106,11 @@ export default new Router({ ...@@ -106,6 +106,11 @@ export default new Router({
106 path: '/theme_label', 106 path: '/theme_label',
107 name: 'Theme_Label', 107 name: 'Theme_Label',
108 component: () => import('@/components/theme/Map_theme_label') 108 component: () => import('@/components/theme/Map_theme_label')
109 },
110 {
111 path: '/mvt_wz',
112 name: 'Theme_wz',
113 component: () => import('@/components/vt/Map_wz')
109 } 114 }
110 ] 115 ]
111 }) 116 })
......