vue+echart实现3d地图可拖拽、缩放、区域填充颜色(geo3D)

功能背景

一个略微比2d地图炫酷一些的3d地图，
1、可对区域进行不同颜色填充。
2、可拖拽缩放地图
3、鼠标悬停高亮某区域。
(注意：当开启了鼠标悬停series，并高亮某个数据的时候，会导致地图的拖拽缩放出现卡顿，因为相当于是事件重叠了。。。目前还没想到好的解决方案)
这里是5.0以上版本的echarts实现的

"echarts": "^5.4.1",

效果图

全景

悬停高亮
原理就是抬高了这个区域的高度，并且改变了颜色。

拖拽、缩放

vue+echart实现3d地图可拖拽、缩放、区域填充颜色(geo3D)相关推荐

Vue + echart 实现中国地图和省市地图（可切换省份
vue + echart 实现中国地图和省市地图(可切换省份) - 伏沙金 - 博客园
vuedraggable能实现自由拖拽功能吗?_基于 vue.js 仿禅道主页拖拽效果
今天给大家分享一个超不错的Vue仿禅道首页拖拽布局VueDndKon. vue-dnd-kon 基于vuedraggable实现的仿禅道首页拖拽项目.支持模块上下及左右自由拖动布局. 主页分为左右两栏 ...
android 高德拖拽地图定位,拖拽选址-拖拽选址-示例中心-JS API UI 组件示例 | 高德地图API...
拖拽选址 html, body { height: 100%; margin: 0; width: 100%; padding: 0; overflow: hidden; font-size: 13p ...
vue+eChart实现省份地图
vue+eChart实现省份地图 import echarts from "echarts"; require("echarts/theme/macarons" ...
高德地图添加图片覆盖物，限制拖拽缩放范围
第一步 : 初始化地图 // 创建地图creatMap() {this.map = new AMap.Map("mapView", {rotateEnable: true,pit ...
vue-draggable-resizable-gorkys 可拖拽缩放的组件
说明:组件基于vue-draggable-resizable进行二次开发. 文章引用于vue-draggable-resizable 可拖拽缩放的组件 - SegmentFault 思否 git引用于 ...
解决d3.event在v7版本无效影响zoom拖拽缩放问题
近期由于代码内关于d3版本的更新,由原来的v3 v4更新值v7.0.0,导致原有关于d3的波点图内zoom方法的拖拽缩放.tooltip提示框问题开始报错,即d3.event数据废弃了 1.设置d3图 ...
移动端vue+vant+高德地图实现拖拽选址，周边选址，搜索选址，自动定位，选择城市功能，获取地址经纬度，详细地址
效果图: 在public文件夹下的index.html文件中head标签下加上script标签如下: <script type="text/javascript">wi ...
127：vue+openlayers 使用CRTL控制map拖拽和鼠标滚动（示例代码）
第127个点击查看专栏目录本示例的目的是介绍如何在vue+openlayers项目中设置控制条件,使用CRTL控制map拖拽和鼠标滚动. 直接复制下面的 vue+openlayers源代码,操作2 ...
vue拖动改变模板_可视化拖拽 UI 布局之拖拽篇
前言:前段时间负责公司的运营管理后台项目,通过运营后台的PC端拖拽配置布局,达到App首页模板的动态UI界面配置,生成页面.趁着周末,整理一下当时所了解到的拖拽.文章会根据大家的反馈或者自己学习经验的 ...

vue+echart实现3d地图可拖拽、缩放、区域填充颜色(geo3D)

功能背景

效果图

vue+echart实现3d地图可拖拽、缩放、区域填充颜色(geo3D)相关推荐

最新文章

热门文章