echarts贵阳市开阳县geoJson地图点击弹出自定义弹窗效果实例

geoJson2 yekong 69℃

随着开发 数据大屏可视化 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理贵阳市开阳县echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。

echarts贵阳市开阳县geoJson地图点击弹出自定义弹窗

我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.

echarts贵阳市开阳县geoJson地图点击弹出自定义弹窗

echarts贵阳市开阳县geoJson地图全局颜色渐变

echarts地图渲染时,除了局部区域渐变外也会遇到整个地图的颜色渐变效果,我们可以通过areaColor的linear-gradient来实现我们想要的效果

echarts贵阳市开阳县geoJson地图全局颜色渐变

echarts贵阳市开阳县geoJson地图圆形波纹状气泡图

echarts地图渲染时,会通过effectScatter实现一个圆形外加波纹扩散效果的气泡来使页面看起来更酷炫.

echarts贵阳市开阳县geoJson地图圆形波纹状气泡图

threejs贵阳市开阳县geoJson地图3d地图

通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例,如果对threejs感兴趣,可以观看threejs视频 WebGL/Three.js前端高薪3D可视化

threejs贵阳市开阳县geoJson地图3d地图

threejs贵阳市开阳县geoJson地图3d地图CSS2D外加旋转棱锥

通过threejs绘制3d地图CSS2D外加旋转棱锥效果

threejs贵阳市开阳县geoJson地图3d地图CSS2D外加旋转棱锥

threejs贵阳市开阳县geoJson地图3d地图鼠标移入显示标签并高亮

通过threejs绘制的3d地图鼠标移入显示标签并高亮

threejs贵阳市开阳县geoJson地图3d地图鼠标移入显示标签并高亮

贵阳市开阳县 下辖有 紫兴社区服务中心,宅吉乡,米坪乡,花梨镇,金中镇,高寨乡,龙水乡,龙岗镇,冯三镇,南江乡,南龙乡,双流镇,城关镇,毛云乡,永温镇,禾丰乡,楠木渡镇,南山社区服务中心

贵阳市开阳县下辖区域坐标

{"紫兴社区服务中心":[106.9662678340657,27.05587130115418],"宅吉乡":[107.1321439008265,27.30417091251841],"米坪乡":[107.11786929648244,27.21621800248292],"花梨镇":[107.13134032054464,27.13414603092521],"金中镇":[106.83105452694534,27.11793853455015],"高寨乡":[107.19459852546579,26.88460781301062],"龙水乡":[107.20350432618855,27.20712842441353],"龙岗镇":[107.08106429988955,26.88655241627724],"冯三镇":[107.01466789497704,27.17705550126075],"南江乡":[107.0048524215202,26.93848768010029],"南龙乡":[107.09516178375321,27.03321259804826],"双流镇":[106.84973344787645,27.05559311919505],"城关镇":[106.97948922851799,27.05492766743662],"毛云乡":[107.18411855864578,26.96849740026322],"永温镇":[106.8982847501981,27.18576196109072],"禾丰乡":[106.90834584867503,26.95201241434445],"楠木渡镇":[106.99454819305217,27.28261023424993],"南山社区服务中心":[106.96197982436351,27.06238665719738]}

贵阳市开阳县行政划分代码

[{"name":"紫兴社区服务中心","code":""},{"name":"宅吉乡","code":"520121202000"},{"name":"米坪乡","code":"520121205000"},{"name":"花梨镇","code":"520121107000"},{"name":"金中镇","code":"520121102000"},{"name":"高寨乡","code":""},{"name":"龙水乡","code":"520121204000"},{"name":"龙岗镇","code":"520121105000"},{"name":"冯三镇","code":"520121103000"},{"name":"南江乡","code":""},{"name":"南龙乡","code":"520121200000"},{"name":"双流镇","code":"520121101000"},{"name":"城关镇","code":""},{"name":"毛云乡","code":"520121209000"},{"name":"永温镇","code":"520121106000"},{"name":"禾丰乡","code":""},{"name":"楠木渡镇","code":"520121104000"},{"name":"南山社区服务中心","code":""}]

说明

1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。

2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。

3、本数据仅用于echarts threejs地图效果展示。

4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看

贵阳市开阳县echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢 (0)
echarts贵阳市开阳县geoJson地图点击弹出自定义弹窗效果实例