echarts温州市苍南县geoJson地图点击地图插小旗代码演示

geoJson2 yekong

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

echarts温州市苍南县geoJson地图点击地图插小旗

echarts地图渲染点击地图显示自定义效果实例,效果类似点击插小旗的效果,通过scatter实现.

echarts温州市苍南县geoJson地图点击地图插小旗

echarts温州市苍南县geoJson地图点击弹出自定义弹窗

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

echarts温州市苍南县geoJson地图点击弹出自定义弹窗

echarts温州市苍南县geoJson地图定义颜色

echarts地图通过visualMap来事先设置好数据区间,根据区间来来显示地图的颜色,这里的visualMap数据是随机生成的,可以通过实例代码根据自己的需要配置颜色和数据区间.

echarts温州市苍南县geoJson地图定义颜色

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地图鼠标移入显示标签并高亮

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

温州市苍南县 下辖有 金乡镇,马站镇,马站镇,马站镇,马站镇,马站镇,凤阳畲族乡,宜山镇,岱岭畲族乡,灵溪镇,藻溪镇,赤溪镇,莒溪镇,桥墩镇,望里镇,钱库镇,大渔镇,金乡镇,炎亭镇,矾山镇,南宋镇,沿浦镇,马站镇,霞关镇

温州市苍南县下辖区域坐标

{"金乡镇":[120.61585406256773,27.41550256830701],"马站镇":[120.49832744414479,27.24828922230937],"凤阳畲族乡":[120.45451372390787,27.3369313411107],"宜山镇":[120.53418502578619,27.51573473599701],"岱岭畲族乡":[120.43772077142557,27.28800696657757],"灵溪镇":[120.39465874433608,27.47644907406928],"藻溪镇":[120.4469344993204,27.45938228608644],"赤溪镇":[120.53732786692049,27.3561512178316],"莒溪镇":[120.14043045925138,27.52367898427524],"桥墩镇":[120.26421829586768,27.46555904906689],"望里镇":[120.51477107757744,27.47096413877934],"钱库镇":[120.55404894026267,27.46659131919496],"大渔镇":[120.58633128355449,27.38168328723719],"炎亭镇":[120.66970627129602,27.46176809485128],"矾山镇":[120.4154019092538,27.36081639496099],"南宋镇":[120.39285746274874,27.39140951013756],"沿浦镇":[120.45554002431001,27.20193822021673],"霞关镇":[120.51020797751713,27.1689382839359]}

温州市苍南县行政划分代码

[{"name":"金乡镇","code":"330327107000"},{"name":"马站镇","code":"330327118000"},{"name":"马站镇","code":"330327118000"},{"name":"马站镇","code":"330327118000"},{"name":"马站镇","code":"330327118000"},{"name":"马站镇","code":"330327118000"},{"name":"凤阳畲族乡","code":"330327216000"},{"name":"宜山镇","code":"330327103000"},{"name":"岱岭畲族乡","code":"330327218000"},{"name":"灵溪镇","code":"330327100000"},{"name":"藻溪镇","code":"330327112000"},{"name":"赤溪镇","code":"330327117000"},{"name":"莒溪镇","code":"330327125000"},{"name":"桥墩镇","code":"330327113000"},{"name":"望里镇","code":"330327122000"},{"name":"钱库镇","code":"330327104000"},{"name":"大渔镇","code":"330327124000"},{"name":"金乡镇","code":"330327107000"},{"name":"炎亭镇","code":"330327123000"},{"name":"矾山镇","code":"330327116000"},{"name":"南宋镇","code":"330327126000"},{"name":"沿浦镇","code":"330327128000"},{"name":"马站镇","code":"330327118000"},{"name":"霞关镇","code":"330327127000"}]

说明

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

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

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

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

温州市苍南县echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts温州市苍南县geoJson地图点击地图插小旗代码演示