v-ol-map 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/ol-map.es.js +1 -0
- package/lib/ol-map.umd.js +2 -2
- package/package.json +13 -1
- package/.eslintrc.cjs +0 -20
- package/counter.js +0 -9
- package/index.html +0 -13
- package/javascript.svg +0 -1
- package/jsconfig.json +0 -9
- package/public/vite.svg +0 -1
- package/src/App.vue +0 -46
- package/src/components/index.js +0 -25
- package/src/components/layers/BaseLayer.vue +0 -59
- package/src/components/layers/tile/index.js +0 -7
- package/src/components/layers/tile/index.vue +0 -308
- package/src/components/map/index.js +0 -7
- package/src/components/map/index.vue +0 -194
- package/src/main.js +0 -10
- package/src/utils/cityMap.js +0 -2255
- package/src/utils/index.js +0 -103
- package/src/utils/projConvert.js +0 -320
- package/style.css +0 -97
- package/vite.config.js +0 -32
package/package.json
CHANGED
|
@@ -1,8 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "v-ol-map",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.1.
|
|
4
|
+
"version": "1.1.1",
|
|
5
5
|
"main": "lib/ol-map.umd.js",
|
|
6
|
+
"module": "lib/ol-map.es.js",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": "./lib/ol-map.es.js",
|
|
10
|
+
"require": "./lib/ol-map.umd.js"
|
|
11
|
+
},
|
|
12
|
+
"./dist/style.css": {
|
|
13
|
+
"import": "./lib/style.css",
|
|
14
|
+
"require": "./lib/style.css"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
"files": ["lib"],
|
|
6
18
|
"scripts": {
|
|
7
19
|
"dev": "vite",
|
|
8
20
|
"build": "vite build",
|
package/.eslintrc.cjs
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
module.exports = {
|
|
2
|
-
env: {
|
|
3
|
-
browser: true,
|
|
4
|
-
es2021: true,
|
|
5
|
-
node: true
|
|
6
|
-
},
|
|
7
|
-
extends: [
|
|
8
|
-
'plugin:vue/vue3-essential',
|
|
9
|
-
'standard'
|
|
10
|
-
],
|
|
11
|
-
parserOptions: {
|
|
12
|
-
ecmaVersion: 'latest',
|
|
13
|
-
sourceType: 'module'
|
|
14
|
-
},
|
|
15
|
-
plugins: [
|
|
16
|
-
'vue'
|
|
17
|
-
],
|
|
18
|
-
rules: {
|
|
19
|
-
}
|
|
20
|
-
}
|
package/counter.js
DELETED
package/index.html
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>Vite App</title>
|
|
8
|
-
</head>
|
|
9
|
-
<body>
|
|
10
|
-
<div id="app"></div>
|
|
11
|
-
<script type="module" src="/src/main.js"></script>
|
|
12
|
-
</body>
|
|
13
|
-
</html>
|
package/javascript.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>
|
package/jsconfig.json
DELETED
package/public/vite.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
package/src/App.vue
DELETED
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div id="app">
|
|
3
|
-
<v-map :view="view" @click="onClick" @contextmenu.prevent="onContextmenu">
|
|
4
|
-
<v-tile tile-type="BD"></v-tile>
|
|
5
|
-
</v-map>
|
|
6
|
-
</div>
|
|
7
|
-
</template>
|
|
8
|
-
|
|
9
|
-
<script>
|
|
10
|
-
export default {
|
|
11
|
-
name: 'App',
|
|
12
|
-
data () {
|
|
13
|
-
return {
|
|
14
|
-
view: {
|
|
15
|
-
city: '厦门',
|
|
16
|
-
center: [118, 24],
|
|
17
|
-
zoom: 12
|
|
18
|
-
}
|
|
19
|
-
}
|
|
20
|
-
},
|
|
21
|
-
methods: {
|
|
22
|
-
onClick (evt, map) {
|
|
23
|
-
console.log(evt)
|
|
24
|
-
console.log(map)
|
|
25
|
-
this.view.center = evt.coordinate
|
|
26
|
-
},
|
|
27
|
-
onContextmenu (evt, map) {
|
|
28
|
-
console.log(evt)
|
|
29
|
-
console.log(map)
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
}
|
|
33
|
-
</script>
|
|
34
|
-
|
|
35
|
-
<style>
|
|
36
|
-
html,body {
|
|
37
|
-
width: 100%;
|
|
38
|
-
height: 100%;
|
|
39
|
-
margin: 0;
|
|
40
|
-
padding: 0;
|
|
41
|
-
}
|
|
42
|
-
#app {
|
|
43
|
-
width: 100%;
|
|
44
|
-
height: 100%;
|
|
45
|
-
}
|
|
46
|
-
</style>
|
package/src/components/index.js
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import VMap from '@/components/map/index'
|
|
2
|
-
import VTile from '@/components/layers/tile/index'
|
|
3
|
-
|
|
4
|
-
const components = [VMap, VTile]
|
|
5
|
-
|
|
6
|
-
const install = function (Vue) {
|
|
7
|
-
if (install.installed) return
|
|
8
|
-
components.forEach(component => {
|
|
9
|
-
Vue.component(component.name, component)
|
|
10
|
-
})
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
// 全局引用可自动安装
|
|
14
|
-
if (typeof window !== 'undefined' && window.Vue) {
|
|
15
|
-
install(window.Vue)
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export default {
|
|
19
|
-
install,
|
|
20
|
-
...components
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export {
|
|
24
|
-
VMap
|
|
25
|
-
}
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
export default {
|
|
3
|
-
render (createElement, context) {
|
|
4
|
-
return null
|
|
5
|
-
},
|
|
6
|
-
props: {
|
|
7
|
-
className: {
|
|
8
|
-
type: String,
|
|
9
|
-
default: 'ol-layer'
|
|
10
|
-
},
|
|
11
|
-
opacity: {
|
|
12
|
-
type: Number,
|
|
13
|
-
default: 1
|
|
14
|
-
},
|
|
15
|
-
visible: {
|
|
16
|
-
type: Boolean,
|
|
17
|
-
default: true
|
|
18
|
-
},
|
|
19
|
-
extent: {
|
|
20
|
-
type: Array
|
|
21
|
-
},
|
|
22
|
-
zIndex: {
|
|
23
|
-
type: Number
|
|
24
|
-
},
|
|
25
|
-
minResolution: {
|
|
26
|
-
type: Number
|
|
27
|
-
},
|
|
28
|
-
maxResolution: {
|
|
29
|
-
type: Number
|
|
30
|
-
},
|
|
31
|
-
minZoom: {
|
|
32
|
-
type: Number
|
|
33
|
-
},
|
|
34
|
-
maxZoom: {
|
|
35
|
-
type: Number
|
|
36
|
-
},
|
|
37
|
-
title: {
|
|
38
|
-
type: String
|
|
39
|
-
},
|
|
40
|
-
name: {
|
|
41
|
-
type: String
|
|
42
|
-
},
|
|
43
|
-
preview: {
|
|
44
|
-
type: String
|
|
45
|
-
},
|
|
46
|
-
baseLayer: {
|
|
47
|
-
type: Boolean
|
|
48
|
-
},
|
|
49
|
-
properties: {
|
|
50
|
-
type: Object,
|
|
51
|
-
default: () => { }
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
</script>
|
|
56
|
-
|
|
57
|
-
<style scoped>
|
|
58
|
-
|
|
59
|
-
</style>
|
|
@@ -1,308 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
import BaseLayer from '@/components/layers/BaseLayer.vue'
|
|
3
|
-
import { nanoid } from 'nanoid'
|
|
4
|
-
import { validObjKey } from '@/utils/index.js'
|
|
5
|
-
import TileGrid from 'ol/tilegrid/TileGrid'
|
|
6
|
-
import { OSM, TileWMS, XYZ } from 'ol/source.js'
|
|
7
|
-
import TileLayer from 'ol/layer/Tile.js'
|
|
8
|
-
|
|
9
|
-
export default {
|
|
10
|
-
name: 'v-tile',
|
|
11
|
-
render (createElement, context) {
|
|
12
|
-
return null
|
|
13
|
-
},
|
|
14
|
-
extends: BaseLayer,
|
|
15
|
-
inject: ['VMap'],
|
|
16
|
-
props: {
|
|
17
|
-
layerId: {
|
|
18
|
-
type: String,
|
|
19
|
-
default () {
|
|
20
|
-
return `tile-layer-${nanoid()}`
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
|
-
preload: {
|
|
24
|
-
type: Number,
|
|
25
|
-
default: 0
|
|
26
|
-
},
|
|
27
|
-
tileType: {
|
|
28
|
-
type: String,
|
|
29
|
-
default: 'TD',
|
|
30
|
-
validator: value => ['TD', 'TD_IMG', 'XYZ', 'BD', 'GD', 'OSM', 'PGIS_TILE', 'PGIS_HPYX', 'WMS'].includes(value)
|
|
31
|
-
},
|
|
32
|
-
tdVec: {
|
|
33
|
-
type: String
|
|
34
|
-
},
|
|
35
|
-
tdCva: {
|
|
36
|
-
type: String
|
|
37
|
-
},
|
|
38
|
-
tdImg: {
|
|
39
|
-
type: String
|
|
40
|
-
},
|
|
41
|
-
tdCia: {
|
|
42
|
-
type: String
|
|
43
|
-
},
|
|
44
|
-
gdUrl: {
|
|
45
|
-
type: String
|
|
46
|
-
},
|
|
47
|
-
base: {
|
|
48
|
-
type: Boolean,
|
|
49
|
-
default: true
|
|
50
|
-
},
|
|
51
|
-
xyz: {
|
|
52
|
-
type: Object,
|
|
53
|
-
default () {
|
|
54
|
-
return {}
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
wms: {
|
|
58
|
-
type: Object,
|
|
59
|
-
default () {}
|
|
60
|
-
}
|
|
61
|
-
},
|
|
62
|
-
data () {
|
|
63
|
-
return {
|
|
64
|
-
layer: null,
|
|
65
|
-
layers: []
|
|
66
|
-
}
|
|
67
|
-
},
|
|
68
|
-
computed: {
|
|
69
|
-
map () {
|
|
70
|
-
return this.VMap.map
|
|
71
|
-
}
|
|
72
|
-
},
|
|
73
|
-
watch: {
|
|
74
|
-
tileType: {
|
|
75
|
-
handler (newValue, oldValue) {
|
|
76
|
-
if (newValue && newValue !== oldValue) {
|
|
77
|
-
this.clear(oldValue)
|
|
78
|
-
this.init()
|
|
79
|
-
}
|
|
80
|
-
},
|
|
81
|
-
immediate: false,
|
|
82
|
-
deep: true
|
|
83
|
-
},
|
|
84
|
-
visible: {
|
|
85
|
-
handler (value) {
|
|
86
|
-
this.layer.setVisible(value)
|
|
87
|
-
},
|
|
88
|
-
immediate: false
|
|
89
|
-
},
|
|
90
|
-
zIndex: {
|
|
91
|
-
handler (value) {
|
|
92
|
-
this.layer.setZIndex(value)
|
|
93
|
-
},
|
|
94
|
-
immediate: false
|
|
95
|
-
},
|
|
96
|
-
maxZoom: {
|
|
97
|
-
handler (value) {
|
|
98
|
-
this.layer.setMaxZoom(value)
|
|
99
|
-
},
|
|
100
|
-
immediate: false
|
|
101
|
-
},
|
|
102
|
-
minZoom: {
|
|
103
|
-
handler (value) {
|
|
104
|
-
this.layer.setMinZoom(value)
|
|
105
|
-
},
|
|
106
|
-
immediate: false
|
|
107
|
-
},
|
|
108
|
-
extent: {
|
|
109
|
-
handler (value) {
|
|
110
|
-
this.layer.setExtent(value)
|
|
111
|
-
},
|
|
112
|
-
immediate: false
|
|
113
|
-
}
|
|
114
|
-
},
|
|
115
|
-
methods: {
|
|
116
|
-
clear (oldValue) {
|
|
117
|
-
const layers = this.map.getLayers().getArray().filter(x => x.get('base'))
|
|
118
|
-
if (layers && layers.length > 0) {
|
|
119
|
-
layers.forEach(layer => {
|
|
120
|
-
if (layer.get('tileType') === oldValue || layer.get('isDefault')) {
|
|
121
|
-
this.map.removeLayer(layer)
|
|
122
|
-
}
|
|
123
|
-
})
|
|
124
|
-
}
|
|
125
|
-
},
|
|
126
|
-
init () {
|
|
127
|
-
console.log(this.map)
|
|
128
|
-
switch (this.tileType) {
|
|
129
|
-
case 'XYZ':
|
|
130
|
-
this.initTileXYZ()
|
|
131
|
-
break
|
|
132
|
-
case 'WMS':
|
|
133
|
-
this.initTileWMS()
|
|
134
|
-
break
|
|
135
|
-
case 'TD':
|
|
136
|
-
this.initTD()
|
|
137
|
-
break
|
|
138
|
-
case 'TD_IMG':
|
|
139
|
-
this.initTDIMG()
|
|
140
|
-
break
|
|
141
|
-
case 'BD':
|
|
142
|
-
this.initBD()
|
|
143
|
-
break
|
|
144
|
-
case 'GD':
|
|
145
|
-
this.initGD()
|
|
146
|
-
break
|
|
147
|
-
case 'OSM':
|
|
148
|
-
this.initTileOSM()
|
|
149
|
-
break
|
|
150
|
-
default:
|
|
151
|
-
this.initTD()
|
|
152
|
-
break
|
|
153
|
-
}
|
|
154
|
-
},
|
|
155
|
-
initTileXYZ () {
|
|
156
|
-
let tileGrid
|
|
157
|
-
if (validObjKey(this.xyz, 'tileGrid')) {
|
|
158
|
-
tileGrid = new TileGrid(this.xyz.tileGrid)
|
|
159
|
-
}
|
|
160
|
-
const xyzOpt = { ...this.xyz, ...{ tileGrid } }
|
|
161
|
-
const source = new XYZ(xyzOpt)
|
|
162
|
-
const layerOpt = { ...this.$props, ...{ source } }
|
|
163
|
-
this.layer = new TileLayer(layerOpt)
|
|
164
|
-
this.layer.set('base', this.base)
|
|
165
|
-
this.layer.setZIndex(0)
|
|
166
|
-
this.layers = [this.layer]
|
|
167
|
-
this.map.addLayer(this.layer)
|
|
168
|
-
},
|
|
169
|
-
initTileWMS () {
|
|
170
|
-
let tileGrid
|
|
171
|
-
if (validObjKey(this.wms, 'tileGrid')) {
|
|
172
|
-
tileGrid = new TileGrid(this.wms.tileGrid)
|
|
173
|
-
}
|
|
174
|
-
const wmsOpt = { ...this.wms, ...{ tileGrid } }
|
|
175
|
-
const source = new TileWMS(wmsOpt)
|
|
176
|
-
const layerOpt = { ...this.$props, ...{ source } }
|
|
177
|
-
this.layer = new TileLayer(layerOpt)
|
|
178
|
-
this.layer.set('base', this.base)
|
|
179
|
-
this.layer.setZIndex(0)
|
|
180
|
-
this.layers = [this.layer]
|
|
181
|
-
this.map.addLayer(this.layer)
|
|
182
|
-
},
|
|
183
|
-
initTD () {
|
|
184
|
-
const layerVec = this.initXYZbyURL(this.tdVec || 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=88e2f1d5ab64a7477a7361edd6b5f68a')
|
|
185
|
-
const layerCva = this.initXYZbyURL(this.tdCva || 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=88e2f1d5ab64a7477a7361edd6b5f68a')
|
|
186
|
-
this.layers = [layerVec, layerCva]
|
|
187
|
-
this.layers.forEach(layer => {
|
|
188
|
-
this.map.addLayer(layer)
|
|
189
|
-
})
|
|
190
|
-
},
|
|
191
|
-
initXYZbyURL (url) {
|
|
192
|
-
const xyzOpt = { ...{ crossOrigin: 'anonymous' }, ...this.$props.xyz, ...{ url } }
|
|
193
|
-
const source = new XYZ(xyzOpt)
|
|
194
|
-
const layerOpt = { ...this.$props, ...{ source } }
|
|
195
|
-
const layer = new TileLayer(layerOpt)
|
|
196
|
-
layer.set('base', true)
|
|
197
|
-
layer.setZIndex(0)
|
|
198
|
-
return layer
|
|
199
|
-
},
|
|
200
|
-
initTDIMG () {
|
|
201
|
-
const layerImg = this.initXYZbyURL(this.tdImg || 'http://t4.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=88e2f1d5ab64a7477a7361edd6b5f68a')
|
|
202
|
-
const layerCia = this.initXYZbyURL(this.tdCia || 'http://t3.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=88e2f1d5ab64a7477a7361edd6b5f68a')
|
|
203
|
-
this.layers = [layerImg, layerCia]
|
|
204
|
-
this.layers.forEach(layer => {
|
|
205
|
-
this.map.addLayer(layer)
|
|
206
|
-
})
|
|
207
|
-
},
|
|
208
|
-
initBD () {
|
|
209
|
-
this.layers = this.getBDMap(this.xyz, this.$props)
|
|
210
|
-
if (this.layers.length > 0) {
|
|
211
|
-
this.layers.forEach(layer => {
|
|
212
|
-
layer.setZIndex(0)
|
|
213
|
-
this.map.addLayer(layer)
|
|
214
|
-
})
|
|
215
|
-
}
|
|
216
|
-
},
|
|
217
|
-
getBDMap (xyz, tileLayer) {
|
|
218
|
-
// const extent = [72.004, 0.8293, 137.8347, 55.8271]//中国范围
|
|
219
|
-
// 计算百度使用的分辨率
|
|
220
|
-
const resolutions = []
|
|
221
|
-
for (let i = 0; i < 19; i++) {
|
|
222
|
-
resolutions[i] = Math.pow(2, 18 - i)
|
|
223
|
-
}
|
|
224
|
-
const tilegrid = new TileGrid({
|
|
225
|
-
// extent: applyTransform(extent, projzh.ll2bmerc),
|
|
226
|
-
origin: [0, 0], // 设置原点坐标
|
|
227
|
-
resolutions // 设置分辨率
|
|
228
|
-
})
|
|
229
|
-
// 创建百度地图的数据源
|
|
230
|
-
const xyzOpt = {
|
|
231
|
-
...xyz,
|
|
232
|
-
...{
|
|
233
|
-
projection: 'baidu',
|
|
234
|
-
tileGrid: tilegrid,
|
|
235
|
-
tileUrlFunction: function (tileCoord, pixelRatio, proj) {
|
|
236
|
-
if (!tileCoord) {
|
|
237
|
-
return ''
|
|
238
|
-
}
|
|
239
|
-
const z = tileCoord[0]
|
|
240
|
-
const x = tileCoord[1]
|
|
241
|
-
const y = -tileCoord[2] - 1
|
|
242
|
-
return 'https://maponline1.bdimg.com/tile/?qt=vtile&x=' +
|
|
243
|
-
x + '&y=' + y + '&z=' + z +
|
|
244
|
-
'&styles=pl&scaler=1&udt=20220113&from=jsapi2_0'
|
|
245
|
-
},
|
|
246
|
-
crossOrigin: 'anonymous'
|
|
247
|
-
}
|
|
248
|
-
}
|
|
249
|
-
const tile = new XYZ(xyzOpt)
|
|
250
|
-
// 百度地图层
|
|
251
|
-
const layerOpt = { ...tileLayer, ...{ source: tile } }
|
|
252
|
-
const layer = new TileLayer(layerOpt)
|
|
253
|
-
layer.set('type', 'bd')
|
|
254
|
-
layer.set('name', 'bd')
|
|
255
|
-
layer.set('base', true)
|
|
256
|
-
return [layer]
|
|
257
|
-
},
|
|
258
|
-
initGD () {
|
|
259
|
-
this.layers = this.getAMap(this.xyz, this.$props, this.gdUrl)
|
|
260
|
-
this.layers.forEach(layer => {
|
|
261
|
-
this.map.addLayer(layer)
|
|
262
|
-
})
|
|
263
|
-
},
|
|
264
|
-
getAMap (xyz, tileLayer, url) {
|
|
265
|
-
const xyzOpt = {
|
|
266
|
-
...xyz,
|
|
267
|
-
...{
|
|
268
|
-
url: url || 'http://wprd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scl=1&style=7',
|
|
269
|
-
projection: 'GCJ02',
|
|
270
|
-
crossOrigin: 'anonymous'
|
|
271
|
-
}
|
|
272
|
-
}
|
|
273
|
-
const tile = new XYZ(xyzOpt)
|
|
274
|
-
const layerOpt = { ...tileLayer, ...{ source: tile } }
|
|
275
|
-
const layer = new TileLayer(layerOpt)
|
|
276
|
-
layer.set('type', 'AMap')
|
|
277
|
-
layer.set('name', 'AMap')
|
|
278
|
-
layer.set('base', true)
|
|
279
|
-
return [layer]
|
|
280
|
-
},
|
|
281
|
-
initTileOSM () {
|
|
282
|
-
const source = new OSM()
|
|
283
|
-
const layerOpt = { ...this.$props, ...{ source } }
|
|
284
|
-
this.layer = new TileLayer(layerOpt)
|
|
285
|
-
this.layer.set('base', this.base)
|
|
286
|
-
this.layer.setZIndex(0)
|
|
287
|
-
this.layers = [this.layer]
|
|
288
|
-
this.map.addLayer(this.layer)
|
|
289
|
-
}
|
|
290
|
-
},
|
|
291
|
-
updated () {
|
|
292
|
-
this.init()
|
|
293
|
-
},
|
|
294
|
-
mounted () {
|
|
295
|
-
this.init()
|
|
296
|
-
},
|
|
297
|
-
beforeUnmount () {
|
|
298
|
-
this.layers.forEach(layer => {
|
|
299
|
-
layer.getSource().clear()
|
|
300
|
-
this.map.removeLayer(layer)
|
|
301
|
-
})
|
|
302
|
-
}
|
|
303
|
-
}
|
|
304
|
-
</script>
|
|
305
|
-
|
|
306
|
-
<style scoped>
|
|
307
|
-
|
|
308
|
-
</style>
|