全栈搬砖指北之位置信息可视化之OpenLayers|🏆 技术专题第三期征文

2,652 阅读4分钟

前言

写完的文章连个喷子都没有,有没有大佬指点一下啊。

我们为什么选择OpenLayers?

我们现有业务开始是基于QGIS维护数据然后再导入数据落地,这种方式开始对我们开始的业务是很棒的一个想法,数据采集 数据绘制到数据上线落地看似都没有什么问题,但后面产品中增加了一些业务的延申,这时数据就不再是静态数据信息了,当动态告警等业务的开发和线上异常反馈都无法直观高效的解决问题时,这时使用OpenLayers进行了数据维护模块和可视化测试平台的开发,选择的因素主要是如下点 自有高清瓦片叠加展示,大量数据绘制的性能同时需要不强制依赖外部资源。

关于位置信息场景及可视化的意义

  1. 首先值得肯定的是位置采集都需要在合法的范围内,位置信息系统常见的场景包括手持移动作业应用、宠物电子围栏、 实时 定时定位系统 车联网 物联网等各方面。

    常见场景
    • 在基于点数据上我们常见的业务有:静态资源标注(比如学校 公园 医院等数据)、实时位置展示(比如外卖骑手位置)、定时位置更新(低功耗模块的同步)、运动轨迹分析(健身游泳...)。

    • 在基于线段 多边形数据上我们常见的业务有:路径绘制(配电脑方式的老军工级就又友情出场了,反正就是现有地图测绘方无法或者不允许探测的线路)。

         	​老军工级 刮开可见(██████████████████)			
      
    • 在基于面 多边形的数据上常见的业务有:数据围栏(圈好围栏给狗训练后不栓绳子也不会离家出走了,这个项目有王多鱼投资吗?)、设置区域经过监测。

  1. 针对钢筋的位置可视化傻瓜式介绍

当我们看着的位置信息坐标我们是无法准确解析出地址的,如果通过位置反解析我们可以得到地址,通过数据可视化方案我们可以以视图的方式最直白的方式查看和操作也是正常人最舒适的方案。

位置信息:

原始:116.403119,39.915156 (我在哪里?)

反解析:116.403119,39.915156 (北京故宫)

可视化解析(图 百度坐标拾取系统):

谈谈OpenLayers

OpenLayers是什么?

OpenLayers 是一个开源的JS库,它允许添加图层 各类数据如 点 线段 面等要素数据,允许自定义加载外部在线的地图地图如 百度 高德等也可以加载自发布的地图地图,内部已实现了很多工具及计算方法 如测量相关 图层放大缩小 比例尺等。更多访问OpenLayers 官网

简版层级关系

通过上图我们可以理解为(其中OL中有大量的方法属性不一一列举 图供理解层级关系):

简版层级关系解释
> Map ol.map在同一个容器中只可以实例化一个map对象
   >> 一个Map对象中可以有多个底图(OL Lyaer)
      >>> 我们可以拥有多个矢量图层(Vector Layer)
         >>>> 一个矢量图层对应一个数据图层(Source Vector)
            >>>>> 数据图层图层中对应着一个Feature数组(Features)
               >>>>>> 每个Feature可以拥有点 线 面几种不同的绘制方式还可以设置坐标系 样式等
         >>>> 可以为数据图层做一个全局的Style样式
         >>>> 可以为数据图层设置坐标系
   >> Map只有一个可视区域(View)

快速入门OpenLayers

源码:

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>从入门到放弃</title>  
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" integrity="sha512-D2c/nmSVlwoZk29SLwJK8GkLyCyPuNbZ/vZQL/lNzw+o+yXzsbnJt7lK/iCfdBmgyLRDi0qx27gpE8Zb1C6I7g==" crossorigin="anonymous"/>
</head>  
<body>  
    <div id="map"></div>
