最近看看 openlayers , 發現好像 vue3 支援度比較友善 , 不然 angular 太殘了 XD
之前做些小東東都用 js , 這次想說玩看看 ts 結果馬上陣亡 XD
volar
vue3 要搞 ts 的話要先安裝 Vue Language Features Volar
並且還要裝 TypeScript Vue Plugin Volar
然後輸入 @builtin typescript 也要 disable (Workspace)
可以看參考下這個影片
或是這個說明
可以順便在 settings.json 設定讓當輸入 ref 以後 .value 自動跳
1
| "vue.autoInsert.dotValue": true
|
eslint
先安裝 eslint
還有 Prettier - Code formatter
增加 overrides 那段 , 不然 html 會噴 error
.eslintrc.cjs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| /* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier/skip-formatting'
],
parserOptions: {
ecmaVersion: 'latest'
},
overrides: [
{
files: ['*.html'],
rules: {
'vue/comment-directive': 'off'
}
}
]
}
|
設定 .prettierrc.json
1
2
3
4
5
6
7
8
9
10
| {
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"useTabs": true,
"tabWidth": 4,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none"
"singleAttributePerLine" : true
}
|
開啟 settings.json 加入以下設定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| "eslint.enable": true,
"eslint.validate": [
// "html",
// "javascript",
"vue"
],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
|
openlayers
1
2
3
4
5
| npm create vue@latest
cd .\demomap-vue\
npm install
npm run format
npm run dev
|
vue3openlayers
openlayers 文件
1
2
3
4
| npm install
npm install ol ol-ext ol-contextmenu
npm install vue3-openlayers
npm run dev
|
MapDemo.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
| <template>
<ol-map style="height: 400px">
<ol-view
ref="view"
:center="center"
:rotation="rotation"
:zoom="zoom"
:projection="projection"
@change:center="centerChanged"
@change:resolution="resolutionChanged"
@change:rotation="rotationChanged"
/>
<ol-tile-layer>
<ol-source-osm />
</ol-tile-layer>
<ol-rotate-control></ol-rotate-control>
</ol-map>
<ul>
<li>center : {{ currentCenter }}</li>
<li>resolution : {{ currentResolution }}</li>
<li>zoom : {{ currentZoom }}</li>
<li>rotation : {{ currentRotation }}</li>
</ul>
</template>
<script setup lang="ts">
import type { ObjectEvent } from 'ol/Object'
import { ref } from 'vue'
const center = ref([40, 40])
const projection = ref('EPSG:4326')
const zoom = ref(8)
const rotation = ref(0)
const currentCenter = ref(center.value)
const currentZoom = ref(zoom.value)
const currentRotation = ref(rotation.value)
const currentResolution = ref(0)
function resolutionChanged(event: ObjectEvent) {
currentResolution.value = event.target.getResolution()
currentZoom.value = event.target.getZoom()
}
function centerChanged(event: ObjectEvent) {
currentCenter.value = event.target.getCenter()
}
function rotationChanged(event: ObjectEvent) {
currentRotation.value = event.target.getRotation()
}
</script>
|
App.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
| <script setup lang="ts">
import MapDemo from './components/MapDemo.vue'
</script>
<template>
<MapDemo id="map" />
</template>
<style scoped>
#map {
height: 400px;
}
</style>
|
vite.config.ts
因為要讓他可以對外 , 所以補下 server 那段
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server: {
host: '0.0.0.0',
port: 4000
}
})
|