echarts揭阳市揭西县geoJson地图tooltip自定义html实例代码

echarts yekong

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

揭西县,隶属于 广东省 揭阳市 ,位于广东省东部、揭阳市西部、潮汕平原西北部和榕江南河的中上游 。全县总面积约1347平方千米,属亚热带季风气候。截至2019年,揭西县辖1个街道、15个镇和1个乡,县政府驻河婆街道。根据第七次人口普查数据,截至2020年11月1日零时,揭西县常住人口为67.48万人。

echarts揭阳市揭西县geoJson地图tooltip自定义html

echarts tooltip演示自定义,通过toolTip的formatter方法以html+css的方式实现自己想要的样式效果,鼠标移上去就可以看到我们想要的效果了,也可以通过css自定义为自己需要的样式.

echarts揭阳市揭西县geoJson地图tooltip自定义html

echarts揭阳市揭西县geoJson地图飞线图

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

echarts揭阳市揭西县geoJson地图飞线图

echarts揭阳市揭西县geoJson地图自定义引导线

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

echarts揭阳市揭西县geoJson地图自定义引导线

threejs揭阳市揭西县geoJson地图3d地图添加金色效果

通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰,如果对threejs感兴趣,可以观看threejs教程视频 WebGL 3D可视化教程

threejs揭阳市揭西县geoJson地图3d地图添加金色效果

threejs揭阳市揭西县geoJson地图3d地图CSS3D标签

通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小

threejs揭阳市揭西县geoJson地图3d地图CSS3D标签

threejs揭阳市揭西县geoJson地图3d地图鼠标移入显示标签并高亮

通过threejs绘制的3d地图鼠标移入显示标签并高亮,如果对threejs感兴趣,可以观看threejs课程视频 Three.js前端3D可视化

threejs揭阳市揭西县geoJson地图3d地图鼠标移入显示标签并高亮

揭阳市揭西县下辖有钱坑镇,龙潭镇,县苗圃场,上砂镇,东园镇,南山镇,灰寨镇,塔头镇,大溪镇,五云镇,凤江镇,棉湖镇,坪上镇,良田乡,金和镇,五经富镇,京溪园镇,河婆街道,河輋农场,油桐林场,高田农场,北山农林场,果林场

揭阳市揭西县下辖区域坐标

{"钱坑镇":[115.982163898923,23.39501110535857],"龙潭镇":[115.87126427221364,23.48933799188673],"县苗圃场":[116.09214570916848,23.56314774963499],"上砂镇":[115.66368311511604,23.4882389325585],"东园镇":[116.13115302537548,23.50453706161451],"南山镇":[115.93678307129409,23.52650421299958],"灰寨镇":[115.99666740702989,23.47054252051521],"塔头镇":[116.07100393964538,23.48702168095043],"大溪镇":[115.95298299723238,23.43994145732002],"五云镇":[115.74291253874327,23.44310982030993],"凤江镇":[116.09424874584025,23.4350046604475],"棉湖镇":[116.14816786607092,23.4630351237391],"坪上镇":[115.87320239462386,23.37997268603552],"良田乡":[115.86195786359627,23.58702278729763],"金和镇":[116.04851776412332,23.41859736650901],"五经富镇":[116.01354168127128,23.60874000614487],"京溪园镇":[116.04663042730479,23.53287378362232],"河婆街道":[115.81008248456843,23.43623055065897],"河輋农场":[115.81852040007018,23.62901591649234],"油桐林场":[115.78971451720508,23.39119725383568],"高田农场":[115.91077584560955,23.46246305974667],"北山农林场":[115.91755508373964,23.57075230401814],"果林场":[115.96846568495431,23.54430550250911]}

说明

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

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

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

揭阳市揭西县echarts地图效果实例和threejs地图效果实例下载

喜欢