可视化大屏 项目中经常需要渲染echarts地图,为了不同城市快速实现,将不同城市的echarts地图效果整理出来,今天为大家整理呼和浩特市和林格尔县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
和林格尔,隶属 内蒙古自治区 呼和浩特市 。位于内蒙古自治区中部。地理坐标北纬39°58’~40°41’,东经111°26’~112°18’之间,北靠呼和浩特市区、土默特左旗,西连托克托县,南接清水河县,东与凉城县、山西省朔州市右玉县毗邻。面积3436㎞²。下辖4个乡,4个镇、1个园区,县人民政府驻城关镇新民街北党政大楼。根据第七次人口普查数据,截至2020年11月1日零时,和林格尔县常住人口为162476人。
echarts呼和浩特市和林格尔县geoJson地图label样式自定义
echarts通过scatter实例可以配置自己想要的图标,以及label文字的样式效果
echarts呼和浩特市和林格尔县geoJson地图点击地图插小旗
echarts地图渲染点击地图显示自定义效果实例,效果类似点击插小旗的效果,通过scatter实现.
echarts呼和浩特市和林格尔县geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
threejs呼和浩特市和林格尔县geoJson地图3d地图
通过threejs绘制的3d地图实例,如果想系统的学习threejs的话,可以观看threejs课程视频 Three.js前端3D可视化
threejs呼和浩特市和林格尔县geoJson地图3d地图添加金色效果
通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰
threejs呼和浩特市和林格尔县geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果
呼和浩特市和林格尔县 下辖有 巧什营乡,新店子镇,黑老夭乡,城关镇,盛乐镇,大红城乡,盛乐经济工业园区,羊群沟乡,舍必崖乡
呼和浩特市和林格尔县下辖区域坐标
{"巧什营乡":[111.58396063411223,40.49493252169555],"新店子镇":[112.12848354316151,40.23183921793586],"黑老夭乡":[112.12577896937186,40.43648960396681],"城关镇":[111.85746630397244,40.34636482921566],"盛乐镇":[111.79081897073505,40.43304548561055],"大红城乡":[111.75471131747585,40.21660818592697],"盛乐经济工业园区":[111.8135615194385,40.50529590082353],"羊群沟乡":[112.02682330215262,40.0891366264729],"舍必崖乡":[111.61087275024927,40.33285004372856]}
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
中国geoJson实例下载
中国地图geojson
内蒙古自治区地图geojson
呼和浩特市地图geojson