echarts遂宁市船山区geoJson地图3d地图自定义图标效果实例

geoJson2 yekong 89℃

数据大屏可视化 项目中经常需要渲染echarts地图,为了不同城市快速实现,将不同城市的echarts地图效果整理出来,今天为大家整理遂宁市船山区echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。

echarts遂宁市船山区geoJson地图3d地图自定义图标

echarts 3d地图添加自定义图标实例

echarts遂宁市船山区geoJson地图3d地图自定义图标

echarts遂宁市船山区geoJson地图点击弹出自定义弹窗

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

echarts遂宁市船山区geoJson地图点击弹出自定义弹窗

echarts遂宁市船山区geoJson地图3d地图实例旋转动画

使用的是echarts-gl结合echarts实现的3d地图效果实例

echarts遂宁市船山区geoJson地图3d地图实例旋转动画

threejs遂宁市船山区geoJson地图3d地图鼠标移入显示标签并高亮

通过threejs绘制的3d地图鼠标移入显示标签并高亮,如果想系统的学习threejs的话,可以观看threejs视频 Three.js视频教程3D可视化

threejs遂宁市船山区geoJson地图3d地图鼠标移入显示标签并高亮

threejs遂宁市船山区geoJson地图3d地图css2d标签

通过threejs绘制的3d地图css2d标签实例,CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名

threejs遂宁市船山区geoJson地图3d地图css2d标签

threejs遂宁市船山区geoJson地图3d地图

通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例

threejs遂宁市船山区geoJson地图3d地图

遂宁市船山区 下辖有 高升街街道,九莲街道,嘉禾街道,慈音街道,介福路街道,养身谷街道,育才路街道,金盆工作办公室,广德街道,仁里镇,保升乡,北固乡,唐家乡,复桥镇,南强街道,新桥镇,灵泉街道,龙坪街道,桂花镇,凯旋路街道,南津路街道,永兴镇,河沙镇,镇江寺街道,西宁乡,龙凤镇,河东二期街道,清河工作办公室,老池乡,富源路街道

遂宁市船山区下辖区域坐标

{"高升街街道":[105.5732631710539,30.5055187918743],"九莲街道":[105.52710722339816,30.58168868753581],"嘉禾街道":[105.54758441048409,30.52969873319302],"慈音街道":[105.59560458335814,30.53436813720909],"介福路街道":[105.56887082047982,30.53500735527064],"养身谷街道":[105.63824591836544,30.54008404428294],"育才路街道":[105.5695711283387,30.51259901335349],"金盆工作办公室":[105.67126023338997,30.42591432047979],"广德街道":[105.54448427547385,30.50302636362976],"仁里镇":[105.63952789066302,30.50691637781367],"保升乡":[105.56318970675272,30.42556350236502],"北固乡":[105.52903861941579,30.54330833128245],"唐家乡":[105.50220430609872,30.63028832897043],"复桥镇":[105.6119898280227,30.40227417503371],"南强街道":[105.60190345452365,30.46880487220562],"新桥镇":[105.48597310762057,30.56610894697022],"灵泉街道":[105.6127201454062,30.51604671606125],"龙坪街道":[105.62559345477071,30.46231734537323],"桂花镇":[105.44284319573723,30.58999521994933],"凯旋路街道":[105.58497115359647,30.50214813384062],"南津路街道":[105.59178588367155,30.4989460733423],"永兴镇":[105.61061271218358,30.59633106865353],"河沙镇":[105.69255317514263,30.59604981700868],"镇江寺街道":[105.58142318586755,30.50846213619106],"西宁乡":[105.52837801666409,30.4955235520867],"龙凤镇":[105.60319650058868,30.45400443371252],"河东二期街道":[105.58821790086378,30.57666336187884],"清河工作办公室":[105.61929769123994,30.42535302028148],"老池乡":[105.70554061047883,30.37111029809718],"富源路街道":[105.59658321855319,30.49080754718767]}

遂宁市船山区行政划分代码

[{"name":"高升街街道","code":""},{"name":"九莲街道","code":"510903013000"},{"name":"嘉禾街道","code":"510903007000"},{"name":"慈音街道","code":"510903012000"},{"name":"介福路街道","code":"510903006000"},{"name":"养身谷街道","code":""},{"name":"育才路街道","code":"510903005000"},{"name":"金盆工作办公室","code":""},{"name":"广德街道","code":"510903008000"},{"name":"仁里镇","code":"510903101000"},{"name":"保升乡","code":""},{"name":"北固乡","code":""},{"name":"唐家乡","code":"510903203000"},{"name":"复桥镇","code":""},{"name":"南强街道","code":"510903014000"},{"name":"新桥镇","code":"510903105000"},{"name":"灵泉街道","code":"510903011000"},{"name":"龙坪街道","code":""},{"name":"桂花镇","code":"510903106000"},{"name":"凯旋路街道","code":"510903002000"},{"name":"南津路街道","code":"510903001000"},{"name":"永兴镇","code":"510903103000"},{"name":"河沙镇","code":"510903104000"},{"name":"镇江寺街道","code":"510903004000"},{"name":"西宁乡","code":""},{"name":"龙凤镇","code":"510903100000"},{"name":"河东二期街道","code":""},{"name":"清河工作办公室","code":""},{"name":"老池乡","code":""},{"name":"富源路街道","code":"510903009000"}]

说明

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

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

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

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

遂宁市船山区echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢 (0)
echarts遂宁市船山区geoJson地图3d地图自定义图标效果实例