使用echarts实现一个可拖拽缩放的立体地图

author author     2023-05-04     425

关键词:

参考技术A 近期根据全新的需求重构一个老的项目,首页需要做一个立体的中国地图,原先的平面地图使用的是高德与echarts结合,地图用高德,点用echarts,而现在要做立体的地图,并且不需要世界地图的背景,于是我直接放弃了高德直接改全部由echarts来实现。

echarts 5.1.2
vue-echarts 6.0.0
lodash
element-ui

采用高德的地图json
https://datav.aliyun.com/tools/atlas/index.html

我绘制的立体地图的原理只是在页面上显示了两层的地图,简单来说就是底层使用暗色并且将中心点稍微下移,echarts的option配置如下

注意点:

通过监听 georoam 事件来实现,需要特别注意的是,缩放与拖动需要调用 echartsInstance.getOption() 来获取完整的option值并做出修改后覆盖原有的option,否则会出现bug。

单击事件有时会无法生效故改成了双击下钻(估计可能和拖拽有冲突)

说明:
1.code,centroid,level是数据组装的时候放入data中的,前两者直接从地图文件中取到,level的值只有'country'和'province'代表全国和省份。

至此一个完整的立体地图就实现了。

参考内容
https://www.makeapie.com/editor.html?c=xPRYVyWjUJ

h5拖拽构造拖拽及缩放pdf展示

前言:协助项目需要实现一个签名的功能。功能说明:1.有文本签名和头像签名。2.头像签名需要实现可拖拽功能。3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置。功能一:实现拖拽思路:H5拖拽及构造函数实现... 查看详情

jquery可拖拽3d万花筒旋转特效

这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画。效果体验:http://hovertree.com/texiao/jquery/92/进去后可以上下左右的拖动图片。本示例中... 查看详情

jquery可拖拽3d万花筒旋转特效

这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画。效果体验:http://hovertree.com/texiao/jquery/92/进去后可以上下左右的拖动图片。本示例中... 查看详情

jquery可拖拽3d万花筒旋转特效

这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画。效果体验:http://hovertree.com/texiao/jquery/92/进去后可以上下左右的拖动图片。本示例中... 查看详情

jquery可拖拽3d万花筒旋转特效

这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画。效果体验:http://hovertree.com/texiao/jquery/92/进去后可以上下左右的拖动图片。本示例中... 查看详情

android高级控件——自定义listview高仿一个qq可拖拽列表的实现

...能就是需要列表拖拽了,而我们选择了ListView,也是因为使用ListView太久远了,导致对他已经有浓厚的感情了,我们之前也是写过几篇关于ListView的博文Android实训案例(三)——实现时间轴效果的ListView,加入本地存储,实现恋爱日记... 查看详情

可拖拽listview基本使用技巧(dragsortlistview)

可拖拽的listview,DragSortListView这是gitHub上的一个开源项目。链接点击打开链接。这个开源控件主要是为了实现listview的item上下拖拽效果以便达到美化界面的作用。   先来看三张效果图。    第一张为初始的DragSortListView效... 查看详情

echarts的散点图和中国地图配合使用(代码片段)

...图类型coordinateSystem:\'geo\',//该系列所用的坐标系,geo表示使用地理坐标系,通过geoIndex指定相应的地 查看详情

react-grid-layout:可拖拽缩放网格布局插件

...动生成。RGL仅支持React,不支持jQuery。    使用npm安装React-Grid-Layout:    样式表:    下面的示例将生成一个包含三个项目的网格,其中:  1.    用户将无法拖动或... 查看详情

echarts地图,可以在缩放到一定程度时改变事件么

ECharts图表组件当图表数据过多增设滚动条与Highcharts图表进行比较这一点还是很不错的。因为ECharts图表组件可以自行控制,而highcharts图表组件是没有这个属性可以设置的,只能够通过设置chart的zoomType来对图表区域进行缩放或者... 查看详情

简单实现svg的拖拽和缩放

参考技术A此方法限制太多,可能svg使用d3绘制,并且抽象出svg中所有元素的一个参照点和缩放比例svg元素不会太多,否则会造成卡顿。最近有个项目需要我帮一下前端,主要是使用d3绘制svg放在页面,其中有一个功能就是对绘制... 查看详情

echart:地图上标签重叠问题解决

...屏用echart里面的矢量地图,上面需要显示一些标签。标签使用常规的做法,即用散点图,坐标则设为地图坐标:出来的效果如图:这里有个比较大的问题,标签显示会重叠在一起。我给标签设置了事件,鼠标放上去之后,对应标... 查看详情

vue-draggable-resizable可拖拽缩放的组件(代码片段)

Vue用于可调整大小和可拖动元素的组件并支持组件之间的冲突检测与组件对齐更新2.0版本说明:组件基于vue-draggable-resizable进行二次开发距离上1.7版本版本的修改已经过去快一年的时间了,原版组件在之前已经更新到了2.0... 查看详情

echarts地图搭配饼图怎样实现

...即可),操作很简单;本回答被提问者采纳 参考技术B看Echart官网文档下面有案例 查看详情

js实现可拖拽的div

实现一个div可以被拖拽,代码如下所示:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>zzw_drap</title><style>*{margin:0;padding:0;}#box{position:absolute;top:100 查看详情

监听echarts里的地图缩放事件

 // 获取百度地图实例,使用百度地图自带的控件    var bmap = myChart.getModel().getComponent(‘bmap‘).getBMap();    bmap.setMapStyle({style:‘normal‘}); & 查看详情

android可拖拽view的简单实现(代码片段)

其实Android可拖拽View实现起来很简单,最简单的就是实现View的setOnTouchListener方法。下面这段代码就实现了如下两个功能:1、View随着手指的拖动儿拖动。2、当松开手指的时候,如果View在屏幕的右半边,则自动让其贴到屏幕右边... 查看详情

android可拖拽view的简单实现(代码片段)

其实Android可拖拽View实现起来很简单,最简单的就是实现View的setOnTouchListener方法。下面这段代码就实现了如下两个功能:1、View随着手指的拖动儿拖动。2、当松开手指的时候,如果View在屏幕的右半边,则自动让其贴到屏幕右边... 查看详情