echarts亳州市涡阳县geoJson地图根据经纬度显示自定义html弹窗代码演示

geoJson2 yekong

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

echarts亳州市涡阳县geoJson地图根据经纬度显示自定义html弹窗

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

echarts亳州市涡阳县geoJson地图根据经纬度显示自定义html弹窗

echarts亳州市涡阳县geoJson地图定义颜色

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

echarts亳州市涡阳县geoJson地图定义颜色

echarts亳州市涡阳县geoJson地图迁徙图

echarts迁徙图实例,可以根据自己的需要配置飞线的颜色大小以及方向

echarts亳州市涡阳县geoJson地图迁徙图

threejs亳州市涡阳县geoJson地图3d地图鼠标移入显示标签并高亮

通过threejs绘制的3d地图鼠标移入显示标签并高亮,如果想系统的学习threejs的话,可以观看threejs视频教程 Three.js 3D可视化

threejs亳州市涡阳县geoJson地图3d地图鼠标移入显示标签并高亮

threejs亳州市涡阳县geoJson地图3d地图自定义贴图加CSS2D标签

通过threejs绘制3d地图并添加CSS2D标签和自定义贴图

threejs亳州市涡阳县geoJson地图3d地图自定义贴图加CSS2D标签

亳州市涡阳县 下辖有 临湖镇,丹城镇,义门镇,店集镇,西阳镇,新兴镇,曹市镇,标里镇,石弓镇,楚店镇,涡南镇,牌坊镇,花沟镇,陈大镇,单集林场,青町镇,高公镇,高炉镇,龙山镇,公吉寺镇,城东街道,城关街道,城西街道,涡北街道,马店集镇,安徽省涡阳工业园区

亳州市涡阳县下辖区域坐标

{"临湖镇":[115.95815689077853,33.46636794995319],"丹城镇":[116.34114230898875,33.73016925679911],"义门镇":[116.0648184826696,33.63411396192464],"店集镇":[115.9949893470137,33.38883637705101],"西阳镇":[116.33481894632627,33.4217799543672],"新兴镇":[116.23199556000185,33.65538791162223],"曹市镇":[116.45136558108598,33.51054150193222],"标里镇":[115.95774958895139,33.55737992664575],"石弓镇":[116.41969055416193,33.69897049355719],"楚店镇":[116.1062229225533,33.41512483481672],"涡南镇":[116.22466519758088,33.40073969050196],"牌坊镇":[116.09490835388272,33.69007939134771],"花沟镇":[116.07679977754691,33.51409125484955],"陈大镇":[116.07559732235276,33.58790767082846],"单集林场":[116.41947403722932,33.46482306796386],"青町镇":[116.46006821324855,33.60802747410397],"高公镇":[115.93087278514227,33.39660603911111],"高炉镇":[116.31396848127417,33.48663984709691],"龙山镇":[116.30639884786606,33.57942013010027],"公吉寺镇":[116.07490847247426,33.44246467469736],"城东街道":[116.24703963599327,33.46059018010764],"城关街道":[116.20559717921415,33.50148607380431],"城西街道":[116.17217426489034,33.49232898358913],"涡北街道":[116.23314347858259,33.55161925421509],"马店集镇":[116.31295772733742,33.65761084386565],"安徽省涡阳工业园区":[116.17980845631007,33.50493810531851]}

亳州市涡阳县行政划分代码

[{"name":"临湖镇","code":"341621115000"},{"name":"丹城镇","code":"341621116000"},{"name":"义门镇","code":"341621113000"},{"name":"店集镇","code":"341621119000"},{"name":"西阳镇","code":"341621103000"},{"name":"新兴镇","code":"341621114000"},{"name":"曹市镇","code":"341621109000"},{"name":"标里镇","code":"341621123000"},{"name":"石弓镇","code":"341621111000"},{"name":"楚店镇","code":"341621105000"},{"name":"涡南镇","code":"341621104000"},{"name":"牌坊镇","code":"341621121000"},{"name":"花沟镇","code":"341621118000"},{"name":"陈大镇","code":"341621120000"},{"name":"单集林场","code":""},{"name":"青町镇","code":""},{"name":"高公镇","code":"341621106000"},{"name":"高炉镇","code":"341621108000"},{"name":"龙山镇","code":"341621112000"},{"name":"公吉寺镇","code":"341621122000"},{"name":"城东街道","code":""},{"name":"城关街道","code":"341621001000"},{"name":"城西街道","code":""},{"name":"涡北街道","code":""},{"name":"马店集镇","code":"341621117000"},{"name":"安徽省涡阳工业园区","code":""}]

说明

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

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

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

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

亳州市涡阳县echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢
echarts亳州市涡阳县geoJson地图根据经纬度显示自定义html弹窗代码演示