Skip to content

蒋波涛 / super_mapboxgl_vue

Go to a project
Toggle navigation
Toggle navigation pinning
2a66dc96 by unknown
Options

20191218

1 parent a544a113
Inline Side-by-side
Showing 18 changed files with 1071 additions and 103 deletions
...@@ -2,13 +2,16 @@ ...@@ -2,13 +2,16 @@
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-15 01:38:09 5 * @LastEditTime: 2019-12-18 00:53:58
6 * @FilePath: \supermapvue\README.md 6 * @FilePath: \supermapvue\README.md
7 --> 7 -->
8 # SuperMapVue 8 # SuperMapVue
9 9
10 > 基于SuperMap MapboxGL代码编写的VUE组件 10 > 基于SuperMap MapboxGL代码编写的VUE组件
11 11
12 > 1、一个有参考价值的网站 http://yancongwen.cn/mapbox-demo/
13 > 2、https://www.minedata.cn/industry/city
14
12 ## Build Setup 15 ## Build Setup
13 16
14 ``` bash 17 ``` bash
......
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
32 </template> 32 </template>
33 33
34 <script> 34 <script>
35 import MyMenu from './components/menu/MyMenu'; 35 import MyMenu from './menu/MyMenu';
36 36
37 export default { 37 export default {
38 name: 'App', 38 name: 'App',
......
1 <!-- 1 <!--
2 * MapboxGL基本地图设置并从服务器上获取相关信息
2 * @Author: jiangbotao 3 * @Author: jiangbotao
3 * @Date: 2019-12-09 23:17:48 4 * @Date: 2019-12-09 23:17:48
4 * @LastEditors: jiangbotao 5 * @LastEditors: jiangbotao
...@@ -16,8 +17,7 @@ import $ from 'jquery'; ...@@ -16,8 +17,7 @@ import $ from 'jquery';
16 import mapboxgl from 'mapbox-gl'; 17 import mapboxgl from 'mapbox-gl';
17 import { Logo, MapService } from '@supermap/iclient-mapboxgl'; 18 import { Logo, MapService } from '@supermap/iclient-mapboxgl';
18 export default { 19 export default {
19 name: 'HelloWorld', 20 name: 'Map_Info',
20
21 data () { 21 data () {
22 return { 22 return {
23 23
...@@ -52,7 +52,6 @@ export default { ...@@ -52,7 +52,6 @@ export default {
52 zoom: 2 52 zoom: 2
53 }); 53 });
54 map.addControl(new mapboxgl.NavigationControl(), 'top-left'); 54 map.addControl(new mapboxgl.NavigationControl(), 'top-left');
55
56 map.on('load', function () { 55 map.on('load', function () {
57 mapService(); 56 mapService();
58 }); 57 });
...@@ -66,7 +65,6 @@ export default { ...@@ -66,7 +65,6 @@ export default {
66 }); 65 });
67 getMapStatusService.processAsync(); 66 getMapStatusService.processAsync();
68 } 67 }
69
70 function callback(serviceResult) { 68 function callback(serviceResult) {
71 var result = serviceResult.result; 69 var result = serviceResult.result;
72 var innerHTML = ''; 70 var innerHTML = '';
...@@ -76,7 +74,6 @@ export default { ...@@ -76,7 +74,6 @@ export default {
76 .setHTML(innerHTML + "</br>") 74 .setHTML(innerHTML + "</br>")
77 .addTo(map); 75 .addTo(map);
78 } 76 }
79
80 $('#map').on('resize', function() { 77 $('#map').on('resize', function() {
81 console.log('resize'); 78 console.log('resize');
82 }); 79 });
......
1 <!--
2 * @Author: jiangbotao
3 * @Date: 2019-12-18 00:23:47
4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-18 00:44:01
6 * @FilePath: \supermapvue\src\components\layers\Map_mapbox.vue
7 -->
8 <template>
9 <div >
10 <div id="map"></div>
11 </div>
12 </template>
13
14 <script>
15 import $ from 'jquery';
16 import mapboxgl from 'mapbox-gl';
17 import { Logo, MapService } from '@supermap/iclient-mapboxgl';
18 export default {
19 name: 'Mapbox',
20
21 data () {
22 return {
23
24 }
25 },
26 mounted(){
27 mapboxgl.accessToken = 'pk.eyJ1IjoieWFuY29uZ3dlbiIsImEiOiJjaml4eWgxMnowNHY0M3BvMW96cDI1bWJ6In0.QA-bmCCquo-mziBfZ8KOIQ';
28 var map = new mapboxgl.Map({
29 container: 'map', // container id
30 style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
31 center: [-87.622088, 41.878781], // starting position [lng, lat]
32 zoom: 12 // starting zoom
33 });
34 map.on('load', function() {
35 // Add Mapillary sequence layer.
36 // https://www.mapillary.com/developer/tiles-documentation/#sequence-layer
37 map.addLayer({
38 "id": "mapillary",
39 "type": "line",
40 "source": {
41 "type": "vector",
42 "tiles": ["https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt"],
43 "minzoom": 6,
44 "maxzoom": 14
45 },
46 "source-layer": "mapillary-sequences",
47 "layout": {
48 "line-cap": "round",
49 "line-join": "round"
50 },
51 "paint": {
52 "line-opacity": 0.6,
53 "line-color": "rgb(53, 175, 109)",
54 "line-width": 2
55 }
56 }, 'waterway-label');
57 });
58 map.addControl(new mapboxgl.NavigationControl(), 'top-left');
59 }
60 }
61 </script>
62
63 <style scoped>
64 #map {
65 position: absolute;
66 height: 100%;
67 width: 100%;
68 background-color: white
69 }
70 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <template>
2 <div >
3 <div id="map"></div>
4 </div>
5 </template>
6
7 <script>
8 import $ from 'jquery';
9 import mapboxgl from 'mapbox-gl';
10 import { Logo, MapService } from '@supermap/iclient-mapboxgl';
11 export default {
12 name: 'HelloWorld',
13
14 data () {
15 return {
16
17 }
18 },
19 mounted(){
20 var map = new mapboxgl.Map({
21 container: 'map', // container id
22 style: {
23 "version": 8,
24 "sources": {
25 "raster-tiles": {
26 "type": "raster",
27 "tiles": ["https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"],
28 "tileSize": 256
29 },
30 "img": {
31 "type": "raster",
32 "tiles": ["https://services.wzmap.gov.cn/server/rest/services/TDT/YX2017/MapServer/tile/{z}/{y}/{x}?blankTile=false"],
33 "tileSize": 256
34 }
35 },
36 "layers": [
37 // {
38 // "id": "simple-tiles",
39 // "type": "raster",
40 // "source": "raster-tiles",
41 // "minzoom": 0,
42 // "maxzoom": 22
43 // },
44 {
45 "id": "img_lyr",
46 "type": "raster",
47 "source": "img",
48 "minzoom": 0,
49 "maxzoom": 22
50 }]
51 },
52 center: [120.86813445410331, 27.82247481387501], // starting position
53 zoom: 12 // starting zoom
54 });
55 map.addControl(new mapboxgl.NavigationControl(), 'top-left');
56 }
57 }
58 </script>
59
60 <style scoped>
61 #map {
62 position: absolute;
63 height: 100%;
64 width: 100%;
65 background-color: white
66 }
67 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <!--
2 * @Author: jiangbotao
3 * @Date: 2019-12-18 00:23:47
4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-18 00:25:21
6 * @FilePath: \supermapvue\src\components\layers\Map_mapbox.vue
7 -->
8 <template>
9 <div >
10 <div id="map"></div>
11 </div>
12 </template>
13
14 <script>
15 import $ from 'jquery';
16 import mapboxgl from 'mapbox-gl';
17 import { Logo, MapService } from '@supermap/iclient-mapboxgl';
18 export default {
19 name: 'Gaode',
20
21 data () {
22 return {
23
24 }
25 },
26 mounted(){
27 var map = new mapboxgl.Map({
28 container: 'map', // container id
29 style: {
30 "version": 8,
31 "sources": {
32 "raster-tiles": {
33 "type": "raster",
34 "tiles": ["http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"],
35 "tileSize": 256
36 }
37 },
38 "layers": [{
39 "id": "simple-tiles",
40 "type": "raster",
41 "source": "raster-tiles",
42 "minzoom": 0,
43 "maxzoom": 22
44 }]
45 },
46 center: [116, 30], // starting position
47 zoom: 2 // starting zoom
48 });
49 map.addControl(new mapboxgl.NavigationControl(), 'top-left');
50 }
51 }
52 </script>
53
54 <style scoped>
55 #map {
56 position: absolute;
57 height: 100%;
58 width: 100%;
59 background-color: white
60 }
61 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <!--
2 * @Author: jiangbotao
3 * @Date: 2019-12-18 00:23:47
4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-18 00:28:00
6 * @FilePath: \supermapvue\src\components\layers\Map_mapbox.vue
7 -->
8 <template>
9 <div >
10 <div id="map"></div>
11 </div>
12 </template>
13
14 <script>
15 import $ from 'jquery';
16 import mapboxgl from 'mapbox-gl';
17 import { Logo, MapService } from '@supermap/iclient-mapboxgl';
18 export default {
19 name: 'Mapbox',
20
21 data () {
22 return {
23
24 }
25 },
26 mounted(){
27 mapboxgl.accessToken = 'pk.eyJ1IjoieWFuY29uZ3dlbiIsImEiOiJjaml4eWgxMnowNHY0M3BvMW96cDI1bWJ6In0.QA-bmCCquo-mziBfZ8KOIQ';
28 var map = new mapboxgl.Map({
29 container: 'map', // container id
30 style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
31 center: [-74.50, 40], // starting position [lng, lat]
32 zoom: 9 // starting zoom
33 });
34 map.addControl(new mapboxgl.NavigationControl(), 'top-left');
35 }
36 }
37 </script>
38
39 <style scoped>
40 #map {
41 position: absolute;
42 height: 100%;
43 width: 100%;
44 background-color: white
45 }
46 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <!--
2 * Mapbox GL展示天地图数据
3 * @Author: jiangbotao
4 * @Date: 2019-12-09 23:17:48
5 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-18 00:17:04
7 * @FilePath: \mymapbox\src\components\Map3857.vue
8 -->
9 <template>
10 <div >
11 <div id="map"></div>
12 </div>
13 </template>
14
15 <script>
16 import $ from 'jquery';
17 import mapboxgl from 'mapbox-gl';
18 import { Logo, MapService } from '@supermap/iclient-mapboxgl';
19 export default {
20 name: 'HelloWorld',
21
22 data () {
23 return {
24
25 }
26 },
27 mounted(){
28 var map = new mapboxgl.Map({
29 container: 'map', // container id
30 style: {
31 "version": 8,
32 "sources": {
33 "vec": {
34 "type": "raster",
35 "tiles": ["http://t0.tianditu.com/vec_w/wmts?service=WMTS&version=1.0.0&request=GetTile&layer=vec&style=default&format=tiles&TileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&tk=394404c8b901574fdc4cdf8c18a98448"],
36 "tileSize": 256
37 },
38 "cva": {
39 "type": "raster",
40 "tiles": ["http://t0.tianditu.com/cva_w/wmts?service=WMTS&version=1.0.0&request=GetTile&layer=cva&style=default&format=tiles&TileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&tk=394404c8b901574fdc4cdf8c18a98448"],
41 "tileSize": 256
42 }
43 },
44 "layers": [{
45 "id": "vec_lyr",
46 "type": "raster",
47 "source": "vec",
48 "minzoom": 0,
49 "maxzoom": 22
50 },{
51 "id": "cva_lyr",
52 "type": "raster",
53 "source": "cva",
54 "minzoom": 0,
55 "maxzoom": 22
56 }]
57 },
58 center: [116, 30], // starting position
59 zoom: 2 // starting zoom
60 });
61 map.addControl(new mapboxgl.NavigationControl(), 'top-left');
62 }
63 }
64 </script>
65
66 <style scoped>
67 #map {
68 position: absolute;
69 height: 100%;
70 width: 100%;
71 background-color: white
72 }
73 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <!--
2 * Mapbox GL展示天地图数据
3 * @Author: jiangbotao
4 * @Date: 2019-12-09 23:17:48
5 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-18 00:17:04
7 * @FilePath: \mymapbox\src\components\Map3857.vue
8 -->
9 <template>
10 <div >
11 <div id="map"></div>
12 </div>
13 </template>
14
15 <script>
16 import $ from 'jquery';
17 import mapboxgl from 'mapbox-gl';
18 import { Logo, MapService } from '@supermap/iclient-mapboxgl';
19 export default {
20 name: 'HelloWorld',
21
22 data () {
23 return {
24
25 }
26 },
27 mounted(){
28 var map = new mapboxgl.Map({
29 container: 'map', // container id
30 style: {
31 "version": 8,
32 "sources": {
33 "img": {
34 "type": "raster",
35 "tiles": ["http://t0.tianditu.com/img_w/wmts?service=WMTS&version=1.0.0&request=GetTile&layer=img&style=default&format=tiles&TileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&tk=394404c8b901574fdc4cdf8c18a98448"],
36 "tileSize": 256
37 },
38 "cia": {
39 "type": "raster",
40 "tiles": ["http://t0.tianditu.com/cia_w/wmts?service=WMTS&version=1.0.0&request=GetTile&layer=cia&style=default&format=tiles&TileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&tk=394404c8b901574fdc4cdf8c18a98448"],
41 "tileSize": 256
42 }
43 },
44 "layers": [{
45 "id": "img_lyr",
46 "type": "raster",
47 "source": "img",
48 "minzoom": 0,
49 "maxzoom": 22
50 },{
51 "id": "cia_lyr",
52 "type": "raster",
53 "source": "cia",
54 "minzoom": 0,
55 "maxzoom": 22
56 }]
57 },
58 center: [116, 30], // starting position
59 zoom: 2 // starting zoom
60 });
61 map.addControl(new mapboxgl.NavigationControl(), 'top-left');
62 }
63 }
64 </script>
65
66 <style scoped>
67 #map {
68 position: absolute;
69 height: 100%;
70 width: 100%;
71 background-color: white
72 }
73 </style>
...\ No newline at end of file ...\ No newline at end of file
1 <!--
2 * @Author: jiangbotao
3 * @Date: 2019-12-18 00:23:47
4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-18 01:38:13
6 * @FilePath: \supermapvue\src\components\layers\Map_mapbox.vue
7 -->
8 <template>
9 <div >
10 <div id="map"></div>
11 </div>
12 </template>
13
14 <script>
15 import $ from 'jquery';
16 import mapboxgl from 'mapbox-gl';
17 import { Logo, MapService } from '@supermap/iclient-mapboxgl';
18 export default {
19 name: 'Mapbox',
20
21 data () {
22 return {
23
24 }
25 },
26 mounted(){
27 var map = new mapboxgl.Map({
28 container: 'map',
29 zoom: 12,
30 center: [120.15, 30.25],
31 renderWorldCopies: false,
32 localIdeographFontFamily: "'黑体','san-serif'",
33 style: 'http://www.zjditu.cn/vtiles/styles/tdt/streets.json'
34 });
35 map.addControl(new mapboxgl.NavigationControl(), 'top-left');
36 }
37 }
38 </script>
39
40 <style scoped>
41 #map {
42 position: absolute;
43 height: 100%;
44 width: 100%;
45 background-color: white
46 }
47 </style>
...\ No newline at end of file ...\ No newline at end of file
...@@ -2,19 +2,20 @@ ...@@ -2,19 +2,20 @@
2 * @Author: jiangbotao 2 * @Author: jiangbotao
3 * @Date: 2019-12-17 19:48:20 3 * @Date: 2019-12-17 19:48:20
4 * @LastEditors: jiangbotao 4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-17 20:36:29 5 * @LastEditTime: 2019-12-18 00:18:57
6 * @FilePath: \supermapvue\src\components\ol\OL.vue 6 * @FilePath: \supermapvue\src\components\ol\OL.vue
7 --> 7 -->
8 <template> 8 <template>
9 <div > 9 <div >
10 <div id="map"></div> 10 <div id="map"></div>
11 </div> 11 </div>
12 </template> 12 </template>
13 13
14 <script> 14 <script>
15 import "ol/ol.css"; 15 import "ol/ol.css";
16 import { Map, View } from "ol"; 16 import { Map, View } from "ol";
17 import { XYZ } from 'ol/source'; 17 import { XYZ } from 'ol/source';
18 import WKT from 'ol/format/WKT';
18 import VectorSource from "ol/source/Vector"; 19 import VectorSource from "ol/source/Vector";
19 import Point from "ol/geom/Point"; 20 import Point from "ol/geom/Point";
20 import {Draw, Modify, Snap} from 'ol/interaction'; 21 import {Draw, Modify, Snap} from 'ol/interaction';
...@@ -22,95 +23,86 @@ import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer"; ...@@ -22,95 +23,86 @@ import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
22 import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style'; 23 import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
23 24
24 export default { 25 export default {
25 data() { 26 data() {
26 return { 27 return {
27 map: null 28 map: null
28 }; 29 };
29 }, 30 },
30 mounted() { 31 mounted() {
31 var tdt_vec = new TileLayer({ 32 var tdt_vec = new TileLayer({
32 source: new XYZ({ 33 source: new XYZ({
33 url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448" 34 url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
34 }) 35 })
35 }); 36 });
36 var tdt_cva = new TileLayer({ 37 var tdt_cva = new TileLayer({
37 source: new XYZ({ 38 source: new XYZ({
38 url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448" 39 url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
39 }) 40 })
40 }); 41 });
41 // 矢量绘制图层 42 // 矢量绘制图层
42 var source = new VectorSource(); 43 var source = new VectorSource();
43 var vectorLayer = new VectorLayer({ 44 var vectorLayer = new VectorLayer({
44 source: source, 45 source: source,
45 style: new Style({ 46 style: new Style({
46 fill: new Fill({
47 color: 'rgba(255, 0, 0, 0.2)'
48 }),
49 stroke: new Stroke({
50 color: '#ffcc33',
51 width: 2
52 }),
53 image: new CircleStyle({
54 radius: 7,
55 fill: new Fill({ 47 fill: new Fill({
56 color: '#ffcc33' 48 color: 'rgba(255, 0, 0, 0.2)'
49 }),
50 stroke: new Stroke({
51 color: '#ffcc33',
52 width: 2
53 }),
54 image: new CircleStyle({
55 radius: 7,
56 fill: new Fill({
57 color: '#ffcc33'
58 })
57 }) 59 })
58 }) 60 })
59 })
60 });
61 this.map = new Map({
62 target: "map",
63 layers: [
64 tdt_vec, tdt_cva, vectorLayer
65 ],
66 view: new View({
67 projection: "EPSG:4326",
68 center: [120.79, 27.99],
69 zoom: 12,
70 minZoom: 10,
71 maxZoom: 18
72 })
73 });
74
75 var modify = new Modify({source: source});
76 this.map.addInteraction(modify);
77 modify.on('modifyend',function(e){
78 var features = e.features.getArray();
79 console.log(features);
80 });
81
82 var draw, snap; // global so we can remove them later
83 function addInteractions(map) {
84 draw = new Draw({
85 source: source,
86 type: 'Point'
87 }); 61 });
88 draw.on('drawstart', function (e) { 62 this.map = new Map({
89 source.clear(); // implicit remove of last feature. 63 target: "map",
64 layers: [
65 tdt_vec, tdt_cva, vectorLayer
66 ],
67 view: new View({
68 projection: "EPSG:4326",
69 center: [120.79, 27.99],
70 zoom: 12,
71 minZoom: 10,
72 maxZoom: 18
73 })
90 }); 74 });
91 draw.on('drawend', function(evt){ 75
92 var feature = evt.feature; 76 var modify = new Modify({source: source});
93 var p = feature.getGeometry(); 77 this.map.addInteraction(modify);
94 console.log(p.getCoordinates()); 78 modify.on('modifyend',function(e){
95 var coord = p.getCoordinates(); 79 var features = e.features.getArray();
96 map.getView().animate({center: [coord[0], coord[1]]}); 80 console.log(features);
97 }); 81 });
98 map.addInteraction(draw);
99 snap = new Snap({source: source});
100 map.addInteraction(snap);
101 }
102
103 /**
104 * Handle change event.
105 */
106 // typeSelect.onchange = function(map) {
107 // map.removeInteraction(draw);
108 // map.removeInteraction(snap);
109 // addInteractions();
110 // };
111 82
112 addInteractions(this.map); 83 var draw, snap; // global so we can remove them later
113 } 84 function addInteractions(map) {
85 draw = new Draw({
86 source: source,
87 type: 'Point'
88 });
89 draw.on('drawstart', function (e) {
90 source.clear(); // implicit remove of last feature.
91 });
92 draw.on('drawend', function(evt){
93 var feature = evt.feature;
94 var p = feature.getGeometry();
95 var wktformat= new WKT();
96 console.log('Draw: ' + wktformat.writeGeometry(p));
97 var coord = p.getCoordinates();
98 map.getView().animate({center: [coord[0], coord[1]]});
99 });
100 map.addInteraction(draw);
101 snap = new Snap({source: source});
102 map.addInteraction(snap);
103 }
104 addInteractions(this.map);
105 }
114 }; 106 };
115 </script> 107 </script>
116 108
......
1 <template>
2 <div>
3 <div id="map"></div>
4 </div>
5 </template>
6
7 <script>
8 import "ol/ol.css";
9 import { Map, View } from "ol";
10 import { XYZ } from "ol/source";
11 import VectorSource from "ol/source/Vector";
12 import Point from "ol/geom/Point";
13 import WKT from "ol/format/WKT";
14 import { Select, Draw, Modify, Snap } from "ol/interaction";
15 import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
16 import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
17
18 export default {
19 data() {
20 return {
21 map: null
22 };
23 },
24 mounted() {
25 var tdt_vec = new TileLayer({
26 source: new XYZ({
27 url:
28 "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
29 })
30 });
31 var tdt_cva = new TileLayer({
32 source: new XYZ({
33 url:
34 "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
35 })
36 });
37 // 矢量绘制图层
38 var source = new VectorSource();
39 var vectorLayer = new VectorLayer({
40 source: source,
41 style: new Style({
42 fill: new Fill({
43 color: "rgba(255, 0, 0, 0.2)"
44 }),
45 stroke: new Stroke({
46 color: "#ffcc33",
47 width: 2
48 }),
49 image: new CircleStyle({
50 radius: 7,
51 fill: new Fill({
52 color: "#ffcc33"
53 })
54 })
55 })
56 });
57 this.map = new Map({
58 target: "map",
59 layers: [tdt_vec, tdt_cva, vectorLayer],
60 view: new View({
61 projection: "EPSG:4326",
62 center: [120.79, 27.99],
63 zoom: 12,
64 minZoom: 10,
65 maxZoom: 18
66 })
67 });
68
69 ////select
70 var select = new Select();
71 this.map.addInteraction(select);
72 ////draw
73 var draw = new Draw({
74 source: source,
75 stopClick: true,
76 freehand: false,
77 type: "Polygon"
78 });
79 this.map.addInteraction(draw);
80 draw.setActive(true);
81 draw.on("drawend", function(e) {
82 draw.setActive(false);
83 var feature = e.feature;
84 var wktformat = new WKT();
85 console.log("Draw: " + wktformat.writeGeometry(feature.getGeometry()));
86 });
87 ////modify
88 var modify = new Modify({
89 features: select.getFeatures()
90 });
91 this.map.addInteraction(modify);
92 modify.on("modifyend", function(e) {
93 var features = e.features.array_;
94 var wktformat = new WKT();
95 console.log("Modify: " + wktformat.writeGeometry(features[0].getGeometry()));
96 });
97 }
98 };
99 </script>
100
101 <!-- Add "scoped" attribute to limit CSS to this component only -->
102 <style scoped>
103 #map {
104 position: absolute;
105 height: 100%;
106 width: 100%;
107 background-color: white;
108 }
109 </style>
1 <!--
2 * @Author: jiangbotao
3 * @Date: 2019-12-17 23:19:19
4 * @LastEditors: jiangbotao
5 * @LastEditTime: 2019-12-18 00:02:39
6 * @FilePath: \supermapvue\src\components\ol\OL_measure.vue
7 -->
8 <template>
9 <div >
10 <div id="map"></div>
11 </div>
12 </template>
13
14 <script>
15 import "ol/ol.css";
16 import { Map, View } from "ol";
17 import { XYZ } from 'ol/source';
18 import WKT from 'ol/format/WKT';
19 import VectorSource from "ol/source/Vector";
20 import Point from "ol/geom/Point";
21 import {Draw, Modify, Snap} from 'ol/interaction';
22 import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
23 import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
24
25 export default {
26 data() {
27 return {
28 map: null
29 };
30 },
31 mounted() {
32 var tdt_vec = new TileLayer({
33 source: new XYZ({
34 url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
35 })
36 });
37 var tdt_cva = new TileLayer({
38 source: new XYZ({
39 url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
40 })
41 });
42 // 矢量绘制图层
43 var source = new VectorSource();
44 var vectorLayer = new VectorLayer({
45 source: source,
46 style: new Style({
47 fill: new Fill({
48 color: 'rgba(255, 0, 0, 0.2)'
49 }),
50 stroke: new Stroke({
51 color: '#ffcc33',
52 width: 2
53 }),
54 image: new CircleStyle({
55 radius: 7,
56 fill: new Fill({
57 color: '#ffcc33'
58 })
59 })
60 })
61 });
62 this.map = new Map({
63 target: "map",
64 layers: [
65 tdt_vec, tdt_cva, vectorLayer
66 ],
67 view: new View({
68 projection: "EPSG:4326",
69 center: [120.79, 27.99],
70 zoom: 12,
71 minZoom: 10,
72 maxZoom: 18
73 })
74 });
75
76 }
77 };
78 </script>
79
80 <!-- Add "scoped" attribute to limit CSS to this component only -->
81 <style scoped>
82 #map {
83 position: absolute;
84 height: 100%;
85 width: 100%;
86 background-color: white
87 }
88 .ol-tooltip {
89 position: relative;
90 background: rgba(0, 0, 0, 0.5);
91 border-radius: 4px;
92 color: white;
93 padding: 4px 8px;
94 opacity: 0.7;
95 white-space: nowrap;
96 font-size: 12px;
97 }
98 .ol-tooltip-measure {
99 opacity: 1;
100 font-weight: bold;
101 }
102 .ol-tooltip-static {
103 background-color: #ffcc33;
104 color: black;
105 border: 1px solid white;
106 }
107 .ol-tooltip-measure:before,
108 .ol-tooltip-static:before {
109 border-top: 6px solid rgba(0, 0, 0, 0.5);
110 border-right: 6px solid transparent;
111 border-left: 6px solid transparent;
112 content: "";
113 position: absolute;
114 bottom: -6px;
115 margin-left: -7px;
116 left: 50%;
117 }
118 .ol-tooltip-static:before {
119 border-top-color: #ffcc33;
120 }
121 </style>
...\ No newline at end of file ...\ No newline at end of file
1 import Draw from 'ol/interaction/Draw'
2 import VectorSource from 'ol/source/Vector';
3 import VectorLayer from 'ol/layer/Vector';
4 import TileLayer from 'ol/layer/Tile';
5 import OSM from 'ol/source/OSM';
6
7 import {
8 unByKey
9 } from 'ol/Observable.js';
10 import Overlay from 'ol/Overlay';
11 import {
12 getArea,
13 getLength
14 } from 'ol/sphere.js';
15 import View from 'ol/View';
16 import {
17 LineString,
18 Polygon
19 } from 'ol/geom.js';
20 import {
21 Circle as CircleStyle,
22 Fill,
23 Stroke,
24 Style
25 } from 'ol/style.js';
26 export default{
27
28 measure(map, measureType) {
29 /**
30 * Currently drawn feature.
31 * @type {module:ol/Feature~Feature}
32 */
33 var sketch;
34
35
36 /**
37 * The help tooltip element.
38 * @type {Element}
39 */
40 var helpTooltipElement;
41
42
43 /**
44 * Overlay to show the help messages.
45 * @type {module:ol/Overlay}
46 */
47 var helpTooltip;
48
49
50 /**
51 * The measure tooltip element.
52 * @type {Element}
53 */
54 var measureTooltipElement;
55
56
57 /**
58 * Overlay to show the measurement.
59 * @type {module:ol/Overlay}
60 */
61 var measureTooltip;
62
63
64 /**
65 * Message to show when the user is drawing a polygon.
66 * @type {string}
67 */
68 var continuePolygonMsg = '继续点击绘制多边形';
69
70
71 /**
72 * Message to show when the user is drawing a line.
73 * @type {string}
74 */
75 var continueLineMsg = '继续点击绘制线';
76
77 createMeasureTooltip();
78 createHelpTooltip();
79
80 /**
81 * Handle pointer move.
82 * @param {module:ol/MapBrowserEvent~MapBrowserEvent} evt The event.
83 */
84 var pointerMoveHandler = function (evt) {
85 if (evt.dragging) {
86 return;
87 }
88 /** @type {string} */
89 var helpMsg = '请点击开始绘制';
90
91 if (sketch) {
92 var geom = (sketch.getGeometry());
93 if (geom instanceof Polygon) {
94 helpMsg = continuePolygonMsg;
95 } else if (geom instanceof LineString) {
96 helpMsg = continueLineMsg;
97 }
98 }
99
100 helpTooltipElement.innerHTML = helpMsg;
101 helpTooltip.setPosition(evt.coordinate);
102
103 helpTooltipElement.classList.remove('hidden');
104 };
105
106 map.on('pointermove', pointerMoveHandler);
107
108 map.getViewport().addEventListener('mouseout', function () {
109 helpTooltipElement.classList.add('hidden');
110 });
111
112 var draw;
113 var formatLength = function (line) {
114 var length = getLength(line);
115 var output;
116 if (length > 100) {
117 output = (Math.round(length / 1000 * 100) / 100) +
118 ' ' + 'km';
119 } else {
120 output = (Math.round(length * 100) / 100) +
121 ' ' + 'm';
122 }
123 return output;
124 };
125 var formatArea = function (polygon) {
126 var area = getArea(polygon);
127 var output;
128 if (area > 10000) {
129 output = (Math.round(area / 1000000 * 100) / 100) +
130 ' ' + 'km<sup>2</sup>';
131 } else {
132 output = (Math.round(area * 100) / 100) +
133 ' ' + 'm<sup>2</sup>';
134 }
135 return output;
136 };
137 var source;
138 // var layer ;
139 // 获取存放feature的vectorlayer层。map初始化的时候可以添加好了
140 for(let layerTmp of map.getLayers().getArray()){
141 if(layerTmp.get("name")=="feature"){
142 // layer = layerTmp;
143 // layerTmp.setSource(null)
144 source= layerTmp.getSource();
145 }
146 }
147
148 function addInteraction() {
149 var type = (measureType == 'area' ? 'Polygon' : 'LineString');
150 draw = new Draw({
151 source: source,
152 type: type,
153 style: new Style({
154 fill: new Fill({
155 color: 'rgba(255, 255, 255, 0.2)'
156 }),
157 stroke: new Stroke({
158 color: 'rgba(0, 0, 0, 0.5)',
159 lineDash: [10, 10],
160 width: 2
161 }),
162 image: new CircleStyle({
163 radius: 5,
164 stroke: new Stroke({
165 color: 'rgba(0, 0, 0, 0.7)'
166 }),
167 fill: new Fill({
168 color: 'rgba(255, 255, 255, 0.2)'
169 })
170 })
171 })
172 });
173 map.addInteraction(draw);
174
175 var listener;
176 draw.on('drawstart',
177 function (evt) {
178 // set sketch
179 sketch = evt.feature;
180
181 /** @type {module:ol/coordinate~Coordinate|undefined} */
182 var tooltipCoord = evt.coordinate;
183
184 listener = sketch.getGeometry().on('change', function (evt) {
185 var geom = evt.target;
186 var output;
187 if (geom instanceof Polygon) {
188 output = formatArea(geom);
189 tooltipCoord = geom.getInteriorPoint().getCoordinates();
190 } else if (geom instanceof LineString) {
191 output = formatLength(geom);
192 tooltipCoord = geom.getLastCoordinate();
193 }
194 measureTooltipElement.innerHTML = output;
195 measureTooltip.setPosition(tooltipCoord);
196 });
197 }, this);
198
199 draw.on('drawend',
200 function () {
201 measureTooltipElement.className = 'tooltip tooltip-static';
202 measureTooltip.setOffset([0, -7]);
203 // unset sketch
204 sketch = null;
205 // unset tooltip so that a new one can be created
206 measureTooltipElement = null;
207 createMeasureTooltip();
208 unByKey(listener);
209 map.un('pointermove', pointerMoveHandler);
210 map.removeInteraction(draw);
211 helpTooltipElement.classList.add('hidden');
212 }, this);
213 }
214
215 function createHelpTooltip() {
216 if (helpTooltipElement) {
217 helpTooltipElement.parentNode.removeChild(helpTooltipElement);
218 }
219 helpTooltipElement = document.createElement('div');
220 helpTooltipElement.className = 'tooltip hidden';
221 helpTooltip = new Overlay({
222 element: helpTooltipElement,
223 offset: [15, 0],
224 positioning: 'center-left'
225 });
226 map.addOverlay(helpTooltip);
227 }
228
229 function createMeasureTooltip() {
230 if (measureTooltipElement) {
231 measureTooltipElement.parentNode.removeChild(measureTooltipElement);
232 }
233 measureTooltipElement = document.createElement('div');
234 measureTooltipElement.className = 'tooltip tooltip-measure';
235 measureTooltip = new Overlay({
236 element: measureTooltipElement,
237 offset: [0, -15],
238 positioning: 'bottom-center'
239 });
240 map.addOverlay(measureTooltip);
241 }
242 // 量测调用
243 addInteraction();
244 }
245 }
...\ No newline at end of file ...\ No newline at end of file
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
3 * @Author: jiangbotao 3 * @Author: jiangbotao
4 * @Date: 2019-12-10 22:15:53 4 * @Date: 2019-12-10 22:15:53
5 * @LastEditors: jiangbotao 5 * @LastEditors: jiangbotao
6 * @LastEditTime: 2019-12-17 00:12:35 6 * @LastEditTime: 2019-12-18 00:51:46
7 * @FilePath: \supermapvue\src\components\vt\Map_wz.vue 7 * @FilePath: \supermapvue\src\components\vt\Map_wz.vue
8 --> 8 -->
9 <template> 9 <template>
......
...@@ -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-17 20:35:13 5 * @LastEditTime: 2019-12-18 01:19:00
6 * @FilePath: \supermapvue\src\main.js 6 * @FilePath: \supermapvue\src\main.js
7 */ 7 */
8 import Vue from 'vue' 8 import Vue from 'vue'
......
...@@ -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-17 19:54:02 5 * @LastEditTime: 2019-12-18 01:35:19
6 * @FilePath: \supermapvue\src\components\menu\MyMenu.vue 6 * @FilePath: \supermapvue\src\components\menu\MyMenu.vue
7 --> 7 -->
8 <template> 8 <template>
...@@ -14,11 +14,11 @@ ...@@ -14,11 +14,11 @@
14 <a-sub-menu key="sub1"> 14 <a-sub-menu key="sub1">
15 <span slot="title"><a-icon type="user" /><span>基本信息</span></span> 15 <span slot="title"><a-icon type="user" /><span>基本信息</span></span>
16 <a-menu-item key="1_1"><router-link :to="'/'">地图信息</router-link></a-menu-item> 16 <a-menu-item key="1_1"><router-link :to="'/'">地图信息</router-link></a-menu-item>
17 <a-menu-item key="1_2"><router-link :to="'/rastertile'">栅格瓦片</router-link></a-menu-item> 17 <a-menu-item key="1_3"><router-link :to="'/rastertile'">栅格瓦片(iServer)</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_4"><router-link :to="'/mvt'">矢量瓦片(iServer)</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_5"><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_6"><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-menu-item key="1_7"><router-link :to="'/mvt_wzdemo'">温州Demo</router-link></a-menu-item>
22 </a-sub-menu> 22 </a-sub-menu>
23 <a-sub-menu key="sub2"> 23 <a-sub-menu key="sub2">
24 <span slot="title"><a-icon type="team" /><span>要素查询</span></span> 24 <span slot="title"><a-icon type="team" /><span>要素查询</span></span>
...@@ -48,8 +48,20 @@ ...@@ -48,8 +48,20 @@
48 <a-menu-item key="5_4"><router-link :to="'/theme_label'">注记图</router-link></a-menu-item> 48 <a-menu-item key="5_4"><router-link :to="'/theme_label'">注记图</router-link></a-menu-item>
49 </a-sub-menu> 49 </a-sub-menu>
50 <a-sub-menu key="sub6"> 50 <a-sub-menu key="sub6">
51 <span slot="title"><a-icon type="radar-chart" /><span>数据源</span></span>
52 <a-menu-item key="6_1"><router-link :to="'/lyr_ags'">ArcGIS矢量图层</router-link></a-menu-item>
53 <a-menu-item key="6_2"><router-link :to="'/lyr_tdt'">天地图(矢量注记)</router-link></a-menu-item>
54 <a-menu-item key="6_3"><router-link :to="'/lyr_tdt_img'">天地图(影像注记)</router-link></a-menu-item>
55 <a-menu-item key="6_4"><router-link :to="'/lyr_mapbox'">Mapbox</router-link></a-menu-item>
56 <a-menu-item key="6_5"><router-link :to="'/lyr_gaode'">高德地图</router-link></a-menu-item>
57 <a-menu-item key="6_6"><router-link :to="'/lyr_3dmvt'">第三方矢量瓦片</router-link></a-menu-item>
58 <a-menu-item key="6_7"><router-link :to="'/lyr_zj_basic'">浙江天地图(基本)</router-link></a-menu-item>
59 </a-sub-menu>
60 <a-sub-menu key="sub7">
51 <span slot="title"><a-icon type="up-square" /><span>OpenLayers</span></span> 61 <span slot="title"><a-icon type="up-square" /><span>OpenLayers</span></span>
52 <a-menu-item key="6_1"><router-link :to="'/map_ol'">OL</router-link></a-menu-item> 62 <a-menu-item key="7_1"><router-link :to="'/map_ol'">OL点与改变视图</router-link></a-menu-item>
63 <a-menu-item key="7_2"><router-link :to="'/map_ol2'">OL面绘制与修改</router-link></a-menu-item>
64 <a-menu-item key="7_3"><router-link :to="'/map_ol_measure'">OL量测(未实现)</router-link></a-menu-item>
53 </a-sub-menu> 65 </a-sub-menu>
54 </a-menu> 66 </a-menu>
55 </template> 67 </template>
......
...@@ -2,7 +2,14 @@ ...@@ -2,7 +2,14 @@
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-17 20:37:03 5 * @LastEditTime: 2019-12-18 00:31:32
6 * @FilePath: \supermapvue\src\router\index.js
7 */
8 /*
9 * @Author: jiangbotao
10 * @Date: 2019-12-12 17:40:15
11 * @LastEditors: jiangbotao
12 * @LastEditTime: 2019-12-18 00:03:33
6 * @FilePath: \supermapvue\src\router\index.js 13 * @FilePath: \supermapvue\src\router\index.js
7 */ 14 */
8 import Vue from 'vue' 15 import Vue from 'vue'
...@@ -18,6 +25,41 @@ export default new Router({ ...@@ -18,6 +25,41 @@ export default new Router({
18 component: () => import('@/components/basic/Map_info') 25 component: () => import('@/components/basic/Map_info')
19 }, 26 },
20 { 27 {
28 path: '/lyr_tdt',
29 name: 'Map_TDT',
30 component: () => import('@/components/layers/Map_tdt')
31 },
32 {
33 path: '/lyr_tdt_img',
34 name: 'Map_TDT_img',
35 component: () => import('@/components/layers/Map_tdt_img')
36 },
37 {
38 path: '/lyr_ags',
39 name: 'Map_ags',
40 component: () => import('@/components/layers/Map_ags')
41 },
42 {
43 path: '/lyr_mapbox',
44 name: 'Map_mapbox',
45 component: () => import('@/components/layers/Map_mapbox')
46 },
47 {
48 path: '/lyr_gaode',
49 name: 'Map_gaode',
50 component: () => import('@/components/layers/Map_gaode')
51 },
52 {
53 path: '/lyr_3dmvt',
54 name: 'Map_3dmvt',
55 component: () => import('@/components/layers/Map_3dmvt')
56 },
57 {
58 path: '/lyr_zj_basic',
59 name: 'Map_zj_basic',
60 component: () => import('@/components/layers/Map_zj_basic')
61 },
62 {
21 path: '/rastertile', 63 path: '/rastertile',
22 name: 'MapRasterTile', 64 name: 'MapRasterTile',
23 component: () => import('@/components/basic/Map_rastertiles') 65 component: () => import('@/components/basic/Map_rastertiles')
...@@ -121,6 +163,16 @@ export default new Router({ ...@@ -121,6 +163,16 @@ export default new Router({
121 path: '/map_ol', 163 path: '/map_ol',
122 name: 'Map_OL', 164 name: 'Map_OL',
123 component: () => import('@/components/ol/OL') 165 component: () => import('@/components/ol/OL')
166 },
167 {
168 path: '/map_ol2',
169 name: 'Map_OL2',
170 component: () => import('@/components/ol/OL2')
171 },
172 {
173 path: '/map_ol_measure',
174 name: 'Map_OL_measure',
175 component: () => import('@/components/ol/OL_measure')
124 } 176 }
125 ] 177 ]
126 }) 178 })
......