使用echart-gl实现3D地图
parent
d5966e6050
commit
46769106b5
|
|
@ -8,7 +8,7 @@
|
|||
</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="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>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,8 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"echarts": "^5.2.2",
|
||||
"echarts-china-cities-js": "^0.1.1",
|
||||
"echarts-gl": "^2.0.8",
|
||||
"vue": "^3.0.5",
|
||||
"vue-echarts": "^6.0.0"
|
||||
},
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,61 +1,35 @@
|
|||
<template>
|
||||
<div id="map-container" class="w-h-full"></div>
|
||||
<v-chart class="chart w-h-full" :option="option" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import { use, registerMap } from "echarts/core";
|
||||
import { CanvasRenderer } from 'echarts/renderers'
|
||||
import { Map3DChart } from 'echarts-gl/charts';
|
||||
import VChart from "vue-echarts";
|
||||
|
||||
let map = null
|
||||
const initMap = () => {
|
||||
if (typeof(BMapGL) == 'undefined') {
|
||||
alert('地图api加载失败')
|
||||
return
|
||||
import tmskMap from "../assets/geojson/659003.json";
|
||||
|
||||
use([ CanvasRenderer, Map3DChart ]);
|
||||
|
||||
registerMap('tmsk', tmskMap);
|
||||
|
||||
const option = reactive({
|
||||
backgroundColor: 'rgba(6,30,93,.5)',
|
||||
series: {
|
||||
type: 'map3D',
|
||||
map: 'tmsk',
|
||||
label: {
|
||||
show: true
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#999',
|
||||
borderWidth: 1,
|
||||
},
|
||||
shading: 'color'
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
|
|
|
|||
20
yarn.lock
20
yarn.lock
|
|
@ -679,6 +679,11 @@ ci-info@^3.2.0:
|
|||
resolved "https://registry.nlark.com/ci-info/download/ci-info-3.2.0.tgz#2876cb948a498797b5236f0095bc057d0dca38b6"
|
||||
integrity sha1-KHbLlIpJh5e1I28AlbwFfQ3KOLY=
|
||||
|
||||
claygl@^1.2.1:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.npm.taobao.org/claygl/download/claygl-1.3.0.tgz#7a6e2903210519ac358848f5d78070ed211685f3"
|
||||
integrity sha1-em4pAyEFGaw1iEj114Bw7SEWhfM=
|
||||
|
||||
cli-boxes@^2.2.1:
|
||||
version "2.2.1"
|
||||
resolved "https://registry.nlark.com/cli-boxes/download/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"
|
||||
|
|
@ -1017,6 +1022,19 @@ duplexer3@^0.1.4:
|
|||
resolved "https://registry.nlark.com/duplexer3/download/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
|
||||
integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
|
||||
|
||||
echarts-china-cities-js@^0.1.1:
|
||||
version "0.1.1"
|
||||
resolved "https://registry.nlark.com/echarts-china-cities-js/download/echarts-china-cities-js-0.1.1.tgz#422bfeefc87d4cd2c05bf2579726d03aa700436b"
|
||||
integrity sha1-Qiv+78h9TNLAW/JXlybQOqcAQ2s=
|
||||
|
||||
echarts-gl@^2.0.8:
|
||||
version "2.0.8"
|
||||
resolved "https://registry.nlark.com/echarts-gl/download/echarts-gl-2.0.8.tgz?cache=0&sync_timestamp=1628224311710&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fecharts-gl%2Fdownload%2Fecharts-gl-2.0.8.tgz#81260be0891e5e30c1710311f8b764d65329b03c"
|
||||
integrity sha1-gSYL4IkeXjDBcQMR+Ldk1lMpsDw=
|
||||
dependencies:
|
||||
claygl "^1.2.1"
|
||||
zrender "^5.1.1"
|
||||
|
||||
echarts@^5.2.2:
|
||||
version "5.2.2"
|
||||
resolved "https://registry.npmmirror.com/echarts/download/echarts-5.2.2.tgz#ec3c8b2a151cbba71ba3c2c7cf9b2f2047ce4370"
|
||||
|
|
@ -2869,7 +2887,7 @@ yn@3.1.1:
|
|||
resolved "https://registry.nlark.com/yn/download/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
|
||||
integrity sha1-HodAGgnXZ8HV6rJqbkwYUYLS61A=
|
||||
|
||||
zrender@5.2.1:
|
||||
zrender@5.2.1, zrender@^5.1.1:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.nlark.com/zrender/download/zrender-5.2.1.tgz#5f4bbda915ba6d412b0b19dc2431beaad05417bb"
|
||||
integrity sha1-X0u9qRW6bUErCxncJDG+qtBUF7s=
|
||||
|
|
|
|||
Loading…
Reference in New Issue