echarts宁波市鄞州区geoJson地图点击弹出自定义弹窗效果实例

geoJson2 yekong

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

echarts宁波市鄞州区geoJson地图点击弹出自定义弹窗

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

echarts宁波市鄞州区geoJson地图点击弹出自定义弹窗

echarts宁波市鄞州区geoJson地图阴影

echarts地图阴影效果实例,通过shadowColor控制阴影的颜色,通过shadowBlur控制范围,通过shadowOffsetX和shadowOffsetY控制偏移.

echarts宁波市鄞州区geoJson地图阴影

echarts宁波市鄞州区geoJson地图3d地图自定义图标

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

echarts宁波市鄞州区geoJson地图3d地图自定义图标

threejs宁波市鄞州区geoJson地图3d地图添加金色效果

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

threejs宁波市鄞州区geoJson地图3d地图添加金色效果

threejs宁波市鄞州区geoJson地图3d地图css2d标签

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

threejs宁波市鄞州区geoJson地图3d地图css2d标签

宁波市鄞州区 下辖有 钟公庙街道,中河街道,东钱湖镇,东吴镇,云龙镇,五乡镇,咸祥镇,塘溪镇,姜山镇,横溪镇,瞻岐镇,邱隘镇,下应街道,梅墟街道,潘火街道,首南街道,新明街道,明楼街道,白鹤街道,百丈街道,东柳街道,东郊街道,东胜街道,福明街道

宁波市鄞州区下辖区域坐标

{"钟公庙街道":[121.53058453351466,29.8361316469114],"中河街道":[121.56832000362326,29.83543049580166],"东钱湖镇":[121.68505685111418,29.7628776388601],"东吴镇":[121.75475397145959,29.78951816630643],"云龙镇":[121.584632586784,29.75458576824916],"五乡镇":[121.71527426651103,29.84263675274273],"咸祥镇":[121.78300059161404,29.66117537267225],"塘溪镇":[121.68919842239784,29.67526132882672],"姜山镇":[121.51951589146861,29.74881062681631],"横溪镇":[121.60901840310288,29.68823541433856],"瞻岐镇":[121.81466002935731,29.72321682708073],"邱隘镇":[121.63490139758389,29.84275067957223],"下应街道":[121.59059138654897,29.80255536820582],"梅墟街道":[121.64069444262266,29.88907771304888],"潘火街道":[121.59617434671014,29.83432737422979],"首南街道":[121.53806938826466,29.79967765357989],"新明街道":[121.6103334434023,29.89016281919719],"明楼街道":[121.57365782791089,29.88498710898464],"白鹤街道":[121.55915187583238,29.85695418074188],"百丈街道":[121.56602842378126,29.86569111127999],"东柳街道":[121.58414751771645,29.86698854151147],"东郊街道":[121.56365479415703,29.84795450904665],"东胜街道":[121.5690658461699,29.87545074066683],"福明街道":[121.60492558224988,29.87608025316311]}

宁波市鄞州区行政划分代码

[{"name":"钟公庙街道","code":"330212002000"},{"name":"中河街道","code":"330212005000"},{"name":"东钱湖镇","code":"330212103000"},{"name":"东吴镇","code":"330212104000"},{"name":"云龙镇","code":"330212108000"},{"name":"五乡镇","code":"330212105000"},{"name":"咸祥镇","code":"330212101000"},{"name":"塘溪镇","code":"330212102000"},{"name":"姜山镇","code":"330212110000"},{"name":"横溪镇","code":"330212109000"},{"name":"瞻岐镇","code":"330212100000"},{"name":"邱隘镇","code":"330212106000"},{"name":"下应街道","code":"330212001000"},{"name":"梅墟街道","code":"330212004000"},{"name":"潘火街道","code":"330212007000"},{"name":"首南街道","code":"330212006000"},{"name":"新明街道","code":"330212015000"},{"name":"明楼街道","code":"330212010000"},{"name":"白鹤街道","code":"330212011000"},{"name":"百丈街道","code":"330212008000"},{"name":"东柳街道","code":"330212012000"},{"name":"东郊街道","code":"330212013000"},{"name":"东胜街道","code":"330212009000"},{"name":"福明街道","code":"330212014000"}]

说明

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

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

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

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

宁波市鄞州区echarts地图效果实例和threejs地图效果实例下载

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