</body>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js" integrity="sha512-O7kHS9ooekX8EveiC94z9xSvD/4xt10Qigl6uEKvspYykdux3Ci5QNu5fwi4ca0ZkZI/oCgx5ja8RklWUEqzxQ==" crossorigin="anonymous"></script>
<script type="text/javascript">  
	const map = new ol.Map({  //map是主入口 万物起始
		target: 'map',//加载到id为map的div中
		layers: [//layer可以有多个 可以用于卫星图 路图切换等
		  new ol.layer.Tile({
            //加载google影像图层  XYZ是瓦片 ol.source支持多种格式
			source: new ol.source.XYZ({
                //google影像地址
				url:'http://mt0.google.cn/maps/vt?lyrs=s@773&gl=cn&n=ostn&x={x}&y={y}&z={z}' 
			}),
		  })
		],
		view: new ol.View({//设置可视区域
			center: [116.403119,39.915156], //可视区域中心点
			projection: 'EPSG:4326',   //投影坐标系 
			zoom: 15 //初始显示级别
		})
	});
    </script>
</html>

效果图:

案例:简单实现一个房产分布情况(都别叫醒我)

<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>从入门到放弃</title>  
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" integrity="sha512-D2c/nmSVlwoZk29SLwJK8GkLyCyPuNbZ/vZQL/lNzw+o+yXzsbnJt7lK/iCfdBmgyLRDi0qx27gpE8Zb1C6I7g==" crossorigin="anonymous"/>
</head>
  
<body>
  <div id="map"></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js" integrity="sha512-O7kHS9ooekX8EveiC94z9xSvD/4xt10Qigl6uEKvspYykdux3Ci5QNu5fwi4ca0ZkZI/oCgx5ja8RklWUEqzxQ==" crossorigin="anonymous"></script>

<script>
    const EPSG = "EPSG:4326";
    var center = [116.403119,39.915156];

    const map = new ol.Map({  //map是主入口 万物起始
        target: 'map',//加载到id为map的div中
        layers: [//layer可以有多个 可以用于卫星图 路图切换等
            new ol.layer.Tile({
                //加载google影像图层  XYZ是瓦片 ol.source支持多种格式
                source: new ol.source.XYZ({
                    //google影像地址
                    url:'http://mt0.google.cn/maps/vt?lyrs=s@773&gl=cn&n=ostn&x={x}&y={y}&z={z}'
                }),
            })
        ],
        view: new ol.View({//设置可视区域
            center: center, //可视区域中心点
            projection: 'EPSG:4326',   //投影坐标系
            zoom: 15 //初始显示级别
        })
    });

    let vectorSource = new ol.source.Vector({});

    let json = '[{"name":"房子A","lon":"116.4031","lat":"39.915156"},{"name":"房子B","lon":"116.4032","lat":"39.915156"},{"name":"房子C","lon":"116.4033","lat":"39.915156"},{"name":"房子D","lon":"116.4034","lat":"39.915156"},{"nam":"房子E","lon":"116.4035","lat":"39.915156"},{"name":"房子F","lon":"116.4036","lat":"39.915156"},{"name":"房子G","lon":"116.4037","lat":"39.915156"}]';
    let homes = eval(json);

    //房子样式Style
    var style = new ol.style.Style({
        image: new ol.style.Icon({//设置图片
            src: 'https://icons16x16.com/static/rn_012104_085803-1ac6f677ff8586d25255626644f6fb80.gif'  //图标的URL
        })
    });

    for(var i in homes){
        //设置点要素
        let feature = new ol.Feature({
            geometry: new ol.geom.Point([homes[i].lon,homes[i].lat]), //设置经纬度点

  });
        feature.setStyle(style);
        vectorSource.addFeature(feature);
    }

    let vectorLayer = new ol.layer.Vector({
        source: vectorSource
    });

    map.addLayer(vectorLayer);

    </script>
</html>

效果图:

总结

在了解了整体结构后再学习的时候其实没有那么复杂 官方的示例和API文档写的都很好,只是不注意不细心会有很多小坑,总结就是会写容易写好不易,勤奋就是登顶的唯一路径

🏆 技术专题第三期 | 数据可视化的那些事......