可视化大屏 项目中经常需要渲染echarts地图,为了不同城市快速实现,将不同城市的echarts地图效果整理出来,今天为大家整理大连市甘井子区echarts地图和threejs地图效果实例。地图基于geoJson数据绘制。
甘井子区,隶属于辽宁省大连市,是大连市的中心城区,位于大连市区西北部,东北与金州区接壤,南与沙河口区为邻,西南与旅顺口区毗邻。东、南临黄海,北濒渤海,总面积502平方千米。截至2021年10月31日,甘井子区下辖15个街道,另设有1个农场,常住人口1534722人。
echarts大连市甘井子区geoJson地图区域闪烁
echarts地图有时候为了突出某一块区域的重要性,会进行两个颜色的交替变化来告诉用户这一块需要重点关注,我们可以通过echarts的dispatchAction来实现我们想要的效果.
echarts大连市甘井子区geoJson地图地图下钻展示
地图下钻展示,点击地图后,只显示当前选中的区域,可点击返回显示全部地图.
echarts大连市甘井子区geoJson地图添加柱状图
echarts地图渲染时,为了让地图上的数据有一个对比的效果,会在地图上标注柱状图,以便于更直观的看出各个区域的数值.
threejs大连市甘井子区geoJson地图3d地图红色描边闪烁警报
通过threejs绘制3d地图使用outlinePass 实现发光描边闪烁效果 以实现警报功能,如果想系统的学习threejs的话,可以观看threejs视频 3D可视化Three.js视频教程
threejs大连市甘井子区geoJson地图3d地图CSS2D外加旋转棱锥
通过threejs绘制3d地图CSS2D外加旋转棱锥效果
threejs大连市甘井子区geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图
大连市甘井子区 下辖有 南关岭街道,营城子街道,凌水街道,泡崖街道,周水子街道,大连华侨果树农场,泉水街道,机场街道,兴华街道,中华路街道,甘井子街道,红旗街道,大连湾街道,椒金山街道,辛寨子街道,革镇堡街道
大连市甘井子区下辖区域坐标
{"南关岭街道":[121.58826339175071,39.02537511292858],"营城子街道":[],"凌水街道":[],"泡崖街道":[121.54075191258153,38.98414260603734],"周水子街道":[121.57866558670439,38.95403807378185],"大连华侨果树农场":[],"泉水街道":[121.61340690834564,39.00503018442797],"机场街道":[121.54015986671416,38.9548061841501],"兴华街道":[121.57308182238256,38.97556649075346],"中华路街道":[121.579062714835,38.99394462980563],"甘井子街道":[121.63150479612011,38.97515397376542],"红旗街道":[121.46005451416595,38.91156539447709],"大连湾街道":[121.6715122074568,39.05864071520227],"椒金山街道":[121.59926519358581,38.97176820447858],"辛寨子街道":[121.4835530287918,38.96933530077183],"革镇堡街道":[121.52830947188338,39.03371471698064]}
大连市甘井子区行政划分代码
[{"name":"南关岭街道","code":"210211006000"},{"name":"营城子街道","code":"210211020000"},{"name":"凌水街道","code":"210211016000"},{"name":"泡崖街道","code":"210211007000"},{"name":"周水子街道","code":"210211001000"},{"name":"大连华侨果树农场","code":"210211400000"},{"name":"泉水街道","code":"210211018000"},{"name":"机场街道","code":"210211010000"},{"name":"兴华街道","code":""},{"name":"中华路街道","code":"210211008000"},{"name":"甘井子街道","code":"210211004000"},{"name":"红旗街道","code":"210211015000"},{"name":"大连湾街道","code":"210211017000"},{"name":"椒金山街道","code":"210211002000"},{"name":"辛寨子街道","code":"210211014000"},{"name":"革镇堡街道","code":"210211019000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规,本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据,属性齐全,各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。