echarts地图设置边界限高亮

最新推荐文章于 2024-05-09 11:39:05 发布
最新推荐文章于 2024-05-09 11:39:05 发布
阅读量1k 收藏 10
点赞数 9
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feng4175/article/details/135378558
版权

在echart地图中，经常会有需要做边界高亮以及三维视觉样式。
我这里是有需要三维样式以及地图边界与省内市区域界线粗细度不同，原本地图加载完成后视觉是平面的，通过geo属性，进行叠加，叠加出来的地图进行部分错位，这样从而影响视觉，看起来就是三维的。

而我们最上层需要显示的地图就放在与geo同级的series里面

zlevel设置为三个中最大的，那么我们需要显示的地图就显示在最上层了。

这里是地图设置完成后的效果，是不是有三维的视觉效果了。这里加载的时某省的地图，要求是区域内的市级边界线和省级边界线粗细度不一样。

通过echarts官方文档配置找到以下属性，设置完后，包括最外城边界和是区域边界都是一样粗细，显示仅靠这些属性没有达到我想要的效果。

还是同样的办法，在geo中再叠加一个，将zlevel与我想显示的地图设置为同一个值，再将其边界线设置成我需要的粗细度

看效果

feng4175
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts地图绘制
O_nini_O的博客
06-29 5109
echarts画地图&热力图
2.（echarts篇）echarts颜色地图边缘高亮.zip
12-31
下载如有问题，可私信博主。下载前建议先查看博客内容，其地址为：https://blog.csdn.net/QQ98281642/article/details/122254613
Echarts地图geoJson格式全国行政边界线(省、市、区县)
11-02
Echarts地图geoJson格式全国行政边界线(省、市、区县) 100000.geoJson110000.geoJson。。。。。。。等等519个文件
echarts-gl 离线3D地图，效果2实现点击某个区域高亮显示
最新发布
qq_26408545的博客
05-09 725
下载地图重名成 xinjiang.json，粘贴vue项目的 api/json/xinjiang.json 下。免费下载实时更新的geoJson数据、行政区划边界数据、区划边界坐标集合__HashTang。vue组件，echarts制作3D地图，可点击凸起，hover高亮，可做飞鱼线（带天空盒子）这里下载的新疆，选项的第一个和第二个都行。新建 aa.vue，访问即可看见效果。
Echarts地图之——如何给地图添加外边框轮廓
在车上在路上的博客
03-29 1382
这就需要我们把echarts registerMap的全国省份json和国界边框json的坐标相一致。但实际情况中，我们需要把国界的边框和各个省份属于国界的边框相吻合，否则就会造成两者看起来是错位的感觉。然后我们的地图展示用china命名，国界边框展示用chinaOutline命名即可。只要两个的位置，缩放大小一样，页面上就不会有错位的问题了。而且省份的边界正好处于边框的中心位置，看起来也很舒服。分别下载包含子区域和 不包含子区域的就可以了。在series内创建两个type为map的项。
echarts 地图最外边线高亮，内部不高亮
qq_40295815的博客
07-21 3011
geo: { map: "kenli", zoom: 1.2, left: "25%", roam: false, //是否开启鼠标缩放和平移漫游 itemStyle: { normal: { areaColor: "rgba(0,255,255,.1)", borderColor: "rgba(0,255,255,.1)", .
Echarts 地图点击板块高亮，再次点击还是高亮，在地图外点击返回，则不高亮。
qq_44146522的博客
07-26 1015
/如果惦记的省份和当前高亮的省份不一样，则找到地图数据highlight=true,即当前高亮省份的下标，设置不高亮。然后再遍历地图数据找到点击省份，设置highlight=true，再设置高亮此省份。['香港', '澳门', '南海诸岛','台湾'].includes(param.name)) {if (this.clickCity == '全国') {//设置某个省不高亮 dataIndex 下标。this.clickCity = '全国'//设置全部省不高亮。
echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点
weixin_45665171的博客
06-08 8132
echarts 设置地图外边框、地图背景渐变色和地图阴影,增加立体感以及在地图上打点
ECharts自定义地图——行政划分“乡镇级别”地图
热门推荐
牟云飞的博客
06-19 1万+
百度地图API能够直接划分区级别的行政划分： 如果是在线访问的系统可以参考链接https://blog.csdn.net/myfmyfmyfmyf/article/details/69382618#comments； 如果是离线的系统，可以通过这个echarts地址下载实现离线地图https://gallery.echartsjs.com/editor.html?c=x4snrWXFGe ...
html地图动画效果图,【html】绚丽的HTML5地图分布动画DEMO演示
weixin_34938347的博客
06-03 746
超绚丽的HTML5地图分布动画DEMO演示$('#document').ready(function(){getEcharts();});function getEcharts(){// Step:3 conifg ECharts's path, link to echarts.js from current page.// Step:3 为模块加载器配置echarts的路径，从当前页面链接到ec...
echarts 设置地图外边框、地图背景渐变以及在地图上打点.js
05-13
主要配置 echart 中 地图的外边框和地图整体背景颜色渐变以及在对应的地图上做标记等功能。详细效果图：https://blog.csdn.net/qq_36437172/article/details/106099547
echarts地图加轮廓渐变色，地图子区域不加边界渐变色
10-16
echarts地图加轮廓渐变色，地图子区域不加边界渐变色，济南市历下区地图加轮廓，地图加轮廓渐变，关键是地图不能移动，roam: false,否则就达不到想要的效果
echarts中地图JSON数据
04-25
6. **交互功能**：ECharts地图支持多种交互，如鼠标悬停高亮、点击选中等，可以通过配置项开启。例如： ```javascript tooltip: { trigger: 'item' }, selectedMode: 'multiple' ``` 在大屏展示场景下，地图...
海南省echarts地图资源
12-30
3. **地图交互**：ECharts地图支持鼠标悬停、点击等交互操作，可以实现区域高亮、弹出信息窗口等功能。这需要配置`emphasis`和`onMouseover`、`onMouseout`等事件处理器。 4. **自定义样式**：ECharts允许用户...
台湾echarts地图资源
12-30
4. **交互功能**：ECharts地图支持丰富的交互功能，如点击高亮、鼠标悬浮显示提示框、缩放和平移等。这使得用户能更方便地探索和理解数据。例如，在台湾地图上，用户可以通过点击某个县市查看其详细信息，或者通过...
echarts地图最新东莞区域地图坐标json数据
06-20
2. **地图数据格式**：ECharts地图数据通常以JSON格式存储，包含了各个区域的边界坐标信息。例如，“最新东莞地图数据.json”就是这样一个数据文件，它包含了东莞各行政区划的经纬度坐标。 3. **加载地图数据**：在...
echarts地图设置区域边界
zyj12138的博客
07-10 5565
就是要实现地图边界变成虚线和黄色
使用echarts 制作中国地图的显示（基础的配置 + 省份高亮显示 + 鼠标滑动高亮）
weixin_53630395的博客
11-21 4424
使用echarts 制作中国地图的显示（基础的配置 + 省份高亮显示 + 鼠标滑动高亮）
echarts 地图边界设置渐变色
11-03
可以通过在echarts中配置地图的itemStyle属性来设置地图边界的渐变色。具体方法如下： ```javascript { //设置地图边界的颜色渐变 itemStyle: { borderColor: 'rgba(0, 0, 0, 0.2)', borderWidth: 1, areaColor: { type: 'linear', x: 0, y: 0, x2: 1, y2: 1, colorStops: [{ offset: 0, color: 'rgba(0, 255, 255, 0.8)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(0, 255, 255, 0.2)' // 100% 处的颜色 }], globalCoord: false // 缺省为 false } }, //设置地图不能移动 roam: false } ``` 其中，itemStyle属性中的borderColor和borderWidth属性用于设置地图边界的颜色和宽度，areaColor属性用于设置地图整体背景颜色的渐变，roam属性用于设置地图是否可以移动。需要注意的是，如果要设置地图边界的渐变色，需要将roam属性设置为false，否则无法达到想要的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值