v-ol-map 1.0.9 → 1.0.10
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/.eslintrc.cjs +29 -0
- package/.vscode/extensions.json +3 -0
- package/index.html +13 -0
- package/package.json +1 -2
- package/src/App.vue +13 -0
- package/src/assets/vue.svg +1 -0
- package/src/components/index.js +13 -0
- package/src/components/index.ts +16 -0
- package/src/components/layers/base.ts +48 -0
- package/src/components/layers/tile/index.js +6 -0
- package/src/components/layers/tile/index.ts +8 -0
- package/src/components/layers/tile/tile.vue +97 -0
- package/src/components/map/index.js +6 -0
- package/src/components/map/index.ts +8 -0
- package/src/components/map/map.vue +91 -0
- package/src/main.js +6 -0
- package/src/main.ts +6 -0
- package/src/style.css +82 -0
- package/src/utils/cityMap.js +2260 -0
- package/src/utils/cityMap.ts +2263 -0
- package/src/utils/index.js +59 -0
- package/src/utils/index.ts +77 -0
- package/src/vite-env.d.ts +7 -0
- package/tsconfig.json +23 -0
- package/tsconfig.node.json +9 -0
- package/vite.config.ts +40 -0
package/.eslintrc.cjs
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
env: {
|
|
3
|
+
browser: true,
|
|
4
|
+
es2021: true
|
|
5
|
+
},
|
|
6
|
+
extends: [
|
|
7
|
+
'plugin:vue/vue3-essential',
|
|
8
|
+
'standard'
|
|
9
|
+
],
|
|
10
|
+
parserOptions: {
|
|
11
|
+
ecmaVersion: 'latest',
|
|
12
|
+
parser: '@typescript-eslint/parser',
|
|
13
|
+
sourceType: 'module'
|
|
14
|
+
},
|
|
15
|
+
plugins: [
|
|
16
|
+
'vue',
|
|
17
|
+
'@typescript-eslint'
|
|
18
|
+
],
|
|
19
|
+
settings: {
|
|
20
|
+
'import/resolver': {
|
|
21
|
+
node: {
|
|
22
|
+
extensions: ['.js', '.jsx', '.ts', '.tsx'],
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
},
|
|
26
|
+
rules: {
|
|
27
|
+
|
|
28
|
+
}
|
|
29
|
+
}
|
package/index.html
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
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 + Vue + TS</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="app"></div>
|
|
11
|
+
<script type="module" src="/src/main.ts"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
package/package.json
CHANGED
package/src/App.vue
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
// This starter template is using Vue 3 <script setup> SFCs
|
|
3
|
+
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<template>
|
|
7
|
+
<v-map>
|
|
8
|
+
<v-tile></v-tile>
|
|
9
|
+
</v-map>
|
|
10
|
+
</template>
|
|
11
|
+
|
|
12
|
+
<style scoped>
|
|
13
|
+
</style>
|
|
@@ -0,0 +1 @@
|
|
|
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="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import vMap from '@/components/map/index';
|
|
2
|
+
import vTile from '@/components/layers/tile/index';
|
|
3
|
+
const components = [vMap, vTile];
|
|
4
|
+
const install = (app) => {
|
|
5
|
+
components.forEach(item => {
|
|
6
|
+
app.component(item.name, item);
|
|
7
|
+
});
|
|
8
|
+
};
|
|
9
|
+
export default {
|
|
10
|
+
install,
|
|
11
|
+
...components
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { App } from 'vue'
|
|
2
|
+
import vMap from '@/components/map/index'
|
|
3
|
+
import vTile from '@/components/layers/tile/index'
|
|
4
|
+
|
|
5
|
+
const components = [vMap, vTile]
|
|
6
|
+
|
|
7
|
+
const install = (app: App) => {
|
|
8
|
+
components.forEach(item => {
|
|
9
|
+
app.component(item.name, item)
|
|
10
|
+
})
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export default {
|
|
14
|
+
install,
|
|
15
|
+
...components
|
|
16
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
export default {
|
|
2
|
+
className: {
|
|
3
|
+
type: String,
|
|
4
|
+
default: 'ol-layer'
|
|
5
|
+
},
|
|
6
|
+
opacity: {
|
|
7
|
+
type: Number,
|
|
8
|
+
default: 1
|
|
9
|
+
},
|
|
10
|
+
visible: {
|
|
11
|
+
type: Boolean,
|
|
12
|
+
default: true
|
|
13
|
+
},
|
|
14
|
+
extent: {
|
|
15
|
+
type: Array
|
|
16
|
+
},
|
|
17
|
+
zIndex: {
|
|
18
|
+
type: Number
|
|
19
|
+
},
|
|
20
|
+
minResolution: {
|
|
21
|
+
type: Number
|
|
22
|
+
},
|
|
23
|
+
maxResolution: {
|
|
24
|
+
type: Number
|
|
25
|
+
},
|
|
26
|
+
minZoom: {
|
|
27
|
+
type: Number
|
|
28
|
+
},
|
|
29
|
+
maxZoom: {
|
|
30
|
+
type: Number
|
|
31
|
+
},
|
|
32
|
+
title: {
|
|
33
|
+
type: String
|
|
34
|
+
},
|
|
35
|
+
name: {
|
|
36
|
+
type: String
|
|
37
|
+
},
|
|
38
|
+
preview: {
|
|
39
|
+
type: String
|
|
40
|
+
},
|
|
41
|
+
baseLayer: {
|
|
42
|
+
type: Boolean
|
|
43
|
+
},
|
|
44
|
+
properties: {
|
|
45
|
+
type: Object,
|
|
46
|
+
default: () => { }
|
|
47
|
+
}
|
|
48
|
+
}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { onMounted, defineProps, unref, ref, inject } from 'vue'
|
|
3
|
+
import base from '@/components/layers/base'
|
|
4
|
+
import { XYZ } from 'ol/source'
|
|
5
|
+
import { Tile as TileLayer } from 'ol/layer'
|
|
6
|
+
import { nanoid } from 'nanoid'
|
|
7
|
+
|
|
8
|
+
const VMap:any = inject('VMap')
|
|
9
|
+
|
|
10
|
+
const props = defineProps({
|
|
11
|
+
...base,
|
|
12
|
+
...{
|
|
13
|
+
layerId: {
|
|
14
|
+
type: String,
|
|
15
|
+
default: `tile-layer-${nanoid()}`
|
|
16
|
+
},
|
|
17
|
+
preload: {
|
|
18
|
+
type: Number,
|
|
19
|
+
default: 0
|
|
20
|
+
},
|
|
21
|
+
tileType: {
|
|
22
|
+
type: String,
|
|
23
|
+
default: 'TD'
|
|
24
|
+
},
|
|
25
|
+
tdVec: {
|
|
26
|
+
type: String
|
|
27
|
+
},
|
|
28
|
+
tdCva: {
|
|
29
|
+
type: String
|
|
30
|
+
},
|
|
31
|
+
tdImg: {
|
|
32
|
+
type: String
|
|
33
|
+
},
|
|
34
|
+
tdCia: {
|
|
35
|
+
type: String
|
|
36
|
+
},
|
|
37
|
+
gdUrl: {
|
|
38
|
+
type: String
|
|
39
|
+
},
|
|
40
|
+
base: {
|
|
41
|
+
type: Boolean,
|
|
42
|
+
default: true
|
|
43
|
+
},
|
|
44
|
+
xyz: {
|
|
45
|
+
type: Object
|
|
46
|
+
},
|
|
47
|
+
wms: {
|
|
48
|
+
type: Object
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
})
|
|
52
|
+
|
|
53
|
+
let layers = []
|
|
54
|
+
|
|
55
|
+
function init ():void {
|
|
56
|
+
const layerVec = initXYZbyURL(
|
|
57
|
+
'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=88e2f1d5ab64a7477a7361edd6b5f68a'
|
|
58
|
+
)
|
|
59
|
+
const layerCva = initXYZbyURL(
|
|
60
|
+
'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=88e2f1d5ab64a7477a7361edd6b5f68a'
|
|
61
|
+
)
|
|
62
|
+
layers = [layerVec, layerCva]
|
|
63
|
+
console.log(VMap)
|
|
64
|
+
layers.forEach((layer) => {
|
|
65
|
+
VMap.addLayer(layer)
|
|
66
|
+
})
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
function initXYZbyURL (url: string): any {
|
|
70
|
+
const xyzOpt = {
|
|
71
|
+
...{ crossOrigin: 'anonymous' },
|
|
72
|
+
...props.xyz,
|
|
73
|
+
...{ url }
|
|
74
|
+
}
|
|
75
|
+
const source = new XYZ(xyzOpt)
|
|
76
|
+
const layerOpt:any = { ...props, ...{ source } }
|
|
77
|
+
console.log(layerOpt)
|
|
78
|
+
const layer = new TileLayer(layerOpt)
|
|
79
|
+
layer.set('base', true)
|
|
80
|
+
layer.setZIndex(0)
|
|
81
|
+
return layer
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
onMounted(() => {
|
|
85
|
+
console.log(props.className)
|
|
86
|
+
console.log(unref(props))
|
|
87
|
+
console.log(ref(props).value)
|
|
88
|
+
init()
|
|
89
|
+
})
|
|
90
|
+
</script>
|
|
91
|
+
<script lang="ts">
|
|
92
|
+
export default { name: 'v-tile' }
|
|
93
|
+
</script>
|
|
94
|
+
|
|
95
|
+
<style scoped>
|
|
96
|
+
|
|
97
|
+
</style>
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { computed, defineProps, onMounted, unref, ref, provide } from 'vue'
|
|
3
|
+
import type { PropType } from 'vue'
|
|
4
|
+
import { nanoid } from 'nanoid'
|
|
5
|
+
import { OlMap } from '@/utils'
|
|
6
|
+
import { ViewOptions } from 'ol/View'
|
|
7
|
+
import { DefaultsOptions as ControlOptions } from 'ol/control'
|
|
8
|
+
import {
|
|
9
|
+
DefaultsOptions as InteractionOptions
|
|
10
|
+
} from 'ol/interaction'
|
|
11
|
+
|
|
12
|
+
// props
|
|
13
|
+
const props = defineProps({
|
|
14
|
+
target: {
|
|
15
|
+
type: String as PropType<string>,
|
|
16
|
+
// string 首字母小写为 typescript 对应 js 中的基础类型
|
|
17
|
+
default: `map-${nanoid()}`
|
|
18
|
+
},
|
|
19
|
+
width: {
|
|
20
|
+
type: [String, Number],
|
|
21
|
+
default: '100%'
|
|
22
|
+
},
|
|
23
|
+
height: {
|
|
24
|
+
type: [String, Number],
|
|
25
|
+
default: '100%'
|
|
26
|
+
},
|
|
27
|
+
view: {
|
|
28
|
+
type: Object as PropType<ViewOptions>
|
|
29
|
+
},
|
|
30
|
+
controls: {
|
|
31
|
+
type: Object as PropType<ControlOptions>
|
|
32
|
+
},
|
|
33
|
+
interaction: {
|
|
34
|
+
type: Object as PropType<InteractionOptions>
|
|
35
|
+
}
|
|
36
|
+
})
|
|
37
|
+
// computed
|
|
38
|
+
const mapWidth = computed(() => {
|
|
39
|
+
return typeof props.width === 'string' ? props.width : props.width.toString() + 'px'
|
|
40
|
+
})
|
|
41
|
+
const mapHeight = computed(() => {
|
|
42
|
+
return typeof props.height === 'string' ? props.height : props.height.toString() + 'px'
|
|
43
|
+
})
|
|
44
|
+
const mapOption = computed<any>(() => {
|
|
45
|
+
return {
|
|
46
|
+
target: props.target,
|
|
47
|
+
view: props.view,
|
|
48
|
+
controls: props.controls,
|
|
49
|
+
interaction: props.interaction
|
|
50
|
+
}
|
|
51
|
+
})
|
|
52
|
+
// data
|
|
53
|
+
const load = ref(false)
|
|
54
|
+
let map:any = null
|
|
55
|
+
|
|
56
|
+
// methods
|
|
57
|
+
function init (): Promise<string> {
|
|
58
|
+
return new Promise((resolve, reject) => {
|
|
59
|
+
map = new OlMap(unref(mapOption))
|
|
60
|
+
console.log(map)
|
|
61
|
+
if (map) {
|
|
62
|
+
// provide
|
|
63
|
+
provide('VMap', map)
|
|
64
|
+
resolve('success')
|
|
65
|
+
} else {
|
|
66
|
+
reject(new Error('fail'))
|
|
67
|
+
}
|
|
68
|
+
})
|
|
69
|
+
}
|
|
70
|
+
// hook
|
|
71
|
+
onMounted(() => {
|
|
72
|
+
init().then(res => {
|
|
73
|
+
if (res === 'success') {
|
|
74
|
+
load.value = true
|
|
75
|
+
}
|
|
76
|
+
})
|
|
77
|
+
})
|
|
78
|
+
</script>
|
|
79
|
+
<script lang="ts">
|
|
80
|
+
export default { name: 'v-map' }
|
|
81
|
+
</script>
|
|
82
|
+
|
|
83
|
+
<template>
|
|
84
|
+
<div :id="props.target" :style="{ width: mapWidth, height: mapHeight }">
|
|
85
|
+
<slot v-if="load"/>
|
|
86
|
+
</div>
|
|
87
|
+
</template>
|
|
88
|
+
|
|
89
|
+
<style scoped>
|
|
90
|
+
|
|
91
|
+
</style>
|
package/src/main.js
ADDED
package/src/main.ts
ADDED
package/src/style.css
ADDED
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
|
3
|
+
font-size: 16px;
|
|
4
|
+
line-height: 24px;
|
|
5
|
+
font-weight: 400;
|
|
6
|
+
|
|
7
|
+
color-scheme: light dark;
|
|
8
|
+
color: rgba(255, 255, 255, 0.87);
|
|
9
|
+
background-color: #242424;
|
|
10
|
+
|
|
11
|
+
font-synthesis: none;
|
|
12
|
+
text-rendering: optimizeLegibility;
|
|
13
|
+
-webkit-font-smoothing: antialiased;
|
|
14
|
+
-moz-osx-font-smoothing: grayscale;
|
|
15
|
+
-webkit-text-size-adjust: 100%;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
a {
|
|
19
|
+
font-weight: 500;
|
|
20
|
+
color: #646cff;
|
|
21
|
+
text-decoration: inherit;
|
|
22
|
+
}
|
|
23
|
+
a:hover {
|
|
24
|
+
color: #535bf2;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
html,body {
|
|
28
|
+
width: 100%;
|
|
29
|
+
height: 100%;
|
|
30
|
+
margin: 0;
|
|
31
|
+
display: flex;
|
|
32
|
+
place-items: center;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
h1 {
|
|
36
|
+
font-size: 3.2em;
|
|
37
|
+
line-height: 1.1;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
button {
|
|
41
|
+
border-radius: 8px;
|
|
42
|
+
border: 1px solid transparent;
|
|
43
|
+
padding: 0.6em 1.2em;
|
|
44
|
+
font-size: 1em;
|
|
45
|
+
font-weight: 500;
|
|
46
|
+
font-family: inherit;
|
|
47
|
+
background-color: #1a1a1a;
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
transition: border-color 0.25s;
|
|
50
|
+
}
|
|
51
|
+
button:hover {
|
|
52
|
+
border-color: #646cff;
|
|
53
|
+
}
|
|
54
|
+
button:focus,
|
|
55
|
+
button:focus-visible {
|
|
56
|
+
outline: 4px auto -webkit-focus-ring-color;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.card {
|
|
60
|
+
padding: 2em;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
#app {
|
|
64
|
+
width: 100%;
|
|
65
|
+
height: 100%;
|
|
66
|
+
margin: 0 auto;
|
|
67
|
+
padding: 0;
|
|
68
|
+
text-align: center;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@media (prefers-color-scheme: light) {
|
|
72
|
+
:root {
|
|
73
|
+
color: #213547;
|
|
74
|
+
background-color: #ffffff;
|
|
75
|
+
}
|
|
76
|
+
a:hover {
|
|
77
|
+
color: #747bff;
|
|
78
|
+
}
|
|
79
|
+
button {
|
|
80
|
+
background-color: #f9f9f9;
|
|
81
|
+
}
|
|
82
|
+
}
|