|
1 | 1 | <!DOCTYPE html> |
2 | 2 | <html xmlns="http://www.w3.org/1999/xhtml"> |
3 | | - <head> |
4 | | - <meta charset="utf-8" /> |
5 | | - <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> |
6 | | - <title>Vue-GeoJSON</title> |
7 | | - <script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script> |
8 | | - <style type="text/css"> |
9 | | - #main { |
10 | | - margin: 0 0; |
11 | | - width: 100%; |
12 | | - height: 100vh; |
13 | | - } |
14 | | - #map { |
15 | | - height: 100vh; |
16 | | - width: 100%; |
17 | | - } |
18 | | - </style> |
19 | | - </head> |
| 3 | + <head> |
| 4 | + <meta charset="utf-8" /> |
| 5 | + <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> |
| 6 | + <title>Vue-GeoJSON</title> |
| 7 | + <script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script> |
| 8 | + <style type="text/css"> |
| 9 | + #main { |
| 10 | + margin: 0 0; |
| 11 | + width: 100%; |
| 12 | + height: 100vh; |
| 13 | + } |
| 14 | + #map { |
| 15 | + height: 100vh; |
| 16 | + width: 100%; |
| 17 | + } |
| 18 | + </style> |
| 19 | + </head> |
20 | 20 |
|
21 | | - <body> |
22 | | - <div id="app"> |
23 | | - <mapgis-web-map |
24 | | - id="map" |
25 | | - :map-style="mapStyle" |
26 | | - :zoom="mapZoom" |
27 | | - :center="outerCenter" |
28 | | - :crs="mapCrs" |
29 | | - v-on:load="handleMapLoad"> |
30 | | - <mapgis-ogc-wmts-layer |
31 | | - :layer-id="layerWmtsId" |
32 | | - :source-id="sourceWmtsId" |
33 | | - :base-url="wmtsurl" |
34 | | - :tile-matrix-set="tileMatrixSet" |
35 | | - :wmts-layer="layer" |
36 | | - :format="format" |
37 | | - :token="token"> |
38 | | - </mapgis-ogc-wmts-layer> |
39 | | - <canvas id="canvasID" width="400" height="400">Canvas not supported</canvas> |
40 | | - <mapgis-canvas-layer |
41 | | - :source-id="canvasSourceId" |
42 | | - :source="canvasSource" |
43 | | - :layer-id="canvasLayerId" |
44 | | - :layer="canvasLayer" |
45 | | - v-on:layer-source-loading="handCanvasLoad"> |
46 | | - </mapgis-canvas-layer> |
47 | | - </mapgis-web-map> |
48 | | - </div> |
49 | | - <script> |
50 | | - new Vue({ |
51 | | - el: '#app', |
52 | | - data() { |
53 | | - return { |
54 | | - mapStyle: { |
55 | | - version: 8, |
56 | | - sources: {}, |
57 | | - layers: [] |
58 | | - }, |
59 | | - mapZoom: 5, |
60 | | - outerCenter: [116.3, 40.5], |
61 | | - mapCrs: 'EPSG:4326', |
| 21 | + <body> |
| 22 | + <div id="app"> |
| 23 | + <mapgis-web-map id="map" :map-style="mapStyle" :zoom="mapZoom" :center="outerCenter" :crs="mapCrs" v-on:load="handleMapLoad"> |
| 24 | + <mapgis-ogc-wmts-layer |
| 25 | + :layer-id="layerWmtsId" |
| 26 | + :source-id="sourceWmtsId" |
| 27 | + :base-url="wmtsurl" |
| 28 | + :tile-matrix-set="tileMatrixSet" |
| 29 | + :wmts-layer="layer" |
| 30 | + :format="format" |
| 31 | + :token="token" |
| 32 | + > |
| 33 | + </mapgis-ogc-wmts-layer> |
| 34 | + <canvas id="canvasID" width="400" height="400">Canvas not supported</canvas> |
| 35 | + <mapgis-canvas-layer |
| 36 | + :source-id="canvasSourceId" |
| 37 | + :source="canvasSource" |
| 38 | + :layer-id="canvasLayerId" |
| 39 | + :layer="canvasLayer" |
| 40 | + v-on:layer-source-loading="handCanvasLoad" |
| 41 | + > |
| 42 | + </mapgis-canvas-layer> |
| 43 | + </mapgis-web-map> |
| 44 | + </div> |
| 45 | + <script> |
| 46 | + new Vue({ |
| 47 | + el: '#app', |
| 48 | + data() { |
| 49 | + return { |
| 50 | + mapStyle: { |
| 51 | + version: 8, |
| 52 | + sources: {}, |
| 53 | + layers: [] |
| 54 | + }, |
| 55 | + mapZoom: 5, |
| 56 | + outerCenter: [116.3, 40.5], |
| 57 | + mapCrs: 'EPSG:4326', |
62 | 58 |
|
63 | | - layerWmtsId: 'ogcwmts_layerId', |
64 | | - sourceWmtsId: 'ogcwmts_sourceId', |
65 | | - wmtsurl: 'http://t0.tianditu.com/vec_c/wmts', |
66 | | - layer:"vec", |
67 | | - tileMatrixSet:"c", |
68 | | - format:"tiles", |
69 | | - token:"f5347cab4b28410a6e8ba5143e3d5a35", |
| 59 | + layerWmtsId: 'ogcwmts_layerId', |
| 60 | + sourceWmtsId: 'ogcwmts_sourceId', |
| 61 | + wmtsurl: 'http://t0.tianditu.com/vec_c/wmts', |
| 62 | + layer: 'vec', |
| 63 | + tileMatrixSet: 'c', |
| 64 | + format: 'tiles', |
| 65 | + token: { |
| 66 | + key: 'tk', |
| 67 | + value: 'f5347cab4b28410a6e8ba5143e3d5a35' |
| 68 | + }, |
70 | 69 |
|
71 | | - canvasSourceId: 'canvassourceid', |
72 | | - canvasSource: { |
73 | | - type: 'canvas', |
74 | | - canvas: 'canvasID', |
75 | | - coordinates: [ |
76 | | - [108.7381, 45.6339], |
77 | | - [126.0011, 45.6339], |
78 | | - [126.0011, 34.2583], |
79 | | - [108.7381, 34.2583] |
80 | | - ], |
81 | | - animate: true |
82 | | - }, |
83 | | - canvasLayerId: 'canvaslayerid', |
84 | | - canvasLayer: { |
85 | | - source: 'canvassourceid', |
86 | | - type: 'raster' |
87 | | - } |
88 | | - }; |
89 | | - }, |
90 | | - methods: { |
91 | | - handleMapLoad(payload) { |
92 | | - this.map = payload.map; |
93 | | - }, |
94 | | - handCanvasLoad() { |
95 | | - console.log('load'); |
96 | | - this.initCanvas(); |
97 | | - }, |
98 | | - initCanvas() { |
99 | | - var canvas = document.getElementById('canvasID'); |
100 | | - var ctx = canvas.getContext('2d'); |
101 | | - var circles = []; |
102 | | - var radius = 20; |
| 70 | + canvasSourceId: 'canvassourceid', |
| 71 | + canvasSource: { |
| 72 | + type: 'canvas', |
| 73 | + canvas: 'canvasID', |
| 74 | + coordinates: [ |
| 75 | + [108.7381, 45.6339], |
| 76 | + [126.0011, 45.6339], |
| 77 | + [126.0011, 34.2583], |
| 78 | + [108.7381, 34.2583] |
| 79 | + ], |
| 80 | + animate: true |
| 81 | + }, |
| 82 | + canvasLayerId: 'canvaslayerid', |
| 83 | + canvasLayer: { |
| 84 | + source: 'canvassourceid', |
| 85 | + type: 'raster' |
| 86 | + } |
| 87 | + }; |
| 88 | + }, |
| 89 | + methods: { |
| 90 | + handleMapLoad(payload) { |
| 91 | + this.map = payload.map; |
| 92 | + }, |
| 93 | + handCanvasLoad() { |
| 94 | + console.log('load'); |
| 95 | + this.initCanvas(); |
| 96 | + }, |
| 97 | + initCanvas() { |
| 98 | + var canvas = document.getElementById('canvasID'); |
| 99 | + var ctx = canvas.getContext('2d'); |
| 100 | + var circles = []; |
| 101 | + var radius = 20; |
103 | 102 |
|
104 | | - function Circle(x, y, dx, dy, radius, color) { |
105 | | - this.x = x; |
106 | | - this.y = y; |
107 | | - this.dx = dx; |
108 | | - this.dy = dy; |
109 | | - this.radius = radius; |
110 | | - this.draw = function () { |
111 | | - ctx.beginPath(); |
112 | | - ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); |
113 | | - ctx.strokeStyle = color; |
114 | | - ctx.stroke(); |
115 | | - }; |
116 | | - this.update = function () { |
117 | | - if (this.x + this.radius > 400 || this.x - this.radius < 0) { |
118 | | - this.dx = -this.dx; |
119 | | - } |
120 | | - if (this.y + this.radius > 400 || this.y - this.radius < 0) { |
121 | | - this.dy = -this.dy; |
122 | | - } |
123 | | - this.x += this.dx; |
124 | | - this.y += this.dy; |
125 | | - this.draw(); |
126 | | - }; |
127 | | - } |
128 | | - for (var i = 0; i < 25; i++) { |
129 | | - var color = '#' + (0x1000000 + Math.random() * 0xffffff).toString(16).substr(1, 6); |
130 | | - var x = Math.random() * (400 - radius * 2) + radius; |
131 | | - var y = Math.random() * (400 - radius * 2) + radius; |
132 | | - var dx = (Math.random() - 0.5) * 2; |
133 | | - var dy = (Math.random() - 0.5) * 2; |
134 | | - circles.push(new Circle(x, y, dx, dy, radius, color)); |
135 | | - } |
136 | | - function animate() { |
137 | | - requestAnimationFrame(animate); |
138 | | - ctx.clearRect(0, 0, 400, 400); |
139 | | - for (var r = 0; r < 25; r++) { |
140 | | - circles[r].update(); |
141 | | - } |
142 | | - } |
143 | | - animate(); |
144 | | - } |
145 | | - } |
146 | | - }); |
147 | | - </script> |
148 | | - </body> |
| 103 | + function Circle(x, y, dx, dy, radius, color) { |
| 104 | + this.x = x; |
| 105 | + this.y = y; |
| 106 | + this.dx = dx; |
| 107 | + this.dy = dy; |
| 108 | + this.radius = radius; |
| 109 | + this.draw = function () { |
| 110 | + ctx.beginPath(); |
| 111 | + ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); |
| 112 | + ctx.strokeStyle = color; |
| 113 | + ctx.stroke(); |
| 114 | + }; |
| 115 | + this.update = function () { |
| 116 | + if (this.x + this.radius > 400 || this.x - this.radius < 0) { |
| 117 | + this.dx = -this.dx; |
| 118 | + } |
| 119 | + if (this.y + this.radius > 400 || this.y - this.radius < 0) { |
| 120 | + this.dy = -this.dy; |
| 121 | + } |
| 122 | + this.x += this.dx; |
| 123 | + this.y += this.dy; |
| 124 | + this.draw(); |
| 125 | + }; |
| 126 | + } |
| 127 | + for (var i = 0; i < 25; i++) { |
| 128 | + var color = '#' + (0x1000000 + Math.random() * 0xffffff).toString(16).substr(1, 6); |
| 129 | + var x = Math.random() * (400 - radius * 2) + radius; |
| 130 | + var y = Math.random() * (400 - radius * 2) + radius; |
| 131 | + var dx = (Math.random() - 0.5) * 2; |
| 132 | + var dy = (Math.random() - 0.5) * 2; |
| 133 | + circles.push(new Circle(x, y, dx, dy, radius, color)); |
| 134 | + } |
| 135 | + function animate() { |
| 136 | + requestAnimationFrame(animate); |
| 137 | + ctx.clearRect(0, 0, 400, 400); |
| 138 | + for (var r = 0; r < 25; r++) { |
| 139 | + circles[r].update(); |
| 140 | + } |
| 141 | + } |
| 142 | + animate(); |
| 143 | + } |
| 144 | + } |
| 145 | + }); |
| 146 | + </script> |
| 147 | + </body> |
149 | 148 | </html> |
0 commit comments