随着开发 可视化数据大屏 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理眉山市东坡区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
echarts眉山市东坡区geoJson地图区域闪烁
echarts地图有时候为了突出某一块区域的重要性,会进行两个颜色的交替变化来告诉用户这一块需要重点关注,我们可以通过echarts的dispatchAction来实现我们想要的效果.
echarts眉山市东坡区geoJson地图点击弹出自定义弹窗
我们可以通过scatter来设置自定义样式,但是这种自定义局限性很大,如果要求的样式很复杂的话,scatter就不能很好的实现了,所以我们可以通过鼠标点击获取横纵坐标,然后通过css来定位到对应的位置.
echarts眉山市东坡区geoJson地图全局颜色渐变
echarts地图渲染时,除了局部区域渐变外也会遇到整个地图的颜色渐变效果,我们可以通过areaColor的linear-gradient来实现我们想要的效果
threejs眉山市东坡区geoJson地图3d地图
通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例,如果对threejs感兴趣，可以观看threejs视频 WebGL 3D可视化教程
threejs眉山市东坡区geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例，CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名
threejs眉山市东坡区geoJson地图3d地图CSS2D外加旋转棱锥
通过threejs绘制3d地图CSS2D外加旋转棱锥效果
眉山市东坡区 下辖有 苏祠街道,永寿镇,白马镇,盘鳌乡,土地乡,复兴乡,复盛乡,多悦镇,太和镇,富牛镇,尚义镇,崇仁镇,崇礼镇,广济乡,思蒙镇,悦兴镇,松江镇,柳圣乡,通惠街道,大石桥街道,秦家镇,象耳镇,万胜镇,三苏乡,金花乡,修文镇
眉山市东坡区下辖区域坐标
{"苏祠街道":[103.84979969284478,30.04405524160897],"永寿镇":[103.84184956041065,29.95387223998967],"白马镇":[103.72961982682654,30.06091529156981],"盘鳌乡":[103.5957446411769,30.1684021364566],"土地乡":[103.92659479821644,30.13083465650602],"复兴乡":[103.87269114046092,29.94361727025827],"复盛乡":[103.94254513950547,30.03302214504036],"多悦镇":[103.71969608705683,30.20238429543141],"太和镇":[103.86337717864453,30.12915391199396],"富牛镇":[103.92826351176572,30.07694850722012],"尚义镇":[103.75297703542994,30.10485000291069],"崇仁镇":[103.65142823135596,29.94105999551183],"崇礼镇":[103.87815931721312,30.02078832114909],"广济乡":[103.54415485239723,30.07091621096991],"思蒙镇":[103.7482762071139,29.92694744031344],"悦兴镇":[103.80030241072997,30.13712925324801],"松江镇":[103.78817570686553,29.97800964810419],"柳圣乡":[103.92455881818799,29.92062380994068],"通惠街道":[103.81385482883431,30.05049789172172],"大石桥街道":[103.85535447160856,30.07650335698757],"秦家镇":[103.66520294087128,30.14616841255948],"象耳镇":[103.7758766976373,30.03902204372049],"万胜镇":[103.58176431079642,30.10819079962806],"三苏乡":[103.61447767361747,30.00856141161244],"金花乡":[103.92485468290761,29.97040624476023],"修文镇":[103.69087967649038,30.00591640690931]}
眉山市东坡区行政划分代码
[{"name":"苏祠街道","code":"511402003000"},{"name":"永寿镇","code":"511402115000"},{"name":"白马镇","code":""},{"name":"盘鳌乡","code":""},{"name":"土地乡","code":""},{"name":"复兴乡","code":""},{"name":"复盛乡","code":""},{"name":"多悦镇","code":"511402105000"},{"name":"太和镇","code":"511402102000"},{"name":"富牛镇","code":"511402114000"},{"name":"尚义镇","code":"511402104000"},{"name":"崇仁镇","code":""},{"name":"崇礼镇","code":"511402113000"},{"name":"广济乡","code":""},{"name":"思蒙镇","code":"511402109000"},{"name":"悦兴镇","code":""},{"name":"松江镇","code":"511402112000"},{"name":"柳圣乡","code":""},{"name":"通惠街道","code":"511402001000"},{"name":"大石桥街道","code":"511402002000"},{"name":"秦家镇","code":"511402106000"},{"name":"象耳镇","code":""},{"name":"万胜镇","code":"511402107000"},{"name":"三苏乡","code":""},{"name":"金花乡","code":""},{"name":"修文镇","code":"511402110000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
