echarts平顶山市新华区geoJson地图自定义引导线效果

echarts yekong 451℃

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

新华区,隶属于河南省平顶山市,位于平顶山市中心城区的中西部,自北沿顺时针方向分别与宝丰县、卫东区、湛河区、鲁山县毗邻,是平顶山市政治、经济、文化、商贸中心,下辖9个街道、1个镇和1个管委会,行政区域总面积67.3平方千米。根据第七次人口普查数据,截至2020年11月1日零时,新华区常住人口336957人。

echarts平顶山市新华区geoJson地图自定义引导线

echarts地图渲染中,会遇到多个地名凑到一块导致名称重叠的情况,这时候我们可以通过一条线指向对应的位置并通过label来进行标注的效果.

echarts平顶山市新华区geoJson地图自定义引导线

echarts平顶山市新华区geoJson地图点击地图获取经纬度

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

echarts平顶山市新华区geoJson地图点击地图获取经纬度

echarts平顶山市新华区geoJson地图热力图

echarts通过heatmap实现热力图效果

echarts平顶山市新华区geoJson地图热力图

threejs平顶山市新华区geoJson地图3d地图添加描边效果

通过threejs绘制3d地图使用outlinePass 实现发光描边效果,如果想系统的学习threejs的话,可以观看threejs教程视频 WebGL前端3D可视化教程

threejs平顶山市新华区geoJson地图3d地图添加描边效果

threejs平顶山市新华区geoJson地图3d地图指定区域闪烁

通过threejs绘制3d地图并让指定区域闪烁,如果想系统的学习threejs的话,可以观看threejs视频课程 Three.js前端3D可视化教程

threejs平顶山市新华区geoJson地图3d地图指定区域闪烁

threejs平顶山市新华区geoJson地图3d地图鼠标移入显示标签并高亮

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

threejs平顶山市新华区geoJson地图3d地图鼠标移入显示标签并高亮

平顶山市新华区下辖有香山管委会,湛河北路街道,滨湖管委会,光明路街道,应滨管委会,新新街街道,西市场街道,西高皇街道,湖滨路街道,焦店镇,滍阳镇,曙光街街道,青石山街道,中兴路街道,矿工路街道

平顶山市新华区下辖区域坐标

{"香山管委会":[113.16384994811379,33.80276933636934],"湛河北路街道":[113.29657951161296,33.73444099369038],"滨湖管委会":[113.16119814885099,33.7333481536745],"光明路街道":[113.28380545108809,33.74623226047981],"应滨管委会":[113.14398996295515,33.77461997018705],"新新街街道":[113.23159529710003,33.78744104151954],"西市场街道":[113.27219319560227,33.77050857876061],"西高皇街道":[113.25541199877561,33.74805023601708],"湖滨路街道":[113.18622289183318,33.77254154157175],"焦店镇":[113.23668360905589,33.78339469013773],"滍阳镇":[113.10225940915153,33.79273570002127],"曙光街街道":[113.28289326306435,33.74074916319317],"青石山街道":[113.19436897275475,33.79211410766582],"中兴路街道":[113.29779783005395,33.74227895625994],"矿工路街道":[113.29474207327587,33.75762976222146]}

说明

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

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

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

平顶山市新华区echarts地图效果实例和threejs地图效果实例下载

相关文件下载地址
此资源需支付 ¥10 后下载
支付宝购买扫右侧红包码购买更优惠,如无法下载请联系微信:17331886870
喜欢 (0)
echarts平顶山市新华区geoJson地图自定义引导线效果