echarts温州市永嘉县geoJson地图地图下钻展示实例代码

geoJson2 yekong

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

echarts温州市永嘉县geoJson地图地图下钻展示

地图下钻展示,点击地图后,只显示当前选中的区域,可点击返回显示全部地图.

echarts温州市永嘉县geoJson地图地图下钻展示

echarts温州市永嘉县geoJson地图区域闪烁

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

echarts温州市永嘉县geoJson地图区域闪烁

echarts温州市永嘉县geoJson地图 tooltip轮播

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

echarts温州市永嘉县geoJson地图 tooltip轮播

threejs温州市永嘉县geoJson地图3d地图自定义贴图加CSS2D标签

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

threejs温州市永嘉县geoJson地图3d地图自定义贴图加CSS2D标签

threejs温州市永嘉县geoJson地图3d地图鼠标移入显示标签并高亮

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

threejs温州市永嘉县geoJson地图3d地图鼠标移入显示标签并高亮

threejs温州市永嘉县geoJson地图3d地图CSS2D外加旋转棱锥

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

threejs温州市永嘉县geoJson地图3d地图CSS2D外加旋转棱锥

温州市永嘉县 下辖有 南城街道,大若岩镇,县特产场场区,乌牛街道,北城街道,江北街道,岩坦镇,岩头镇,巽宅镇,枫林镇,桥下镇,桥头镇,沙头镇,碧莲镇,鹤盛镇,三江街道,东城街道,东瓯街道,正江山林场,黄田街道,四海山林场

温州市永嘉县下辖区域坐标

{"南城街道":[120.68746792952102,28.15240388885864],"大若岩镇":[120.63847967726781,28.29003093015681],"县特产场场区":[120.66842843752849,28.16196134384734],"乌牛街道":[120.78758266590634,28.08768836555387],"北城街道":[120.66047637661248,28.20476677226971],"江北街道":[120.64944337650829,28.05956214032228],"岩坦镇":[120.6341845196493,28.4993263153596],"岩头镇":[120.71007644157754,28.37433809809971],"巽宅镇":[120.4224347094385,28.40230898802365],"枫林镇":[120.81655011574927,28.31309708759541],"桥下镇":[120.53349368282132,28.20336586665769],"桥头镇":[120.46958541053144,28.1889147595899],"沙头镇":[120.7882812294691,28.24065403997671],"碧莲镇":[120.53573415169146,28.37863319981502],"鹤盛镇":[120.87087498051082,28.42241111281967],"三江街道":[120.71601277929544,28.07358561987812],"东城街道":[120.79450631406806,28.18842029083761],"东瓯街道":[120.61780274658052,28.06305542225365],"正江山林场":[120.86457860384553,28.34324929510782],"黄田街道":[120.6724682189419,28.09237703141846],"四海山林场":[120.76305449852111,28.52845022739526]}

温州市永嘉县行政划分代码

[{"name":"南城街道","code":"330324003000"},{"name":"大若岩镇","code":"330324105000"},{"name":"县特产场场区","code":"330324400000"},{"name":"乌牛街道","code":"330324008000"},{"name":"北城街道","code":"330324002000"},{"name":"江北街道","code":""},{"name":"岩坦镇","code":"330324110000"},{"name":"岩头镇","code":"330324108000"},{"name":"巽宅镇","code":"330324107000"},{"name":"枫林镇","code":"330324109000"},{"name":"桥下镇","code":"330324104000"},{"name":"桥头镇","code":"330324102000"},{"name":"沙头镇","code":"330324111000"},{"name":"碧莲镇","code":"330324106000"},{"name":"鹤盛镇","code":"330324112000"},{"name":"三江街道","code":"330324006000"},{"name":"东城街道","code":"330324001000"},{"name":"东瓯街道","code":""},{"name":"正江山林场","code":"330324402000"},{"name":"黄田街道","code":"330324007000"},{"name":"四海山林场","code":"330324401000"}]

说明

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

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

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

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

温州市永嘉县echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts温州市永嘉县geoJson地图地图下钻展示实例代码