echarts池州市东至县geoJson地图地图下钻展示演示实例

geoJson2 yekong

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

echarts池州市东至县geoJson地图地图下钻展示

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

echarts池州市东至县geoJson地图地图下钻展示

echarts池州市东至县geoJson地图点击地图获取经纬度

echarts地图渲染后,有时候会需要点击后获取到经纬度信息,通过经纬度信息来查询一些内容,这里我们可以通过convertFromPixel来获取经纬度.

echarts池州市东至县geoJson地图点击地图获取经纬度

echarts池州市东至县geoJson地图根据经纬度显示自定义html弹窗

echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.

echarts池州市东至县geoJson地图根据经纬度显示自定义html弹窗

threejs池州市东至县geoJson地图3d地图添加金色效果

通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰,如果想系统的学习threejs的话,可以观看threejs课程视频 Three.js前端3D可视化

threejs池州市东至县geoJson地图3d地图添加金色效果

threejs池州市东至县geoJson地图3d地图添加旋转棱锥

通过threejs绘制3d地图并在指定经纬度上添加带波纹效果不停旋转的棱锥效果实例

threejs池州市东至县geoJson地图3d地图添加旋转棱锥

threejs池州市东至县geoJson地图3d地图css2d标签

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

threejs池州市东至县geoJson地图3d地图css2d标签

池州市东至县 下辖有 大渡口经济开发区,东至经济开发区,东流镇,官港镇,尧渡镇,张溪镇,昭潭镇,木塔乡,泥溪镇,洋湖镇,胜利镇,花园乡,葛公镇,青山乡,香隅镇,龙泉镇,大渡口镇

池州市东至县下辖区域坐标

{"大渡口经济开发区":[117.0887813471299,30.47601381175469],"东至经济开发区":[116.81749401267689,30.07236514221248],"东流镇":[116.9379357735281,30.22890493597129],"官港镇":[116.96683095764777,29.90809082168103],"尧渡镇":[117.0106056234568,30.11123205723778],"张溪镇":[117.13243366829225,30.29837674044119],"昭潭镇":[116.81431620759435,29.70832526620299],"木塔乡":[117.01927929019432,29.75858070274577],"泥溪镇":[116.89462702993674,29.76974177688376],"洋湖镇":[117.19863021921103,30.17956621763999],"胜利镇":[117.00512641736148,30.37597857493647],"花园乡":[117.09556390982146,29.93444974899741],"葛公镇":[117.18760722857229,30.05500104763168],"青山乡":[116.71817632721914,29.69369607513971],"香隅镇":[116.85271555775586,30.0656664605176],"龙泉镇":[116.82640381668274,29.62872081012721],"大渡口镇":[117.06191321805696,30.45500777513048]}

池州市东至县行政划分代码

[{"name":"大渡口经济开发区","code":"341721401000"},{"name":"东至经济开发区","code":"341721400000"},{"name":"东流镇","code":"341721101000"},{"name":"官港镇","code":"341721108000"},{"name":"尧渡镇","code":"341721100000"},{"name":"张溪镇","code":"341721104000"},{"name":"昭潭镇","code":"341721109000"},{"name":"木塔乡","code":"341721201000"},{"name":"泥溪镇","code":"341721111000"},{"name":"洋湖镇","code":"341721105000"},{"name":"胜利镇","code":"341721103000"},{"name":"花园乡","code":"341721200000"},{"name":"葛公镇","code":"341721106000"},{"name":"青山乡","code":"341721202000"},{"name":"香隅镇","code":"341721107000"},{"name":"龙泉镇","code":"341721110000"},{"name":"大渡口镇","code":"341721102000"}]

说明

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

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

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

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

池州市东至县echarts地图效果实例和threejs地图效果实例下载

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