使用echart-gl实现3D地图
parent
d5966e6050
commit
46769106b5
|
|
@ -8,7 +8,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body class="w-h-full">
|
<body class="w-h-full">
|
||||||
<div id="app" class="w-h-full text-white"></div>
|
<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 src="https://bj.bcebos.com/v1/mapopen/api-demos/js/mapStyle.js"></script>
|
||||||
<script type="module" src="/src/render/main.ts"></script>
|
<script type="module" src="/src/render/main.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,8 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"echarts": "^5.2.2",
|
"echarts": "^5.2.2",
|
||||||
|
"echarts-china-cities-js": "^0.1.1",
|
||||||
|
"echarts-gl": "^2.0.8",
|
||||||
"vue": "^3.0.5",
|
"vue": "^3.0.5",
|
||||||
"vue-echarts": "^6.0.0"
|
"vue-echarts": "^6.0.0"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,61 +1,35 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="map-container" class="w-h-full"></div>
|
<v-chart class="chart w-h-full" :option="option" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<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
|
import tmskMap from "../assets/geojson/659003.json";
|
||||||
const initMap = () => {
|
|
||||||
if (typeof(BMapGL) == 'undefined') {
|
|
||||||
alert('地图api加载失败')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
map = new BMapGL.Map('map-container', {
|
use([ CanvasRenderer, Map3DChart ]);
|
||||||
style: {
|
|
||||||
styleJson: styleJson2
|
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.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
|
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"
|
resolved "https://registry.nlark.com/ci-info/download/ci-info-3.2.0.tgz#2876cb948a498797b5236f0095bc057d0dca38b6"
|
||||||
integrity sha1-KHbLlIpJh5e1I28AlbwFfQ3KOLY=
|
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:
|
cli-boxes@^2.2.1:
|
||||||
version "2.2.1"
|
version "2.2.1"
|
||||||
resolved "https://registry.nlark.com/cli-boxes/download/cli-boxes-2.2.1.tgz#ddd5035d25094fce220e9cab40a45840a440318f"
|
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"
|
resolved "https://registry.nlark.com/duplexer3/download/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
|
||||||
integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
|
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:
|
echarts@^5.2.2:
|
||||||
version "5.2.2"
|
version "5.2.2"
|
||||||
resolved "https://registry.npmmirror.com/echarts/download/echarts-5.2.2.tgz#ec3c8b2a151cbba71ba3c2c7cf9b2f2047ce4370"
|
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"
|
resolved "https://registry.nlark.com/yn/download/yn-3.1.1.tgz#1e87401a09d767c1d5eab26a6e4c185182d2eb50"
|
||||||
integrity sha1-HodAGgnXZ8HV6rJqbkwYUYLS61A=
|
integrity sha1-HodAGgnXZ8HV6rJqbkwYUYLS61A=
|
||||||
|
|
||||||
zrender@5.2.1:
|
zrender@5.2.1, zrender@^5.1.1:
|
||||||
version "5.2.1"
|
version "5.2.1"
|
||||||
resolved "https://registry.nlark.com/zrender/download/zrender-5.2.1.tgz#5f4bbda915ba6d412b0b19dc2431beaad05417bb"
|
resolved "https://registry.nlark.com/zrender/download/zrender-5.2.1.tgz#5f4bbda915ba6d412b0b19dc2431beaad05417bb"
|
||||||
integrity sha1-X0u9qRW6bUErCxncJDG+qtBUF7s=
|
integrity sha1-X0u9qRW6bUErCxncJDG+qtBUF7s=
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue