随着开发 可视化数据大屏 项目越来越多,对地图的需求也各不相同,除了百度地图和高德地图外还会遇到echarts和threejs的需要,对地图的效果以及城市也各不相同,今天为大家整理吕梁市离石区echarts地图和threejs地图效果实例供大家参考。地图基于geoJson数据绘制。
离石区，隶属于 山西省 吕梁市，地处山西省西部，吕梁山脉中段西侧，地理坐标北纬37°21′——37°42′，东经110°55′——111°35′，自北部顺时针方向分别与方山县、交城县、文水县、汾阳市、中阳县、柳林县、临县等七县市相邻，处于整个吕梁市的地理中心，是吕梁市政府驻地，吕梁市政治、文化和交通中心，同时离石区扼秦晋交通要冲，是华北通向西部的重要中枢。
echarts吕梁市离石区geoJson地图阴影
echarts地图阴影效果实例,通过shadowColor控制阴影的颜色,通过shadowBlur控制范围,通过shadowOffsetX和shadowOffsetY控制偏移.
echarts吕梁市离石区geoJson地图根据经纬度显示自定义html弹窗
echarts地图我们可以通过像素坐标来将我们自定义的html弹窗定位到echarts地图指定位置,如果是固定的宽高的话,这没什么问题直接定位就可以了,如果是自适应宽高的地图我们可能没办法控制精度,我们可以使用经纬度来控制,当echarts地图渲染完成以后,我们可以通过convertToPixel将经纬度转为像素坐标,然后再渲染自定义弹窗,这样精度就比较准确了,而且也不会因为窗体宽高变化而导致弹窗出现偏移.
echarts吕梁市离石区geoJson地图区域闪烁
echarts地图有时候为了突出某一块区域的重要性,会进行两个颜色的交替变化来告诉用户这一块需要重点关注,我们可以通过echarts的dispatchAction来实现我们想要的效果.
threejs吕梁市离石区geoJson地图3d地图自定义贴图加CSS2D标签
通过threejs绘制3d地图并添加CSS2D标签和自定义贴图,如果想系统的学习threejs的话，可以观看threejs视频课程 WebGL 3D可视化教程
threejs吕梁市离石区geoJson地图3d地图添加描边效果
通过threejs绘制3d地图使用outlinePass 实现发光描边效果
threejs吕梁市离石区geoJson地图3d地图红色描边闪烁警报
通过threejs绘制3d地图使用outlinePass 实现发光描边闪烁效果 以实现警报功能
吕梁市离石区 下辖有 红眼川乡,信义镇,吴城镇,坪头乡,枣林乡,交口街道,凤山街道,城北街道,滨河街道,田家会街道,西属巴街道,莲花池街道,红眼川乡,信义镇,吴城镇,坪头乡,枣林乡,交口街道,凤山街道,城北街道,滨河街道,田家会街道,西属巴街道,莲花池街道
吕梁市离石区下辖区域坐标
{"红眼川乡":[111.20464459309733,37.48530950986093],"信义镇":[111.3892991728989,37.60861133606329],"吴城镇":[111.42537073825913,37.44678011082333],"坪头乡":[111.00885127035352,37.68106805876168],"枣林乡":[111.02257068457537,37.59140944911449],"交口街道":[111.07084609675698,37.51157321702384],"凤山街道":[111.12318851240104,37.53806159792292],"城北街道":[111.14768757619575,37.58171743796968],"滨河街道":[111.16879829438867,37.50968665094081],"田家会街道":[111.22821756926778,37.53108829928914],"西属巴街道":[111.13095763037903,37.60779968704162],"莲花池街道":[111.14519071689652,37.49165359085356]}
吕梁市离石区行政划分代码
[{"name":"红眼川乡","code":""},{"name":"信义镇","code":"141102101000"},{"name":"吴城镇","code":"141102100000"},{"name":"坪头乡","code":"141102202000"},{"name":"枣林乡","code":"141102201000"},{"name":"交口街道","code":"141102006000"},{"name":"凤山街道","code":"141102002000"},{"name":"城北街道","code":"141102004000"},{"name":"滨河街道","code":"141102001000"},{"name":"田家会街道","code":"141102005000"},{"name":"西属巴街道","code":"141102007000"},{"name":"莲花池街道","code":"141102003000"}]
说明
1、根据《地图审核管理规定》、《互联网地图服务专业标准》等法规，本地图不作为境界线勘界等用处。使用中请查阅《中华人民共和国地图编制出版管理条例》、各地地图编制出版管理办法等地图规定按程序应用。
2、本数据是目前市面上较齐全、精度较高的数据，属性齐全，各大高校科研均在用此数据。
3、本数据仅用于echarts threejs地图效果展示。
