echarts运城市垣曲县geoJson地图tooltip自定义html代码演示

geoJson2 yekong

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

垣曲县,隶属 山西省 运城市,位于山西省南部、运城市东北隅,东北与阳城县、沁水县毗连,北和翼城县、绛县接壤,西与闻喜县交界,西南连接夏县,东邻河南省的济源市,南与河南省的渑池县、新安县隔河相望。县域面积1620平方千米,下辖11个乡镇、71个行政村。2022年末,垣曲县常住人口为19.39万人。

echarts运城市垣曲县geoJson地图tooltip自定义html

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

echarts运城市垣曲县geoJson地图tooltip自定义html

echarts运城市垣曲县geoJson地图3d地图自定义图标

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

echarts运城市垣曲县geoJson地图3d地图自定义图标

echarts运城市垣曲县geoJson地图 tooltip轮播

echarts地图实现类似tooltip轮播效果,通过effectScatter实现浮窗,并通过定时修改effectScatter的data来实现浮窗的移动.

echarts运城市垣曲县geoJson地图 tooltip轮播

threejs运城市垣曲县geoJson地图3d地图CSS3D标签

通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小,如果对threejs感兴趣,可以观看threejs视频教程 WebGL/Three.js前端高薪3D可视化

threejs运城市垣曲县geoJson地图3d地图CSS3D标签

threejs运城市垣曲县geoJson地图3d地图添加金色效果

通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰

threejs运城市垣曲县geoJson地图3d地图添加金色效果

threejs运城市垣曲县geoJson地图3d地图红色描边闪烁警报

通过threejs绘制3d地图使用outlinePass 实现发光描边闪烁效果 以实现警报功能

threejs运城市垣曲县geoJson地图3d地图红色描边闪烁警报

运城市垣曲县 下辖有 历山镇,新城镇,解峪乡,华峰乡,古城镇,王茅镇,皋落乡,英言乡,蒲掌乡,长直乡,毛家湾镇,历山镇,新城镇,解峪乡,华峰乡,古城镇,王茅镇,皋落乡,英言乡,蒲掌乡,长直乡,毛家湾镇

运城市垣曲县下辖区域坐标

{"历山镇":[111.90652472853486,35.32205782293221],"新城镇":[111.67772061670846,35.31700062098767],"解峪乡":[111.71529975707588,35.07317941358144],"华峰乡":[111.82053306727974,35.18137603308026],"古城镇":[111.87507468584877,35.15613590635638],"王茅镇":[111.77948077106237,35.14506462602226],"皋落乡":[111.69759098110157,35.28359500988336],"英言乡":[111.97335698863662,35.17531859621908],"蒲掌乡":[112.02087320034053,35.15910997591695],"长直乡":[111.74495901446622,35.22042939264709],"毛家湾镇":[111.60762381095279,35.1720700697073]}

运城市垣曲县行政划分代码

[{"name":"历山镇","code":"140827101000"},{"name":"新城镇","code":"140827100000"},{"name":"解峪乡","code":"140827202000"},{"name":"华峰乡","code":"140827203000"},{"name":"古城镇","code":"140827102000"},{"name":"王茅镇","code":"140827103000"},{"name":"皋落乡","code":"140827205000"},{"name":"英言乡","code":""},{"name":"蒲掌乡","code":"140827200000"},{"name":"长直乡","code":"140827204000"},{"name":"毛家湾镇","code":"140827104000"}]

说明

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

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

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

运城市垣曲县echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts运城市垣曲县geoJson地图tooltip自定义html代码演示