随着开发 可视化数据大屏 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理大连市旅顺口区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
旅顺口区,隶属辽宁省大连市。位于辽东半岛最南端,东临黄海、西濒渤海,南与山东半岛隔海相望,北依大连旧市区,距离32公里。旅顺口区陆地南北纵距26.1公里,东西横距31.2公里,总面积506.8平方公里,海岸线长169.7公里。根据第七次人口普查数据,截至2020年11月1日零时,旅顺口区常住人口355427人。
echarts大连市旅顺口区geoJson地图局部颜色渐变
echarts地图渲染,通过echarts.graphic.LinearGradient线性渐变来实现地图区域颜色的渐变效果
echarts大连市旅顺口区geoJson地图迁徙图
echarts迁徙图实例,可以根据自己的需要配置飞线的颜色大小以及方向
echarts大连市旅顺口区geoJson地图热力图
echarts通过heatmap实现热力图效果
threejs大连市旅顺口区geoJson地图3d地图指定区域闪烁
通过threejs绘制3d地图并让指定区域闪烁,如果想系统的学习threejs的话,可以观看threejs视频 Three.js前端3D可视化
threejs大连市旅顺口区geoJson地图3d地图鼠标移入显示标签并高亮
通过threejs绘制的3d地图鼠标移入显示标签并高亮
threejs大连市旅顺口区geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例,CSS3D不面向摄像机,跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小 Vue3 threejs 在3d地图中绘制css3d标签标注省份
大连市旅顺口区 下辖有 铁山街道,光荣街道,北海街道,市场街道,得胜街道,登峰街道,龙头街道,三涧堡街道,双岛湾街道,大连奶牛场,龙王塘街道,旅顺经济开发区,长城街道,龙头分园,水师营街道
大连市旅顺口区下辖区域坐标
{"铁山街道":[121.17392361114025,38.77053449573487],"光荣街道":[121.2197684048322,38.8095057940943],"北海街道":[121.17524500784953,38.92035876553426],"市场街道":[121.27430884289424,38.81234993110618],"得胜街道":[121.26698220038602,38.80401625061535],"登峰街道":[121.27015024975827,38.82560652859441],"龙头街道":[121.30975386410587,38.8397267537391],"三涧堡街道":[121.25647112794351,38.9248310339114],"双岛湾街道":[],"大连奶牛场":[121.35753527125877,38.87511960716628],"龙王塘街道":[121.4089490076505,38.85608124762766],"旅顺经济开发区":[],"长城街道":[121.3206985818802,38.91747287049261],"龙头分园":[121.29038328412625,38.84187567573547],"水师营街道":[121.23766996405887,38.85415798185788]}
大连市旅顺口区行政划分代码
[{"name":"铁山街道","code":"210212007000"},{"name":"光荣街道","code":""},{"name":"北海街道","code":""},{"name":"市场街道","code":""},{"name":"得胜街道","code":"210212003000"},{"name":"登峰街道","code":"210212001000"},{"name":"龙头街道","code":"210212012000"},{"name":"三涧堡街道","code":"210212010000"},{"name":"双岛湾街道","code":"210212009000"},{"name":"大连奶牛场","code":"210212401000"},{"name":"龙王塘街道","code":"210212006000"},{"name":"旅顺经济开发区","code":"210212400000"},{"name":"长城街道","code":"210212011000"},{"name":"龙头分园","code":"210212402000"},{"name":"水师营街道","code":"210212005000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。