可视化大屏 项目中会有渲染地图的需要,除了百度地图以及高德地图外，也会需要echarts或者threejs效果的地图,今天为大家整理鞍山市铁东区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
铁东区是鞍山市城市辖区之一，位于辽宁省中部，因地处于长大铁路以东而得名，是鞍山市的政治、经济、文化中心。
echarts鞍山市铁东区geoJson地图圆形波纹状气泡图
echarts地图渲染时,会通过effectScatter实现一个圆形外加波纹扩散效果的气泡来使页面看起来更酷炫.
echarts鞍山市铁东区geoJson地图全局颜色渐变
echarts地图渲染时,除了局部区域渐变外也会遇到整个地图的颜色渐变效果,我们可以通过areaColor的linear-gradient来实现我们想要的效果
echarts鞍山市铁东区geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
threejs鞍山市铁东区geoJson地图3d地图CSS3D标签
通过threejs绘制的3d地图CSS3D标签实例，CSS3D不面向摄像机，跟随场景缩放,可以通过rotateY调整角度,通过scale调整大小 Vue3 threejs 在3d地图中绘制css3d标签标注省份,如果想系统的学习threejs的话，可以观看threejs视频 WebGL前端3D可视化教程
threejs鞍山市铁东区geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果
threejs鞍山市铁东区geoJson地图3d地图自定义贴图加CSS3D标签
通过threejs绘制3d地图并添加CSS3D标签和自定义贴图
鞍山市铁东区 下辖有 湖南街道,钢城街道,长甸街道,解放街道,山南街道,和平街道,园林街道,对炉街道,常青街道,东长甸街道,大孤山街道,玉佛山风景区,胜利街道,新兴街道,旧堡街道,温泉街道,站前街道
鞍山市铁东区下辖区域坐标
{"湖南街道":[123.00552211354928,41.08681927861274],"钢城街道":[122.99032759380819,41.12037024089157],"长甸街道":[122.97609901572949,41.08259824664921],"解放街道":[122.97859952770148,41.08827706973709],"山南街道":[122.97978724017284,41.09755091046341],"和平街道":[123.00629047364782,41.11518956661207],"园林街道":[123.00508972243716,41.10121478417948],"对炉街道":[123.00251180770908,41.12502559789905],"常青街道":[122.99486806794056,41.0909866539231],"东长甸街道":[122.99420419031972,41.07802568833004],"大孤山街道":[],"玉佛山风景区":[123.01299356846306,41.10497849111833],"胜利街道":[122.98679442449907,41.10678628956781],"新兴街道":[123.00766250122368,41.0793682817812],"旧堡街道":[],"温泉街道":[123.12897622366546,41.02188292465107],"站前街道":[122.98721393184316,41.11323582741264]}
鞍山市铁东区行政划分代码
[{"name":"湖南街道","code":"210302011000"},{"name":"钢城街道","code":""},{"name":"长甸街道","code":"210302017000"},{"name":"解放街道","code":"210302002000"},{"name":"山南街道","code":"210302003000"},{"name":"和平街道","code":"210302008000"},{"name":"园林街道","code":"210302004000"},{"name":"对炉街道","code":""},{"name":"常青街道","code":""},{"name":"东长甸街道","code":""},{"name":"大孤山街道","code":"210302015000"},{"name":"玉佛山风景区","code":"210302400000"},{"name":"胜利街道","code":""},{"name":"新兴街道","code":"210302013000"},{"name":"旧堡街道","code":"210302014000"},{"name":"温泉街道","code":""},{"name":"站前街道","code":"210302006000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
