bd_group
/
gnss-tool-kit
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加Map组件

master
叶志超 2021-11-11 12:52:57 +08:00
parent 82aff8188a
commit d5966e6050
5 changed files with 117 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -8,6 +8,8 @@
</head>
<body class="w-h-full">
<div id="app" class="w-h-full text-white"></div>
<script src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=2kUpEHlAoBchlLZh5zpVncLF"></script>
<script src="https://bj.bcebos.com/v1/mapopen/api-demos/js/mapStyle.js"></script>
<script type="module" src="/src/render/main.ts"></script>
</body>
</html>

4
package.json
View File

@ -12,7 +12,9 @@
"electron:build": "rimraf dist && vite build && tsc -p tsconfig.electron.json && electron-builder"
},
"dependencies": {
"vue": "^3.0.5"
"echarts": "^5.2.2",
"vue": "^3.0.5",
"vue-echarts": "^6.0.0"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.1.5",

16
src/render/App.vue
View File

@ -7,11 +7,15 @@
<div class="block-left-right-content flex flex-1 mt-5">
<div class="block-left-content w-1/5 flex flex-col">
<div class="bg-red-100 flex-1"></div>
<div class="bg-green-100 flex-1"></div>
<div class="bg-blue-100 flex-1"></div>
<div class="bg-red-100 flex-1">
<!-- <Clock /> -->
</div>
<div class="bg-green-100 flex-1"></div>
<div class="bg-blue-100 flex-1"></div>
</div>
<div class="block-right-content pl-5 flex flex-1">
<Map />
</div>
<div class="block-right-content pl-5 flex flex-1 bg-yellow-100"></div>
</div>
</div>
</full-screen-container>
@ -20,5 +24,7 @@
<script lang="ts" setup>
import FullScreenContainer from './components/Layout/FullScreenContainer.vue'
import TheHeader from './components/Layout/TheHeader.vue'
import DigitalFlopContainer from './components/DigitalFlopContainer.vue';
import DigitalFlopContainer from './components/DigitalFlopContainer.vue'
// import Clock from './components/Clock.vue'
import Map from './components/Map.vue'
</script>

63
src/render/components/Map.vue Normal file
View File

@ -0,0 +1,63 @@
<template>
<div id="map-container" class="w-h-full"></div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
let map = null
const initMap = () => {
if (typeof(BMapGL) == 'undefined') {
alert('地图api加载失败')
return
}
map = new BMapGL.Map('map-container', {
style: {
styleJson: styleJson2
}
});
map.centerAndZoom(new BMapGL.Point(79.068798, 39.868490), 11);
map.enableScrollWheelZoom(true);
map.setTilt(50);
}
const loadPrism = () => {
if (!map) return
const bd = new BMapGL.Boundary();
bd.get('图木舒克', function (rs) {
const count = rs.boundaries.length;
for (let i = 0; i < count; i++) {
const path = [];
const str = rs.boundaries[i].replace(' ', '');
const points = str.split(';');
for (let j = 0; j < points.length; j++) {
const lng = points[j].split(',')[0];
const lat = points[j].split(',')[1];
path.push(new BMapGL.Point(lng, lat));
}
const prism = new BMapGL.Prism(path, 1000, {
topFillColor: '#5679ea',
topFillOpacity: 0.6,
sideFillColor: '#5679ea',
sideFillOpacity: 0.9
});
map.addOverlay(prism);
}
});
}
onMounted(() => {
initMap()
loadPrism()
})
const update = () => console.log
defineExpose({ update })
</script>

38
yarn.lock
View File

@ -1017,6 +1017,14 @@ duplexer3@^0.1.4:
resolved "https://registry.nlark.com/duplexer3/download/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
echarts@^5.2.2:
version "5.2.2"
resolved "https://registry.npmmirror.com/echarts/download/echarts-5.2.2.tgz#ec3c8b2a151cbba71ba3c2c7cf9b2f2047ce4370"
integrity sha1-7DyLKhUcu6cbo8LHz5svIEfOQ3A=
dependencies:
tslib "2.3.0"
zrender "5.2.1"
ejs@^3.1.6:
version "3.1.6"
resolved "https://registry.nlark.com/ejs/download/ejs-3.1.6.tgz#5bfd0a0689743bb5268b3550cceeebbc1702822a"
@ -2259,6 +2267,11 @@ require-directory@^2.1.1:
resolved "https://registry.nlark.com/require-directory/download/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
integrity sha1-jGStX9MNqxyXbiNE/+f3kqam30I=
resize-detector@^0.3.0:
version "0.3.0"
resolved "https://registry.npm.taobao.org/resize-detector/download/resize-detector-0.3.0.tgz#fe495112e184695500a8f51e0389f15774cb1cfc"
integrity sha1-/klREuGEaVUAqPUeA4nxV3TLHPw=
resolve-from@^4.0.0:
version "4.0.0"
resolved "https://registry.nlark.com/resolve-from/download/resolve-from-4.0.0.tgz?cache=0&sync_timestamp=1622605305717&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fresolve-from%2Fdownload%2Fresolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
@ -2609,6 +2622,11 @@ ts-node@^9.1.1:
source-map-support "^0.5.17"
yn "3.1.1"
tslib@2.3.0:
version "2.3.0"
resolved "https://registry.nlark.com/tslib/download/tslib-2.3.0.tgz?cache=0&sync_timestamp=1628722556410&other_urls=https%3A%2F%2Fregistry.nlark.com%2Ftslib%2Fdownload%2Ftslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
integrity sha1-gDuM2rPhK6WBpMpByIObuw2ssJ4=
tunnel@^0.0.6:
version "0.0.6"
resolved "https://registry.nlark.com/tunnel/download/tunnel-0.0.6.tgz#72f1314b34a5b192db012324df2cc587ca47f92c"
@ -2723,6 +2741,19 @@ vite@^2.0.5:
optionalDependencies:
fsevents "~2.3.2"
vue-demi@^0.11.2:
version "0.11.4"
resolved "https://registry.npmmirror.com/vue-demi/download/vue-demi-0.11.4.tgz#6101992fe4724cf5634018a16e953f3052e94e2a"
integrity sha1-YQGZL+RyTPVjQBihbpU/MFLpTio=
vue-echarts@^6.0.0:
version "6.0.0"
resolved "https://registry.npmmirror.com/vue-echarts/download/vue-echarts-6.0.0.tgz#480263fc6ed2125b886bb1b7f05bf9273edee552"
integrity sha1-SAJj/G7SEluIa7G38Fv5Jz7e5VI=
dependencies:
resize-detector "^0.3.0"
vue-demi "^0.11.2"
vue@^3.0.5:
version "3.2.21"
resolved "https://registry.npmmirror.com/vue/download/vue-3.2.21.tgz?cache=0&sync_timestamp=1635836044818&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fvue%2Fdownload%2Fvue-3.2.21.tgz#55f5665172d95cf97e806b9aad0a375180be23a1"
@ -2837,3 +2868,10 @@ yn@3.1.1:
version "3.1.1"
resolved "https://registry.nlark.com/yn/download/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
integrity sha1-HodAGgnXZ8HV6rJqbkwYUYLS61A=
zrender@5.2.1:
version "5.2.1"
resolved "https://registry.nlark.com/zrender/download/zrender-5.2.1.tgz#5f4bbda915ba6d412b0b19dc2431beaad05417bb"
integrity sha1-X0u9qRW6bUErCxncJDG+qtBUF7s=
dependencies:
tslib "2.3.0"