Skip to content

蒋波涛 / super_mapboxgl_vue

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

'20191213'

1 parent 600653b5
Inline Side-by-side
Showing 4 changed files with 80 additions and 37 deletions
1 /*
2 * @Author: jiangbotao
3 * @Date: 2019-12-12 17:39:25
4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-13 01:27:49
6 * @FilePath: \supermapvue\config\index.js
7 */
1 'use strict' 8 'use strict'
2 // Template version: 1.3.1 9 // Template version: 1.3.1
3 // see http://vuejs-templates.github.io/webpack for documentation. 10 // see http://vuejs-templates.github.io/webpack for documentation.
...@@ -22,7 +29,7 @@ module.exports = { ...@@ -22,7 +29,7 @@ module.exports = {
22 29
23 // Various Dev Server settings 30 // Various Dev Server settings
24 host: 'localhost', // can be overwritten by process.env.HOST 31 host: 'localhost', // can be overwritten by process.env.HOST
25 port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 32 port: 7000, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
26 autoOpenBrowser: false, 33 autoOpenBrowser: false,
27 errorOverlay: true, 34 errorOverlay: true,
28 notifyOnErrors: true, 35 notifyOnErrors: true,
......
...@@ -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-12 16:31:06 5 * @LastEditTime: 2019-12-13 00:41:31
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 22:15:53 3 * @Date: 2019-12-10 22:15:53
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-12 17:31:11 5 * @LastEditTime: 2019-12-12 21:07:20
6 * @FilePath: \supermapvue\src\components\vt\Map_wz.vue 6 * @FilePath: \supermapvue\src\components\vt\Map_wz.vue
7 --> 7 -->
8 <template> 8 <template>
...@@ -23,51 +23,80 @@ export default { ...@@ -23,51 +23,80 @@ export default {
23 } 23 }
24 }, 24 },
25 mounted(){ 25 mounted(){
26 // var url = "http://127.0.0.1:8090/iserver/services/map-mvt-China_Dark/rest/maps/China_Dark/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true"; 26 mapboxgl.accessToken = 'pk.eyJ1IjoiY2hpYW5nYnQyIiwiYSI6ImNqemYzODJuejA4ZG0zbW53azE3eWljemsifQ.zCGZHTRuZV2uqovnXYtsew';
27 // $.ajax({
28 // url:url,
29 // success:function(mvtStyle){
30 // var zoom = mvtStyle.zoom == null ? minZoomLevel : mvtStyle.zoom;
31 // var map = new mapboxgl.Map({
32 // container: 'map', // container id
33 // style: mvtStyle,
34 // center: [-1, -2],// starting position
35 // zoom: 4, // starting zoom
36 // minZoom: 0,
37 // maxZoom: 5,
38 // crs: "EPSG:4490"
39 // });
40 // map.addControl(new mapboxgl.NavigationControl(), 'top-left');
41 // // map.setStyle({
42 // // style: {
43 // // layers: [
44 // // {
45 // // "id": "background",
46 // // "type": "background",
47 // // "layout": {},
48 // // "paint": {
49 // // "background-color": "#fcfcfc"
50 // // }
51 // // }
52 // // ]
53 // // }
54 // // }, {diff: false});
55 // }
56 // });
57 var map = new mapboxgl.Map({ 27 var map = new mapboxgl.Map({
58 container: 'map', // container id 28 container: 'map', // container id
59 style: 29 style:
60 'http://127.0.0.1:8090/iserver/services/map-mvt-China_Dark/rest/maps/China_Dark/tileFeature/vectorstyles.json?type=MapBox_GL&styleonly=true', 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',
61 center: [116.4, 39.9], 31 center: [116.4, 39.9],
62 minZoom: 0, 32 minZoom: 0,
63 zoom: 5 33 zoom: 3,
34 pitch: 45,
35 bearing: -10
64 }); 36 });
65 map.addControl(new mapboxgl.NavigationControl(), 'top-left'); 37 map.addControl(new mapboxgl.NavigationControl(), 'top-left');
38
66 map.on('load', function () { 39 map.on('load', function () {
40 console.log(map.getStyle().sources);
67 console.log(map.getStyle().layers); 41 console.log(map.getStyle().layers);
68 map.setPaintProperty('WorldElements_R@China', 'fill-color', '#a1dab4'); 42 map.setPaintProperty('WorldElements_R@China', 'fill-color', '#a1dab4');
69 map.setPaintProperty('Country_R@China', 'fill-color', '#f03b20'); 43 map.setPaintProperty('Country_R@China', 'fill-color', '#FFFFFF');
70 map.setPaintProperty('Province_R@China', 'fill-color', '#fd8d3c'); 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 },
53 'source-layer': 'sf2010',
54 'paint': {
55 // make circles larger as the user zooms from z12 to z22
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 });
80
81 var popup = new mapboxgl.Popup({
82 closeButton: false
83 });
84 map.on('mousemove', 'population', function(e) {
85 // Change the cursor style as a UI indicator.
86 map.getCanvas().style.cursor = 'pointer';
87 // Single out the first found feature.
88 var feature = e.features[0];
89 console.log(feature.properties);
90 // Display a popup with the name of the county
91 popup.setLngLat(e.lngLat)
92 .setText(feature.properties.ethnicity)
93 .addTo(map);
94 });
95
96 map.on('mouseleave', 'population', function() {
97 map.getCanvas().style.cursor = '';
98 popup.remove();
99 });
71 }); 100 });
72 } 101 }
73 } 102 }
......
1 /*
2 * @Author: jiangbotao
3 * @Date: 2019-12-12 17:40:15
4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-13 11:24:37
6 * @FilePath: \supermapvue\src\router\index.js
7 */
1 import Vue from 'vue' 8 import Vue from 'vue'
2 import Router from 'vue-router' 9 import Router from 'vue-router'
3 import Mapviewer from '@/components/basic/Map_measure' 10 import Mapviewer from '@/components/basic/Map_info'
4 Vue.use(Router) 11 Vue.use(Router)
5 12
6 export default new Router({ 13 export default new Router({
......