echarts-gl 离线3D地图

1、安装依赖

echarts-gl 与 echarts 版本关系：

"echarts": "^5.2.0",    "echarts-gl": "^2.0.8"

# 执行安装
yarn add echarts-gl

2、下载离线地图

免费下载实时更新的geoJson数据、行政区划边界数据、区划边界坐标集合__HashTang
https://hxkj.vip/demo/echartsMap/
这里下载的新疆，选项的第一个和第二个都行
在这里插入图片描述

3、编写页面页面

参考：
vue组件，echarts制作3D地图，可点击凸起，hover高亮，可做飞鱼线（带天空盒子）
https://blog.csdn.net/qq_45234022/article/details/134439469

下载地图重名成 xinjiang.json，粘贴vue项目的 api/json/xinjiang.json 下

新建 aa.vue，访问即可看见效果

<template><div ref="myChartRef" class="top-title3">地图</div>
</template>
<script name="RoomForm" setup>import * as echarts from 'echarts'import 'echarts-gl' // 引入 3D效果import xinjiangGjson from '@/api/json/xinjiang.json' // 引入地图json数据// 获取vue3 的 proxy (同 vue2的 this)const { proxy } = getCurrentInstance()// 初始化ECharts实例const myChart1 = ref()const getOption = () => {return {tooltip: {// 自定义代码},series: [{type: 'map3D',name: '地图',// 相对于父容器比例center: ['50%', '50%'],selectedMode: 'single', // 地图高亮单选regionHeight: 3, // 地图高度map: 'xinjiangMap',viewControl: {// 缩放大小，数值越大，地图越小distance: 90,// 上下倾斜角度alpha: 30,// rotateSensitivity: [1, 1],// 左右倾斜角度beta: 5},label: {show: true, // 是否显示名字color: '#fff', // 文字颜色fontSize: 18, // 文字大小fontWeight: 'normal', // 文字大小formatter: function (params) {return `●`}},itemStyle: {color: '#176efa', // 地图背景颜色borderWidth: 2, // 分界线wdithborderColor: '#6254cc', // 分界线颜色opacity: 1},emphasis: {label: {show: true, // 是否显示高亮textStyle: {color: '#fff' // 高亮文字颜色}},itemStyle: {color: '#77da7d', // 地图高亮颜色borderWidth: 10, // 分界线wdithborderColor: '#6BECF5' // 分界线颜色}},shading: 'realistic',// 真实感材质相关配置 shading: 'realistic'时有效realisticMaterial: {detailTexture: 'https://cdn.polyhaven.com/asset_img/primary/kloppenheim_06_puresky.png?height=780', // 纹理贴图textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数roughness: 1, // 材质粗糙度，0完全光滑，1完全粗糙metalness: 0, // 0材质是非金属 ，1金属roughnessAdjust: 0},light: {main: {color: '#fff',intensity: 1,shadow: true,shadowQuality: 'high',alpha: 25, //beta: 20},ambient: {color: '#fff',intensity: 0.6}}}]}}onMounted(() => {myChart1.value = markRaw(echarts.init(proxy.$refs['myChartRef']))echarts.registerMap('xinjiangMap', xinjiangGjson) // 注册地图// 使用刚指定的配置项和数据显示图表myChart1.value.setOption(getOption())})
</script>
<style lang="scss" scoped>.top-title3 {margin-top: -100px;width: 900px;height: 500px;}
</style>