随着开发 大屏数据可视化 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理盐城市亭湖区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
echarts盐城市亭湖区geoJson地图添加柱状图
echarts地图渲染时,为了让地图上的数据有一个对比的效果,会在地图上标注柱状图,以便于更直观的看出各个区域的数值.
echarts盐城市亭湖区geoJson地图区域闪烁
echarts地图有时候为了突出某一块区域的重要性,会进行两个颜色的交替变化来告诉用户这一块需要重点关注,我们可以通过echarts的dispatchAction来实现我们想要的效果.
echarts盐城市亭湖区geoJson地图自定义引导线
echarts地图渲染中,会遇到多个地名凑到一块导致名称重叠的情况,这时候我们可以通过一条线指向对应的位置并通过label来进行标注的效果.
threejs盐城市亭湖区geoJson地图3d地图css2d标签
通过threejs绘制的3d地图css2d标签实例，CSS2D面向摄像机,不随场景缩放而缩放 vue3 threejs实现在3d地图中绘制css2d地名,如果对threejs感兴趣，可以观看threejs课程视频 WebGL 3D可视化教程
threejs盐城市亭湖区geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮
threejs盐城市亭湖区geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图
盐城市亭湖区 下辖有 新城街道,亭湖新区,新洋街道,毓龙街道,黄海街道,环保产业园,大洋街道,文峰街道,便仓镇,黄尖镇,南洋镇,新兴镇,步凤镇,盐东镇,伍佑街道,先锋街道,五星街道,新河街道
盐城市亭湖区下辖区域坐标
{"新城街道":[120.25449862493439,33.36365725011948],"亭湖新区":[120.21042409280511,33.40892785983716],"新洋街道":[120.10608334144362,33.42584657100797],"毓龙街道":[120.13532942618548,33.39918458347631],"黄海街道":[120.15123203046626,33.36640276646612],"环保产业园":[120.28194844357373,33.44195391168626],"大洋街道":[120.15742623958266,33.39761033242152],"文峰街道":[120.12546492510599,33.37448379659662],"便仓镇":[120.22856757930191,33.22067515576738],"黄尖镇":[120.46373399817696,33.65281048400145],"南洋镇":[120.18839577737029,33.45655219643143],"新兴镇":[120.07231632970662,33.45315684244231],"步凤镇":[120.31912570109995,33.3209594800049],"盐东镇":[120.3664453892089,33.45207218071101],"伍佑街道":[120.21245507193319,33.28319811606114],"先锋街道":[120.10954051145778,33.38351625685046],"五星街道":[120.1492305389592,33.37297796603639],"新河街道":[120.19359372288193,33.35456558111191]}
盐城市亭湖区行政划分代码
[{"name":"新城街道","code":""},{"name":"亭湖新区","code":"320902400000"},{"name":"新洋街道","code":"320902007000"},{"name":"毓龙街道","code":"320902004000"},{"name":"黄海街道","code":"320902051000"},{"name":"环保产业园","code":"320902402000"},{"name":"大洋街道","code":"320902008000"},{"name":"文峰街道","code":"320902002000"},{"name":"便仓镇","code":"320902104000"},{"name":"黄尖镇","code":"320902108000"},{"name":"南洋镇","code":"320902100000"},{"name":"新兴镇","code":"320902102000"},{"name":"步凤镇","code":""},{"name":"盐东镇","code":"320902107000"},{"name":"伍佑街道","code":"320902050000"},{"name":"先锋街道","code":"320902003000"},{"name":"五星街道","code":"320902001000"},{"name":"新河街道","code":"320902052000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看
