可视化数据大屏 项目中经常需要渲染echarts地图,为了不同城市快速实现,将不同城市的echarts地图效果整理出来,今天为大家整理榆林市府谷县echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
府谷县,隶属陕西省榆林市。位于陕西省最北端,地处秦、晋、蒙接壤地带,与山西省河曲县、保德县隔河相望,北与内蒙古自治区准格尔旗、伊金霍洛旗接壤,西南与神木市毗邻,素有“鸡鸣闻三省”之称。全县总面积3229平方千米。根据第七次人口普查数据,截至2020年11月1日零时,府谷县常住人口为255397人。
echarts榆林市府谷县geoJson地图定义颜色
echarts地图通过visualMap来事先设置好数据区间,根据区间来来显示地图的颜色,这里的visualMap数据是随机生成的,可以通过实例代码根据自己的需要配置颜色和数据区间.
echarts榆林市府谷县geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts榆林市府谷县geoJson地图点击地图插小旗
echarts地图渲染点击地图显示自定义效果实例,效果类似点击插小旗的效果,通过scatter实现.
threejs榆林市府谷县geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例,CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名,如果想系统的学习threejs的话,可以观看threejs教程视频 WebGL/Three.js前端高薪3D可视化
threejs榆林市府谷县geoJson地图3d地图
通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例
threejs榆林市府谷县geoJson地图3d地图添加金色效果
通过threejs绘制3d地图使用outlinePass实现金色描边效果,并通过edgeStrength增加强度,让描边更清晰
榆林市府谷县 下辖有 木瓜镇,清水镇,黄甫镇,三道沟镇,大昌汗镇,庙沟门镇,武家庄镇,田家寨镇,老高川镇,哈镇,麻镇,古城镇,孤山镇,府谷镇,新民镇
榆林市府谷县下辖区域坐标
{"木瓜镇":[110.93147908911963,39.20623512116381],"清水镇":[111.04752590741235,39.21928429112401],"黄甫镇":[111.14325742854854,39.27559844332778],"三道沟镇":[110.71009907766327,39.17514721018556],"大昌汗镇":[110.48105641948726,39.30062560827741],"庙沟门镇":[110.75080050954968,39.28070978884286],"武家庄镇":[110.8806951294712,38.82048181937667],"田家寨镇":[110.75871890237917,38.96789970079158],"老高川镇":[110.52387285194519,39.1786329936539],"哈镇":[110.91130508224961,39.39444755937284],"麻镇":[111.03347795037433,39.37878892768256],"古城镇":[111.03242610303408,39.50934780574288],"孤山镇":[110.9045149316626,39.09645758600099],"府谷镇":[110.99214781355674,38.99894686434045],"新民镇":[110.71823220255868,39.07692072411564]}
榆林市府谷县行政划分代码
[{"name":"木瓜镇","code":"610822113000"},{"name":"清水镇","code":"610822107000"},{"name":"黄甫镇","code":"610822101000"},{"name":"三道沟镇","code":"610822110000"},{"name":"大昌汗镇","code":"610822108000"},{"name":"庙沟门镇","code":"610822104000"},{"name":"武家庄镇","code":"610822112000"},{"name":"田家寨镇","code":"610822114000"},{"name":"老高川镇","code":"610822111000"},{"name":"哈镇","code":"610822103000"},{"name":"麻镇","code":""},{"name":"古城镇","code":"610822109000"},{"name":"孤山镇","code":"610822106000"},{"name":"府谷镇","code":"610822100000"},{"name":"新民镇","code":"610822105000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示