openlayer3 入门知识点

简介：

OpenLayers 3简称ol3，它是一个开源的Web GIS引擎，使用了JavaScript、最新的HTML5技术及CSS技术，支持dom，canvas和webgl三种渲染方式。在地图数据源方面，支持各种类型的瓦片地图，既支持在线的，也支持离线的。比如OSM,Bing, MapBox, Stamen,MapQuest等等；还支持各种矢量地图，比如GeoJSON，TopoJSON，KML，GML等等。随着OpenLayers3的进一步发展，将支持更多的地图类型。

组成：

OpenLayers 3地图主要是由layer（图层）和view组成，layer可以有多个，view只能有一个。

大致的组成部分如下图：

简单介绍一下：

ol.Map 是第一个入口
ol.View 控制地图显示的中心位置、范围、层级
ol.layer.Tile 瓦片
ol.layer.Image 图片
ol.layer.Vector 矢量图

创建地图的方式：

1.在页面需要有一个map的容器
2.实例化一个map对象
3.将容器的id绑定到map的target属性中

在React中使用的时候需要安装一下：

npm  install  --save  openlayers

在使用的时候还要引入一下样式

import 'openlayers/css/ol.css';

在react中使用的示例：

 let map = new ol.Map({
            target: 'map',
            layers: [raster, clusters],
            view: new ol.View({
                //设置地图显示的范围
                //extent: [102, 29, 104, 31],
                //设置地图的显示中心
                //center: [105.44257, 28.8717], 
                center: ol.proj.fromLonLat([105.44257, 28.8717]),
                //指定地图投影类型
                projection: 'EPSG:3857',
                //定义地图显示的层级 
                zoom: 12,
            })
        });

<div id="map" className="mapContainer">div>

target中绑定对象这样后期操作会比较方便，例如修改显示样式：

map.getTarget().style.cursor = hit ? 'pointer':''

ol.Map的使用
使用自己的logo:

创建地图的时候，在地图上生成一个openlayer的官方Logo。这个logo是默认显示的，但是可以设置隐藏，也可以自己定制

ol.View的使用
常用来：

定位时设置中心点、查看不同级别地区时、设置地图的缩放级别

获取地图各种值通常用get方法，一些属性值可直接get(‘属性名’)获取 设置值可以用set方法
设置view相关属性之后地图没有改变，可以使用map.render()方法重新渲染地图
另：地图容器宽高发生改变时候，若是地图没有填满容器，可使用map.updateSize()方法

分辨率：

分辨率是屏幕坐标和世界坐标的纽带，通过它，才能知道你在屏幕上用鼠标点击的位置对应于世界地图具体的经纬度位置。
minResolution，图层可见的最小分辨率，当图层的缩放级别小于这个分辨率时，图层就会隐藏；
maxResolution，图层可见的最大分辨率，当图层的缩放级别等于或超过这个分辨率时，图层就会隐藏。
maxResolution是你最模糊级别的切片 的坐标跨度 与 图片像素宽度的比值 比如最模糊级别是全球图片 ，坐标跨度180度，图片尺寸是
512*512,那么这个值就是 180/512.单位为度 如果单位是米，对应换坐标跨度数值就行了（没有太具体认知，这是查资料得到的答案）

知道最大分辨率和缩放级别数（numZoomLevels）目可以直接知道最小和最大的缩放级别

一个相关讲解比较详细的博客

限制地图范围

在实际使用中，往往只关心某一个区域的地图，而无需显示整个地球的地图，这样可以聚焦于业务，同时可以减少前端和后台的地图数据。
例：extent: [102, 29, 104, 31] 这种方式使用的是EPSG:4326
实现效果：拖拽时地图只能在经度29度到31度，纬度在102到104度之间显示，超过这个范围图层将不可见。

限制地图缩放级别

ol.View的fit函数

   自适配区域

ol.View的fit函数很强大，可以查看API文档，它的第三个参数还可以设置更多的选项，以适应更多的需要。关于更多的使用，参见官网例子Advanced View Positioning。

ol.proj.transform（p1,p2,p3）：
说明：一个用于坐标转换的方法
参数：
p1:ol.Coordinate类型的坐标
p2:当前坐标所用的坐标系
p3:转换后的坐标所用的坐标系
例：
ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857')
把EPSG:4326的坐标[104.06, 30.67]转换为EPSG:3857的坐标

注：ol默认使用的是EPSG:3857坐标

就是使用下面这种方式标明坐标的：

ol.proj.fromLonLat([105.44257, 28.8717])

Source和Layer：

…….