3D地图的定时高亮和点击事件（基于echarts）

最新推荐文章于 2024-05-09 11:39:05 发布

weixin_33756418

最新推荐文章于 2024-05-09 11:39:05 发布

阅读量5.5k

点赞数 2

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5d02fd8d6fb9a07ec42b5723

版权

本文介绍了如何在Vue项目中使用echarts-gl创建3D地图，包括安装Vue、echarts和echarts-gl，以及初始化3D地图。文章详细讲解了如何添加定时高亮和点击事件，并分享了3D地图在事件处理上的挑战，如点击事件只能通过getZr()处理，以及在不同版本间的API问题。

摘要由CSDN通过智能技术生成

老板让我搞一下3D地图我便去瞧一瞧看一看 ~~~~

1.因为之前的项目都是基于echarts的刚好echarts-gl页支持3D于是我便选择echarts-gl作为我的练手项目

2.所有我选择的技术栈是： vue echarts echarts-gl

安装Vue和echarts

1.很多人对于ehcarts安装在vue有点抓瞎，更不用说是在vue上面搞3D今天我就来告诉大家如何安装和使用echarts-gl初始化一个3D地图 2.安装echarts和echarts-al
npm i echarts --save npm i echarts-gl --save
3.引用echarts和echarts-gl 在main.js搞事情

import echarts from 'echarts';
import 'echarts-gl'

Vue.prototype.$echarts = echarts
复制代码

4.很多人说echarts不支持地图了嘿嘿嘿那是因为你没有发现美得眼睛在你的页面引入

require('../../node_modules/echarts/map/js/china')

地图消息就在你的node_modules/echarts/map/china中

好了你的echarts和echarts-gl可以用了下面我们进入编程

初始化echarts-gl 3D地图

1.首先新建一个option.js 这个文件是用来放配置项的你要是不建立也可以就是页面的代码多一点不大好看

配置页代码如下 (主要是地点标识和3D地图的颜色样式)

//标识数据,用来标识地图上的点，给用户提供点击事件
var geoCoordMap = {
    '黑龙江': [127.9688, 45.368],
    '内蒙古': [110.3467, 41.4899],
    "吉林": [125.8154, 44.2584],
    '北京市': [116.4551, 40.2539],
    "辽宁": [123.1238, 42.1216],
    "河北": [114.4995, 38.1006],
    "天津": [117.4219, 39.4189],
    "山西": [112.3352, 37.9413],
    "陕西": [109.1162, 34.2004],
    "甘肃": [103.5901, 36.3043],
    "宁夏": [106.3586, 38.1775],
    "青海": [101.4038, 36.8207],
    "新疆": [87.9236, 43.5883],
    "西藏": [91.11, 29.97],
    "四川": [103.9526, 30.7617],
    "重庆": [108.384366, 30.439702],
    "山东": [117.1582, 36.8701],
    "河南": [113.4668, 34.6234],
    "