随着开发 大屏数据可视化 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理遵义市播州区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
echarts遵义市播州区geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts遵义市播州区geoJson地图label样式自定义
echarts通过scatter实例可以配置自己想要的图标,以及label文字的样式效果
echarts遵义市播州区geoJson地图3d地图实例旋转动画
使用的是echarts-gl结合echarts实现的3d地图效果实例
threejs遵义市播州区geoJson地图3d地图添加金色效果
通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰,如果想系统的学习threejs的话，可以观看threejs教程视频 WebGL前端3D可视化教程
threejs遵义市播州区geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮
threejs遵义市播州区geoJson地图3d地图指定区域闪烁
通过threejs绘制3d地图并让指定区域闪烁
遵义市播州区 下辖有 枫香镇,三合镇,三岔镇,乌江镇,乐山镇,新民镇,泮水镇,石板镇,茅栗镇,西坪镇,铁厂镇,马蹄镇,鸭溪镇,龙坑镇,洪关苗族乡,龙坪镇,平正仡佬族乡,南白镇,团溪镇,尚嵇镇,苟江镇
遵义市播州区下辖区域坐标
{"枫香镇":[106.53352917221372,27.63403672509224],"三合镇":[106.77846470606246,27.40215362635946],"三岔镇":[106.95906206519226,27.49746944871332],"乌江镇":[106.76378931616682,27.28698061920792],"乐山镇":[106.66608003684644,27.65904704259339],"新民镇":[106.89182901244595,27.32970951357553],"泮水镇":[106.39643339653756,27.52974834958004],"石板镇":[106.70850231348284,27.51688436397972],"茅栗镇":[107.06659115708638,27.38401567819618],"西坪镇":[107.19360067433918,27.54864284979959],"铁厂镇":[107.20666622763548,27.43307121146489],"马蹄镇":[106.4970256801266,27.53378290385416],"鸭溪镇":[106.68563170780762,27.57389219535469],"龙坑镇":[106.83027813482286,27.59503028990429],"洪关苗族乡":[106.38872440031176,27.60240663882073],"龙坪镇":[107.00454418816962,27.55440579914417],"平正仡佬族乡":[106.51819195350157,27.73915963089985],"南白镇":[106.82265393389567,27.52394726059676],"团溪镇":[107.09292807590035,27.4708916854641],"尚嵇镇":[106.95738976931477,27.38677537857751],"苟江镇":[106.85440929059419,27.44444254241336]}
遵义市播州区行政划分代码
[{"name":"枫香镇","code":"520304116000"},{"name":"三合镇","code":"520304104000"},{"name":"三岔镇","code":"520304102000"},{"name":"乌江镇","code":"520304105000"},{"name":"乐山镇","code":"520304115000"},{"name":"新民镇","code":"520304112000"},{"name":"泮水镇","code":"520304117000"},{"name":"石板镇","code":"520304114000"},{"name":"茅栗镇","code":"520304111000"},{"name":"西坪镇","code":"520304109000"},{"name":"铁厂镇","code":"520304108000"},{"name":"马蹄镇","code":"520304118000"},{"name":"鸭溪镇","code":"520304113000"},{"name":"龙坑镇","code":""},{"name":"洪关苗族乡","code":"520304201000"},{"name":"龙坪镇","code":"520304106000"},{"name":"平正仡佬族乡","code":"520304200000"},{"name":"南白镇","code":""},{"name":"团溪镇","code":"520304107000"},{"name":"尚嵇镇","code":"520304110000"},{"name":"苟江镇","code":"520304103000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
