v-ol-map 1.0.2 → 1.0.5
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/README.md +11 -19
- package/index.html +13 -0
- package/package.json +36 -35
- package/public/vite.svg +1 -0
- package/src/App.vue +13 -0
- package/src/assets/vue.svg +1 -0
- package/src/components/index.js +13 -0
- package/src/components/index.js.map +1 -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.js.map +1 -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.js.map +1 -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.js.map +1 -0
- package/src/main.ts +6 -0
- package/src/style.css +82 -0
- package/src/utils/cityMap.js +2260 -0
- package/src/utils/cityMap.js.map +1 -0
- package/src/utils/cityMap.ts +2263 -0
- package/src/utils/index.js +47 -8
- package/src/utils/index.js.map +1 -1
- package/src/utils/index.ts +68 -17
- package/src/vite-env.d.ts +7 -0
- package/tsconfig.json +16 -22
- package/tsconfig.node.json +9 -0
- package/vite.config.ts +40 -0
- package/.browserslistrc +0 -3
- package/.eslintrc.js +0 -20
- package/babel.config.js +0 -3
- package/examples/App.vue +0 -26
- package/examples/main.ts +0 -10
- package/examples/router/index.ts +0 -21
- package/examples/views/Home.vue +0 -25
- package/lib/demo.html +0 -8
- package/lib/v-ol-map.common.js +0 -29683
- package/lib/v-ol-map.umd.js +0 -29693
- package/lib/v-ol-map.umd.min.js +0 -7
- package/public/favicon.ico +0 -0
- package/public/index.html +0 -17
- package/src/@types/component.d.ts +0 -6
- package/src/@types/index.d.ts +0 -3
- package/src/@types/shims-tsx.d.ts +0 -13
- package/src/@types/shims-vue.d.ts +0 -4
- package/src/assets/logo.png +0 -0
- package/src/components/Layers/BaseLayer.vue +0 -37
- package/src/components/Layers/TileLayer/index.ts +0 -7
- package/src/components/Layers/TileLayer/src/index.vue +0 -52
- package/src/components/VMap/index.js +0 -6
- package/src/components/VMap/index.js.map +0 -1
- package/src/components/VMap/index.ts +0 -7
- package/src/components/VMap/src/VMap.vue +0 -63
- package/src/index.js +0 -21
- package/src/index.js.map +0 -1
- package/src/index.ts +0 -25
- package/vue.config.js +0 -41
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/README.md
CHANGED
|
@@ -1,24 +1,16 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Vue 3 + TypeScript + Vite
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
```
|
|
5
|
-
npm install
|
|
6
|
-
```
|
|
3
|
+
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
|
7
4
|
|
|
8
|
-
|
|
9
|
-
```
|
|
10
|
-
npm run serve
|
|
11
|
-
```
|
|
5
|
+
## Recommended IDE Setup
|
|
12
6
|
|
|
13
|
-
|
|
14
|
-
```
|
|
15
|
-
npm run build
|
|
16
|
-
```
|
|
7
|
+
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
|
|
17
8
|
|
|
18
|
-
|
|
19
|
-
```
|
|
20
|
-
npm run lint
|
|
21
|
-
```
|
|
9
|
+
## Type Support For `.vue` Imports in TS
|
|
22
10
|
|
|
23
|
-
|
|
24
|
-
|
|
11
|
+
Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
|
|
12
|
+
|
|
13
|
+
1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
|
|
14
|
+
2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
|
|
15
|
+
|
|
16
|
+
You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
|
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
|
@@ -1,47 +1,48 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "v-ol-map",
|
|
3
|
-
"version": "1.0.2",
|
|
4
3
|
"private": false,
|
|
5
|
-
"
|
|
4
|
+
"version": "1.0.5",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/ol-map.umd.js",
|
|
7
|
+
"module": "./dist/ezos.es.js",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./dist/ol-map.es.js",
|
|
11
|
+
"require": "./dist/ol-map.umd.js"
|
|
12
|
+
},
|
|
13
|
+
"./dist/style.css": {
|
|
14
|
+
"import": "./dist/style.css",
|
|
15
|
+
"require": "./dist/style.css"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
6
18
|
"scripts": {
|
|
7
|
-
"
|
|
8
|
-
"build": "vue-
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"lint": "vue-cli-service lint",
|
|
12
|
-
"publish": "npm publish"
|
|
19
|
+
"dev": "vite",
|
|
20
|
+
"build": "vue-tsc --noEmit && vite build",
|
|
21
|
+
"preview": "vite preview",
|
|
22
|
+
"publish": "npm publish --access=public"
|
|
13
23
|
},
|
|
14
24
|
"dependencies": {
|
|
15
|
-
"
|
|
16
|
-
"
|
|
17
|
-
"
|
|
18
|
-
"vue
|
|
19
|
-
"vue-router": "^3.2.0"
|
|
25
|
+
"@types/pinyin": "^2.10.0",
|
|
26
|
+
"pinyin-pro": "^3.11.0",
|
|
27
|
+
"vite-plugin-eslint": "^1.7.0",
|
|
28
|
+
"vue": "^3.2.37"
|
|
20
29
|
},
|
|
21
30
|
"devDependencies": {
|
|
22
|
-
"@
|
|
23
|
-
"@typescript-eslint/eslint-plugin": "^
|
|
24
|
-
"@typescript-eslint/parser": "^
|
|
25
|
-
"@
|
|
26
|
-
"
|
|
27
|
-
"
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"axios": "^0.27.2",
|
|
33
|
-
"eslint": "^6.7.2",
|
|
34
|
-
"eslint-plugin-prettier": "^3.3.1",
|
|
35
|
-
"eslint-plugin-vue": "^6.2.2",
|
|
36
|
-
"mockjs": "^1.1.0",
|
|
31
|
+
"@types/node": "^18.6.4",
|
|
32
|
+
"@typescript-eslint/eslint-plugin": "^5.32.0",
|
|
33
|
+
"@typescript-eslint/parser": "^5.32.0",
|
|
34
|
+
"@vitejs/plugin-vue": "^3.0.0",
|
|
35
|
+
"eslint": "^8.21.0",
|
|
36
|
+
"eslint-config-standard": "^17.0.0",
|
|
37
|
+
"eslint-plugin-import": "^2.26.0",
|
|
38
|
+
"eslint-plugin-n": "^15.2.4",
|
|
39
|
+
"eslint-plugin-promise": "^6.0.0",
|
|
40
|
+
"eslint-plugin-vue": "^9.3.0",
|
|
37
41
|
"nanoid": "^4.0.0",
|
|
38
42
|
"ol": "^6.15.1",
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"sass-loader": "^8.0.2",
|
|
44
|
-
"typescript": "~4.1.5",
|
|
45
|
-
"vue-template-compiler": "^2.6.11"
|
|
43
|
+
"typescript": "^4.6.4",
|
|
44
|
+
"vite": "^3.0.0",
|
|
45
|
+
"vite-plugin-vue-setup-extend": "^0.4.0",
|
|
46
|
+
"vue-tsc": "^0.38.4"
|
|
46
47
|
}
|
|
47
48
|
}
|
package/public/vite.svg
ADDED
|
@@ -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="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
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 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,IAAI,MAAM,wBAAwB,CAAA;AACzC,OAAO,KAAK,MAAM,gCAAgC,CAAA;AAElD,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;AAEhC,MAAM,OAAO,GAAG,CAAC,GAAQ,EAAE,EAAE;IAC3B,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;QACxB,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IAChC,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,eAAe;IACb,OAAO;IACP,GAAG,UAAU;CACd,CAAA"}
|
|
@@ -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 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,mCAAmC,CAAA;AAEpD,KAAa,CAAC,OAAO,GAAG,CAAC,GAAQ,EAAE,EAAE;IACpC,GAAG,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;AAClC,CAAC,CAAA;AAED,eAAe,KAAK,CAAA"}
|
|
@@ -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 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AACA,OAAO,IAAI,MAAM,0BAA0B,CAAC;AAE3C,IAAY,CAAC,OAAO,GAAG,CAAC,GAAQ,EAAE,EAAE;IACnC,GAAG,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;AAChC,CAAC,CAAA;AAED,eAAe,IAAI,CAAA"}
|
|
@@ -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.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,aAAa,CAAA;AACpB,OAAO,GAAG,MAAM,WAAW,CAAA;AAC3B,OAAO,KAAK,MAAM,oBAAoB,CAAA;AAEtC,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA"}
|
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
|
+
}
|