数据可视化大屏 项目中经常会遇到需要渲染echarts地图的情况,为了方便不同城市快速实现效果,将不同城市的echarts地图效果整理出来,供大家参考,今天为大家整理的是杭州市临安区echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
echarts杭州市临安区geoJson地图自定义引导线
echarts地图渲染中,会遇到多个地名凑到一块导致名称重叠的情况,这时候我们可以通过一条线指向对应的位置并通过label来进行标注的效果.
echarts杭州市临安区geoJson地图飞线图
echarts飞线图实例,可以根据自己的需要配置飞线的颜色大小以及方向
echarts杭州市临安区geoJson地图局部颜色渐变
echarts地图渲染,通过echarts.graphic.LinearGradient线性渐变来实现地图区域颜色的渐变效果
threejs杭州市临安区geoJson地图3d地图CSS2D外加旋转棱锥
通过threejs绘制3d地图CSS2D外加旋转棱锥效果,如果想系统的学习threejs的话,可以观看threejs视频教程 WebGL/Three.js前端3D可视化教程
threejs杭州市临安区geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果
threejs杭州市临安区geoJson地图3d地图
通过threejs绘制的3d地图实例 vue3 threejs 在vue3项目中绘制3d地图效果实例
杭州市临安区 下辖有 锦北街道,锦南街道,锦城街道,青山湖街道,清凉峰镇,玲珑街道,太阳镇,岛石镇,於潜镇,昌化镇,板桥镇,河桥镇,湍口镇,潜川镇,高虹镇,龙岗镇,天目山镇,太湖源镇
杭州市临安区下辖区域坐标
{"锦北街道":[119.717730357383,30.27326133051481],"锦南街道":[119.7100601921698,30.17455978677251],"锦城街道":[119.67776615219242,30.23943101926546],"青山湖街道":[119.77217626218271,30.30174295318266],"清凉峰镇":[118.96559728934233,30.10393561574561],"玲珑街道":[119.62726285866452,30.18570717242406],"太阳镇":[119.28888454617149,30.23234637091841],"岛石镇":[118.94098512264978,30.2859996665591],"於潜镇":[119.38659674254413,30.23077293721607],"昌化镇":[119.19223318643508,30.21238506878224],"板桥镇":[119.75386072880059,30.15541946158277],"河桥镇":[119.15667429817995,30.10568175903905],"湍口镇":[119.14420376175573,30.00896024164246],"潜川镇":[119.35879690152902,30.07070534097004],"高虹镇":[119.66634926089814,30.36693610165243],"龙岗镇":[119.024433125982,30.22389010495157],"天目山镇":[119.47531286208088,30.27747758292049],"太湖源镇":[119.56581541681467,30.3381681939719]}
杭州市临安区行政划分代码
[{"name":"锦北街道","code":"330112007000"},{"name":"锦南街道","code":"330112005000"},{"name":"锦城街道","code":"330112006000"},{"name":"青山湖街道","code":"330112008000"},{"name":"清凉峰镇","code":"330112112000"},{"name":"玲珑街道","code":"330112002000"},{"name":"太阳镇","code":"330112106000"},{"name":"岛石镇","code":"330112113000"},{"name":"於潜镇","code":"330112104000"},{"name":"昌化镇","code":"330112108000"},{"name":"板桥镇","code":"330112115000"},{"name":"河桥镇","code":"330112109000"},{"name":"湍口镇","code":"330112111000"},{"name":"潜川镇","code":"330112107000"},{"name":"高虹镇","code":"330112102000"},{"name":"龙岗镇","code":"330112117000"},{"name":"天目山镇","code":"330112116000"},{"name":"太湖源镇","code":"330112103000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
4、当前除了包含有关键地区的geoJson地图信息外还包含有28个echarts地图效果,以及13个threejs地图实例效果,限于篇幅不一一展示,可以通过更多echarts和threejs地图效果实例查看