echarts锦州市太和区geoJson地图点击弹出自定义弹窗实例代码

geoJson2 yekong

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

太和区隶属于辽宁省锦州市,位于锦州市城区周边,介于北纬41°01′54″~41°13′11″,东经120°56′04″~121°15′09″;太和区气候属暖温带半湿润大陆性季风气候,四季分明;2021年,太和区下辖10个街道,区政府驻太和街道解放西路226号,全区幅员面积约221平方公里。根据第七次人口普查数据,截至2020年11月1日零时,太和区常住人口为175098人。

echarts锦州市太和区geoJson地图点击弹出自定义弹窗

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

echarts锦州市太和区geoJson地图点击弹出自定义弹窗

echarts锦州市太和区geoJson地图指定区域高亮

echarts让指定区域变为选中高亮状态

echarts锦州市太和区geoJson地图指定区域高亮

echarts锦州市太和区geoJson地图3d地图实例旋转动画

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

echarts锦州市太和区geoJson地图3d地图实例旋转动画

threejs锦州市太和区geoJson地图3d地图添加描边效果

通过threejs绘制3d地图使用outlinePass 实现发光描边效果,如果想系统的学习threejs的话,可以观看threejs视频 WebGL 3D可视化教程

threejs锦州市太和区geoJson地图3d地图添加描边效果

threejs锦州市太和区geoJson地图3d地图鼠标移入显示标签并高亮

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

threejs锦州市太和区geoJson地图3d地图鼠标移入显示标签并高亮

threejs锦州市太和区geoJson地图3d地图CSS2D外加旋转棱锥

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

threejs锦州市太和区geoJson地图3d地图CSS2D外加旋转棱锥

锦州市太和区 下辖有 娘娘宫镇,天桥街道,太和街道,杏山街道,王家街道,汤河子街道,新民乡,松山镇,营盘乡,兴隆街道,凌南街道,凌西街道,大薛街道,女儿河乡,锦州市果树农场

锦州市太和区下辖区域坐标

{"娘娘宫镇":[121.19481878264797,40.95564595453193],"天桥街道":[],"太和街道":[121.1021919996286,41.10566048840873],"杏山街道":[121.07712759198648,40.95075206863162],"王家街道":[],"汤河子街道":[],"新民乡":[],"松山镇":[121.13275597132468,41.0253926654581],"营盘乡":[],"兴隆街道":[],"凌南街道":[],"凌西街道":[],"大薛街道":[121.18886566383372,41.17893329979118],"女儿河乡":[120.98939981286546,41.0841486400217],"锦州市果树农场":[121.15909761540098,41.08023841681779]}

锦州市太和区行政划分代码

[{"name":"娘娘宫镇","code":""},{"name":"天桥街道","code":"210711071000"},{"name":"太和街道","code":"210711004000"},{"name":"杏山街道","code":"210711072000"},{"name":"王家街道","code":""},{"name":"汤河子街道","code":""},{"name":"新民乡","code":""},{"name":"松山镇","code":""},{"name":"营盘乡","code":""},{"name":"兴隆街道","code":""},{"name":"凌南街道","code":"210711080000"},{"name":"凌西街道","code":""},{"name":"大薛街道","code":"210711008000"},{"name":"女儿河乡","code":""},{"name":"锦州市果树农场","code":"210711480000"}]

说明

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

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

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

锦州市太和区echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts锦州市太和区geoJson地图点击弹出自定义弹窗实例代码