当前位置：首页 > news >正文

echarts3D地图：旋转、添加纹理图片（vue3）

news 来源：原创 2024/9/20 16:56:36

首先安装echarts和echarts-gl依赖，注意的是，echarts-gl版本需安装低版本，且与echarts5版本不兼容，需要单独安装4版本，这里我安装的4.2.1版本。

$ npm install echarts4@npm:echarts@4.2.1 echarts-gl@1.1.0

npm可以安装echarts的不同版本，要求安装时命名不同，如下：

npm install echarts4@npm:echarts@4
npm install echarts5@npm:echarts@5

安装完成后package.json里的依赖会有如下代码：

"echarts4": "^npm:echarts@4.2.1",
"echarts-gl": "1.1.0",
"echarts": "^5.5.1",

其他vue文件正常引入echarts，地图vue文件引入echarts4：

import echarts from 'echarts4';

3D地图跟echarts图表一般的使用和配置差不多，就series中type: 'map3D'以及给地图命名map: name。

其他更多属性和配置大家可以在echarts文档进行查阅：Documentation - Apache ECharts

加载3D旋转地图完整代码：

<template><div id="map-chart"></div>
</template>
<script lang="ts" setup>
import echarts from 'echarts4';
import 'echarts-gl';
import DaZhouJson from '../../../assets/datas/DaZhou.json';
import { onMounted, ref } from 'vue';
let mapOption = {};
const init = (name: String, mapJson) => {echarts.registerMap(name, mapJson);//注册地图mapOption = {tooltip: {show: false,},series: [{type: 'map3D',//地图类型map: name,boxWidth: 55,boxHeight: 6,boxDepth: 80,//材质的设置realisticMaterial: {roughness: 1,//粗糙度，0为完全光滑，1完全粗糙textureTiling: 32 //材质细节纹理的平铺},//光源的设置light: {main: {intensity: 1,//主光源强度shadow: true,//是否显示阴影alpha: 150,//主光源方向角度beta: 170//主光源方向角度},ambient: {intensity: 0//环境光强度}},//地面的背景颜色groundPlane: {show: false,color: 'transparent'},//特效设置postEffect: {enable: true//是否开启特效},//标签样式label: {show: true,formatter: function (params) {return params.name;},distance: 0,//标签距离图形的距离textStyle: {color: '#ffffff',fontWeight: 'normal',fontSize: 16,backgroundColor: 'rgba(255,255,255,0)'},},//区域的颜色itemStyle: {color: '#73a4ff',borderColor: 'rgb(62,215,213)',borderWidth: 1},//高亮样式emphasis: {label: {show: true,//是否显示标签distance: 10//标签距离图形的距离},itemStyle: {color: '#3b7efc',}},// 用于鼠标的旋转，缩放等视角控制。viewControl: {projection: "orthographic", // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'autoRotate: true, // 是否开启自动旋转}},]};
};
onMounted(() => {init('DaZhou', DaZhouJson);var mapChart = echarts.init(document.getElementById('map-chart'));mapChart.setOption(mapOption);
});
</script><style scoped lang="less">
#map-chart {width: 930px;height: 100%;
}
</style>

效果如图：（旋转效果自行运行查看）

地图数据来自阿里云：DataV.GeoAtlas地理小工具系列 (aliyun.com)

我是直接把数据保存为文件然后引入进来的：

import DaZhouJson from '../../../assets/datas/DaZhou.json';

也可以直接远程请求地图JSON数据：

//引入axios
import axios from 'axios';// 远程请求地图 geoJson 数据
axios.get("https://geo.datav.aliyun.com/areas_v3/bound/511700_full.json").then((res) => {// 请求完成的地图 geoJson 数据let DaZhouJson = res.data;});

添加纹理图片：

（这里我随便找的个图片，主要想看看是否可行）

// 引入图片
import doc from '../../../assets/images/screen/layout/header.png';// 在mapOption的series里配置
series: [{// 将echarts设置为纹理shading: 'realistic',realisticMaterial: {// 引入纹理贴图detailTexture: doc,textureTiling: 1//纹理平铺},},]

效果如图：