Skip to content

蒋波涛 / super_mapboxgl_vue

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

20191215

1 parent 8c172ce3
Inline Side-by-side
Showing 6 changed files with 130 additions and 34 deletions
...@@ -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 11:49:06 5 * @LastEditTime: 2019-12-15 13:28:05
6 * @FilePath: \mymapbox\src\App.vue 6 * @FilePath: \mymapbox\src\App.vue
7 --> 7 -->
8 <template> 8 <template>
...@@ -49,7 +49,7 @@ export default { ...@@ -49,7 +49,7 @@ export default {
49 height: 64px; 49 height: 64px;
50 padding: 0 25px; 50 padding: 0 25px;
51 line-height: 64px; 51 line-height: 64px;
52 background: #096fd0; 52 background: #2e7fb4;
53 color: white; 53 color: white;
54 font-size: 26px; 54 font-size: 26px;
55 border-bottom-style: solid; 55 border-bottom-style: solid;
......
...@@ -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-14 12:06:23 5 * @LastEditTime: 2019-12-15 12:28:03
6 * @FilePath: \mymapbox\src\components\Map3857.vue 6 * @FilePath: \mymapbox\src\components\Map3857.vue
7 --> 7 -->
8 <template> 8 <template>
...@@ -24,7 +24,7 @@ export default { ...@@ -24,7 +24,7 @@ export default {
24 } 24 }
25 }, 25 },
26 mounted(){ 26 mounted(){
27 var map, host = "http://support.supermap.com.cn:8090"; 27 var host = "http://support.supermap.com.cn:8090";
28 var url = host + "/iserver/services/map-world/rest/maps/World"; 28 var url = host + "/iserver/services/map-world/rest/maps/World";
29 29
30 var map = new mapboxgl.Map({ 30 var map = new mapboxgl.Map({
...@@ -33,7 +33,7 @@ export default { ...@@ -33,7 +33,7 @@ export default {
33 "version": 8, 33 "version": 8,
34 "sources": { 34 "sources": {
35 "raster-tiles": { 35 "raster-tiles": {
36 "attribution": 'attribution', 36 "attribution": '展示栅格数据并从服务器上获取地图信息',
37 "type": "raster", 37 "type": "raster",
38 "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'], 38 "tiles": [host + '/iserver/services/maps/rest/maps/World/zxyTileImage.png?prjCoordSys={"epsgCode":3857}&z={z}&x={x}&y={y}'],
39 "tileSize": 256, 39 "tileSize": 256,
...@@ -47,7 +47,7 @@ export default { ...@@ -47,7 +47,7 @@ export default {
47 "maxzoom": 22 47 "maxzoom": 22
48 }] 48 }]
49 }, 49 },
50 center: [-74.50, 40], 50 center: [-96, 37.8],
51 maxZoom: 18, 51 maxZoom: 18,
52 zoom: 2 52 zoom: 2
53 }); 53 });
......
...@@ -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-14 00:21:29 5 * @LastEditTime: 2019-12-15 12:36:46
6 * @FilePath: \mymapbox\src\components\Map3857.vue 6 * @FilePath: \mymapbox\src\components\Map3857.vue
7 --> 7 -->
8 <template> 8 <template>
......
...@@ -2,49 +2,133 @@ ...@@ -2,49 +2,133 @@
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-10 16:43:29 5 * @LastEditTime: 2019-12-15 14:19:14
6 * @FilePath: \mymapbox\src\components\Map3857.vue 6 * @FilePath: \mymapbox\src\components\Map3857.vue
7 --> 7 -->
8 <template> 8 <template>
9 <div > 9 <div >
10 <div id="map"></div> 10 <div id="map"></div>
11 <a-card title="业务图层操作" :bordered="false" style="width: 320px">
12 <p>
13 <a-button v-on:click="addLayer">加载图层</a-button>
14 <a-button v-on:click="clearLayer">隐藏图层</a-button>
15 <a-button v-on:click="showLayer">展示图层</a-button>
16 </p>
17 </a-card>
11 </div> 18 </div>
12 </template> 19 </template>
13 20
14 <script> 21 <script>
15 import mapboxgl from 'mapbox-gl'; 22 import mapboxgl from 'mapbox-gl';
16 import MapboxDraw from '@mapbox/mapbox-gl-draw';
17 import { Logo } from '@supermap/iclient-mapboxgl';
18 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
19 23
20 export default { 24 export default {
21 name: 'MVT', 25 name: 'MVT',
22 data () { 26 data () {
23 return { 27 return {
24 28 map: null
25 } 29 }
26 }, 30 },
27 mounted(){ 31 mounted(){
28 var map = new mapboxgl.Map({ 32 this.map = new mapboxgl.Map({
29 container: 'map', 33 container: 'map',
30 attributionControl: false, 34 attributionControl: false,
31 style: 'http://support.supermap.com.cn:8090/iserver/services/map-mvt-China/rest/maps/China/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true', 35 style: 'http://support.supermap.com.cn:8090/iserver/services/map-mvt-China/rest/maps/China/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true',
32 center: [110.143, 30.236], // starting position 36 center: [110.143, 30.236], // starting position
33 zoom: 3 // starting zoom 37 zoom: 3 // starting zoom
34 }); 38 });
35 map.addControl(new Logo(), 'bottom-right'); 39 this.map.addControl(new mapboxgl.NavigationControl(), 'top-left');
36 map.addControl(new mapboxgl.NavigationControl(), 'top-left'); 40 this.map.addControl(new mapboxgl.ScaleControl({}));
37 map.addControl(new mapboxgl.ScaleControl({})); 41 },
38 map.addControl(new mapboxgl.FullscreenControl(),'top-right'); 42 methods:{
39 map.addControl(new mapboxgl.GeolocateControl({ 43 addLayer(){
40 positionOptions: { 44 var polygon = {
41 enableHighAccuracy: true 45 "type": "Polygon",
42 }, 46 "coordinates": [[[118, 20], [120, 20], [120, 50], [-120, 50], [118, 20]]]
43 trackUserLocation: true 47 };
44 }),'top-left'); 48 var getFeatureParams = new SuperMap.GetFeaturesByGeometryParameters({
45 map.addControl(new mapboxgl.AttributionControl({compact: true})); 49 toIndex: -1,
46 var Draw = new MapboxDraw(); 50 datasetNames: ["World:Capitals"],
47 map.addControl(Draw,'top-left'); 51 geometry: polygon,
52 spatialQueryMode: "INTERSECT"
53 });
54 var dataUrl = "https://iserver.supermap.io/iserver/services/data-world/rest/data";
55 var featureService = new mapboxgl.supermap.FeatureService(dataUrl);
56 var features = null;
57 var __this = this;
58 featureService.getFeaturesByGeometry(getFeatureParams, function (serviceResult) {
59 features = serviceResult.result.features;
60 var phvals = features.features.map(f => f.properties.SMID);
61 var min = Math.min(...phvals);
62 var max = Math.max(...phvals);
63 var range = max-min;
64 console.log(min);
65 console.log(max);
66 console.log(range);
67 console.log(features);
68 if (!__this.map.getSource("queryDatas")) {
69 __this.map.addSource("queryDatas", {
70 "type": "geojson",
71 "data": features
72 });
73 } else {
74 __this.map.getSource("queryDatas").setData(features);
75 }
76
77 if(__this.map.getLayer("queryDatasLayer")){
78 __this.map.removeLayer('queryDatasLayer');
79 }
80 __this.map.addLayer({
81 "id": "queryDatasLayer",
82 "type": "circle",
83 "source": "queryDatas",
84 "paint": {
85 'circle-radius': {
86 'base': 2,
87 'stops': [
88 [6, 3],
89 [10, 180]
90 ]
91 },
92 'circle-color': {
93 property:'SMID',
94 stops: [
95 [min,'#6879FB'],
96 [min + 1/3*range,'#68FB75'],
97 [min + 2/3*range, '#F94B18'],
98 [max, '#F92918']
99 ]
100 },
101 'circle-opacity': 1.0,
102 "circle-stroke-width": 2,
103 "circle-stroke-color": "#007cbf",
104 "circle-stroke-opacity": 0.7
105 }
106 });
107
108 var popup = new mapboxgl.Popup({
109 anchor: 'bottom',
110 closeButton: false,
111 offset: {
112 'bottom': [0, -20],
113 }
114 });
115 __this.map.on('mousemove', "queryDatasLayer", function (e) {
116 popup.setLngLat(e.lngLat).setHTML(e.features[0].properties.CAPITAL).addTo(__this.map);
117 __this.map.getCanvas().style.cursor = 'pointer';
118
119 });
120 __this.map.on('mouseout', "queryDatasLayer", function () {
121 __this.map.getCanvas().style.cursor = '';
122 popup.remove();
123 })
124 });
125 },
126 clearLayer(){
127 this.map.setLayoutProperty("queryDatasLayer", 'visibility', 'none');
128 },
129 showLayer(){
130 this.map.setLayoutProperty("queryDatasLayer", 'visibility', 'visible');
131 }
48 } 132 }
49 } 133 }
50 </script> 134 </script>
...@@ -56,4 +140,12 @@ export default { ...@@ -56,4 +140,12 @@ export default {
56 width: 100%; 140 width: 100%;
57 background-color: white 141 background-color: white
58 } 142 }
143 .ant-card {
144 width: 320px;
145 height: 120px;
146 background-color: #e6f7ff;
147 right: 5px;
148 position: absolute;
149 top: 5px;
150 }
59 </style> 151 </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-09 23:17:48 3 * @Date: 2019-12-09 23:17:48
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-10 17:42:07 5 * @LastEditTime: 2019-12-15 12:36:14
6 * @FilePath: \mymapbox\src\components\Map3857.vue 6 * @FilePath: \mymapbox\src\components\Map3857.vue
7 --> 7 -->
8 <template> 8 <template>
...@@ -13,9 +13,7 @@ ...@@ -13,9 +13,7 @@
13 13
14 <script> 14 <script>
15 import mapboxgl from 'mapbox-gl'; 15 import mapboxgl from 'mapbox-gl';
16 import MapboxDraw from '@mapbox/mapbox-gl-draw';
17 import { Logo } from '@supermap/iclient-mapboxgl'; 16 import { Logo } from '@supermap/iclient-mapboxgl';
18 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
19 17
20 export default { 18 export default {
21 name: 'RasterTiles', 19 name: 'RasterTiles',
...@@ -34,7 +32,7 @@ export default { ...@@ -34,7 +32,7 @@ export default {
34 "version": 8, 32 "version": 8,
35 "sources": { 33 "sources": {
36 "raster-tiles": { 34 "raster-tiles": {
37 "attribution": 'SuperMap Mapbox GL', 35 "attribution": '展示栅格瓦片和各种Mapbox控件',
38 "type": "raster", 36 "type": "raster",
39 "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'], 37 "tiles": [host + '/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}'],
40 "tileSize": 256 38 "tileSize": 256
...@@ -62,7 +60,15 @@ export default { ...@@ -62,7 +60,15 @@ export default {
62 trackUserLocation: true 60 trackUserLocation: true
63 }),'top-left'); 61 }),'top-left');
64 map.addControl(new mapboxgl.AttributionControl({compact: true})); 62 map.addControl(new mapboxgl.AttributionControl({compact: true}));
65 var Draw = new MapboxDraw(); 63 var Draw = new MapboxDraw({
64 displayControlsDefault: false,
65 controls: {
66 line_string: true,
67 polygon: true,
68 point: true,
69 trash: true
70 }
71 });
66 map.addControl(Draw,'top-left'); 72 map.addControl(Draw,'top-left');
67 } 73 }
68 } 74 }
......
...@@ -2,11 +2,9 @@ ...@@ -2,11 +2,9 @@
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 11:51:38 5 * @LastEditTime: 2019-12-15 14:22:04
6 * @FilePath: \supermapvue\src\main.js 6 * @FilePath: \supermapvue\src\main.js
7 */ 7 */
8 // The Vue build version to load with the `import` command
9 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
10 import Vue from 'vue' 8 import Vue from 'vue'
11 import Antd from 'ant-design-vue' 9 import Antd from 'ant-design-vue'
12 import App from './App' 10 import App from './App'
......