Skip to content

蒋波涛 / super_mapboxgl_vue

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

'20191216'

1 parent ee39aa59
Inline Side-by-side
Showing 5 changed files with 129 additions and 3 deletions
...@@ -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 20:55:42 5 * @LastEditTime: 2019-12-16 12:57:27
6 * @FilePath: \supermapvue\src\components\menu\MyMenu.vue 6 * @FilePath: \supermapvue\src\components\menu\MyMenu.vue
7 --> 7 -->
8 <template> 8 <template>
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
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-menu-item key="1_5"><router-link :to="'/mvt_wz'">本地矢量瓦片</router-link></a-menu-item>
21 <a-menu-item key="1_6"><router-link :to="'/mvt_wzdemo'">温州Demo</router-link></a-menu-item>
21 </a-sub-menu> 22 </a-sub-menu>
22 <a-sub-menu key="sub2"> 23 <a-sub-menu key="sub2">
23 <span slot="title"><a-icon type="team" /><span>要素查询</span></span> 24 <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 22:15:53 3 * @Date: 2019-12-10 22:15:53
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-15 22:59:50 5 * @LastEditTime: 2019-12-16 13:13:06
6 * @FilePath: \supermapvue\src\components\vt\Map_wz.vue 6 * @FilePath: \supermapvue\src\components\vt\Map_wz.vue
7 --> 7 -->
8 <template> 8 <template>
......
1 <!--
2 * 使用CGCS2000发布温州地图
3 * @Author: jiangbotao
4 * @Date: 2019-12-10 22:15:53
5 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-16 13:12:16
7 * @FilePath: \supermapvue\src\components\vt\Map_wz.vue
8 -->
9 <template>
10 <div >
11 <div id="map"></div>
12 </div>
13 </template>
14
15 <script>
16 import mapboxgl from 'mapbox-gl';
17 import { Logo, FeatureService, QueryService } from '@supermap/iclient-mapboxgl';
18
19 export default {
20 name: 'MVT',
21 data () {
22 return {
23 map: null
24 }
25 },
26 mounted(){
27 this.map = new mapboxgl.Map({
28 container: 'map', // container id
29 style:
30 'http://127.0.0.1:8090/iserver/services/map-mvt-TDT/rest/maps/TDT/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
31 center: [120.86813445410331, 27.82247481387501],
32 crs: 'EPSG:4490', // 注意使用非3857的服务时，必须使用crs来确认坐标系才能显示地图
33 minZoom: 8,
34 maxZoom: 13,
35 zoom: 8,
36 // pitch: 45,
37 // bearing: -10
38 });
39 this.map.addControl(new mapboxgl.NavigationControl(), 'top-left');
40 var __this = this;
41 this.map.on('load', function () {
42 // console.log(map.getStyle().sources);
43 // console.log(map.getStyle().layers);
44 var dataUrl = 'http://127.0.0.1:8090/iserver/services/data-wzmap/rest/data/';
45 var sqlParam = new SuperMap.GetFeaturesBySQLParameters({
46 queryParameter: {
47 name: "point2",
48 attributeFilter: "SMID > 0",
49 },
50 datasetNames: ["YJDB:pt1"],
51 maxFeatures: 1000,
52 toIndex: -1
53 });
54 var featureService = new mapboxgl.supermap.FeatureService(dataUrl);
55 var features = null;
56
57 featureService.getFeaturesBySQL(sqlParam, function (serviceResult) {
58 features = serviceResult.result.features;
59 console.log(features);
60
61 __this.map.addSource("queryDatas", {
62 "type": "geojson",
63 "data": features
64 });
65
66 __this.map.addLayer({
67 "id": "queryDatasLayer",
68 "type": "circle",
69 "source": "queryDatas",
70 "paint": {
71 'circle-radius': 4,
72 'circle-color': [
73 'match',
74 ['get', 'TYPE'],
75 'A',
76 '#fbb03b',
77 'B',
78 '#223b53',
79 'C',
80 '#e55e5e',
81 'D',
82 '#3bb2d0',
83 /* other */ '#ccc'
84 ],
85 'circle-opacity': 1.0,
86 "circle-stroke-width": 2,
87 "circle-stroke-color": "#007cbf",
88 "circle-stroke-opacity": 0.7
89 }
90 });
91 var popup = new mapboxgl.Popup({
92 anchor: 'bottom',
93 closeButton: false,
94 offset: {
95 'bottom': [0, -20],
96 }
97 });
98 __this.map.on('mousemove', "queryDatasLayer", function (e) {
99 popup.setLngLat(e.lngLat).setHTML(e.features[0].properties.NAME+':'+ e.features[0].properties.PRICE).addTo(__this.map);
100 __this.map.getCanvas().style.cursor = 'pointer';
101
102 });
103 __this.map.on('mouseout', "queryDatasLayer", function () {
104 __this.map.getCanvas().style.cursor = '';
105 popup.remove();
106 })
107 });
108 });
109 }
110 }
111 </script>
112
113 <style scoped>
114 #map {
115 position: absolute;
116 height: 100%;
117 width: 100%;
118 background-color: white
119 }
120 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -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-16 01:20:35 5 * @LastEditTime: 2019-12-16 13:14:28
6 * @FilePath: \supermapvue\src\main.js 6 * @FilePath: \supermapvue\src\main.js
7 */ 7 */
8 import Vue from 'vue' 8 import Vue from 'vue'
......
...@@ -111,6 +111,11 @@ export default new Router({ ...@@ -111,6 +111,11 @@ export default new Router({
111 path: '/mvt_wz', 111 path: '/mvt_wz',
112 name: 'Theme_wz', 112 name: 'Theme_wz',
113 component: () => import('@/components/vt/Map_wz') 113 component: () => import('@/components/vt/Map_wz')
114 },
115 {
116 path: '/mvt_wzdemo',
117 name: 'Theme_wzdemo',
118 component: () => import('@/components/vt/Map_wzdemo')
114 } 119 }
115 ] 120 ]
116 }) 121 })
......