echarts西安市长安区geoJson地图水滴状气泡图实例代码

geoJson2 yekong

可视化大屏 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是西安市长安区echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。

长安区,隶属于陕西省西安市,位于西安市南部,东临蓝田县,南接宁陕县、柞水县,西与鄠邑区、咸阳市接壤,北和雁塔区、灞桥区为邻,区域面积1583平方千米。截至2022年10月,长安区下辖25个街道,实际管辖16个街道。2021年,长安区常住人口111.1万人 。

echarts西安市长安区geoJson地图水滴状气泡图

echarts地图渲染时,会通过一个水滴状小气泡来将数值渲染到地图上,我们可以可以通过scatter来实现我们想要的效果.

echarts西安市长安区geoJson地图水滴状气泡图

echarts西安市长安区geoJson地图区域闪烁

echarts地图有时候为了突出某一块区域的重要性,会进行两个颜色的交替变化来告诉用户这一块需要重点关注,我们可以通过echarts的dispatchAction来实现我们想要的效果.

echarts西安市长安区geoJson地图区域闪烁

echarts西安市长安区geoJson地图tooltip自定义html

echarts tooltip演示自定义,通过toolTip的formatter方法以html+css的方式实现自己想要的样式效果,鼠标移上去就可以看到我们想要的效果了,也可以通过css自定义为自己需要的样式.

echarts西安市长安区geoJson地图tooltip自定义html

threejs西安市长安区geoJson地图3d地图自定义贴图加CSS3D标签

通过threejs绘制3d地图并添加CSS3D标签和自定义贴图,如果想系统的学习threejs的话,可以观看threejs课程视频 WebGL前端3D可视化教程

threejs西安市长安区geoJson地图3d地图自定义贴图加CSS3D标签

threejs西安市长安区geoJson地图3d地图CSS3D标签

通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小 Vue3 threejs 在3d地图中绘制css3d标签标注省份

threejs西安市长安区geoJson地图3d地图CSS3D标签

threejs西安市长安区geoJson地图3d地图css2d标签

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

threejs西安市长安区geoJson地图3d地图css2d标签

西安市长安区 下辖有 东大街道,五台街道,五星街道,兴隆街道,大兆街道,子午街道,斗门街道,杜曲街道,灵沼街道,炮里街道,王寺街道,王曲街道,细柳街道,郭杜街道,韦曲街道,马王街道,高桥街道,魏寨街道,鸣犊街道,黄良街道,太乙宫街道,引镇街道,杨庄街道,滦镇街道,王莽街道

西安市长安区下辖区域坐标

{"东大街道":[108.7562233404354,33.95937068248885],"五台街道":[108.96239089121931,33.95835490961276],"五星街道":[108.78166251507832,34.08747953740553],"兴隆街道":[108.80810992981998,34.12235600018187],"大兆街道":[109.0458095440516,34.14237853308971],"子午街道":[108.90219159532819,34.02963197985868],"斗门街道":[108.77654931868943,34.21483140113681],"杜曲街道":[108.99724240539037,34.10401723786909],"灵沼街道":[108.7120530901382,34.15448314568684],"炮里街道":[109.12438006212943,34.16572632557775],"王寺街道":[108.77400733354733,34.27021009671564],"王曲街道":[108.94866798123127,34.08746131807466],"细柳街道":[108.77426830641257,34.16651361389169],"郭杜街道":[108.8599000481322,34.15487502797952],"韦曲街道":[108.95726597113936,34.15305998574773],"马王街道":[108.70395311228643,34.20403048350832],"高桥街道":[108.69105386664735,34.25289918005195],"魏寨街道":[109.17242022760453,34.11180922050721],"鸣犊街道":[109.1140287734507,34.13137445934792],"黄良街道":[108.89985338950339,34.09186360754899],"太乙宫街道":[109.00630627295868,34.00369068945815],"引镇街道":[109.10067822567174,34.00290871786525],"杨庄街道":[],"滦镇街道":[108.83080909175733,33.95319891857231],"王莽街道":[109.06142268501279,34.00047769170611]}

西安市长安区行政划分代码

[{"name":"东大街道","code":"610116008000"},{"name":"五台街道","code":"610116019000"},{"name":"五星街道","code":"610116021000"},{"name":"兴隆街道","code":"610116015000"},{"name":"大兆街道","code":"610116013000"},{"name":"子午街道","code":"610116009000"},{"name":"斗门街道","code":"610116010000"},{"name":"杜曲街道","code":"610116012000"},{"name":"灵沼街道","code":"610116022000"},{"name":"炮里街道","code":""},{"name":"王寺街道","code":"610116005000"},{"name":"王曲街道","code":"610116016000"},{"name":"细柳街道","code":"610116011000"},{"name":"郭杜街道","code":"610116002000"},{"name":"韦曲街道","code":"610116001000"},{"name":"马王街道","code":"610116006000"},{"name":"高桥街道","code":"610116020000"},{"name":"魏寨街道","code":"610116025000"},{"name":"鸣犊街道","code":"610116017000"},{"name":"黄良街道","code":"610116014000"},{"name":"太乙宫街道","code":"610116007000"},{"name":"引镇街道","code":"610116004000"},{"name":"杨庄街道","code":"610116023000"},{"name":"滦镇街道","code":"610116003000"},{"name":"王莽街道","code":"610116018000"}]

说明

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

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

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

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

西安市长安区echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts西安市长安区geoJson地图水滴状气泡图实例代码