前端之js-openlayers4

1.初识openlayers

 // 创建地图      new ol.Map({            // 设置地图图层            layers: [              // 创建一个使用Open Street Map地图源的瓦片图层              new ol.layer.Tile({source: new ol.source.OSM()})            ],            // 设置显示地图的视图            view: new ol.View({              center: [0, 0],    // 定义地图显示中心于经度0度，纬度0度处              zoom: 2            // 并且定义地图显示层级为2            }),            // 让id为map的div作为地图的容器            target: 'map'            });   地图主要是由layer和view组成，layer可以有多个，view只能有一个。 

2.openlayers 详解

地图所有组成部分：    1.Map(地图)  2.view(视图) 3.图层(Layer) 4.数据源(Source) 5.控件(Control) 6.交互(Interaction)    map地图容器初始化，view控制地图中心位置，范围，层级,layer可以有多个图层，互不干扰，    source数据源与图层一一对应密不可分，可以是静态图或者瓦片图；也可以是栅格化的或者矢量，    control处于地图的最上层,用于操控地图，例如放大缩小，交互(Interaction)用于用户与地图间的交互操作

3.openlayers常用方法

ol.proj.transform 坐标转换 ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857')就能把EPSG:4326的坐标[104.06, 30.67]转换为EPSG:3857的坐标。这里涉及坐标系与投影的概念，这里简单介绍一下，OpenLayers 3支持两种投影，一个是EPSG:4326，等同于WGS84坐标系，另一个是EPSG:3857，等同于900913，由Mercator投影而来，经常用于web地图，一个是全球通用的，一个是web地图专用的，OpenLayers默认使用的是EPSG:3857，如果需要使用4326 ol.view.projection 来设置setZoom 设置缩放级别getView 获取视图getCenter setCenter 设置获取中心点ol.Coordinate 获取坐标ol.map.view.extent: [102, 29, 104, 31]  类型为：[minX, minY, maxX, maxY] 限定地图范围minZoom: 10  设置最小缩小级别maxZoom: 14  设置最大放大级别

3.深入了解openlayers

Source和Layer是一对一的关系，有一个Source，必然需要一个Layer，然后把这个Layer添加到Map上,归纳起来共三种：ol.source.Tile(瓦片数据源)，ol.source.Image(一整张图)和ol.source.Vector(矢量地图源),点，线，面等等常用的地图元素(Feature)都包含在Vector中，代码如下new ol.layer.Vector({                source: new ol.source.Vector({                    url: '../data/geojson/line-samples.geojson',     // 地图来源                    format: new ol.format.GeoJSON()    // 解析矢量地图的格式化类                })            }) 设置样式style: new ol.style.Style({            stroke: new ol.style.Stroke({                color: 'red',                size: 1            })        })添加圆var circle = new ol.Feature({      geometry: new ol.geom.Point([0, 0])  });overlayer 覆盖物，一般为图片var anchor = new ol.Overlay({//定义覆盖物    element: document.getElementById('anchor')  });anchor.setPosition([104, 30]);//设置位置map.addOverlay(anchor);//添加到地图上draw 标注点，往往与Interaction一起使用补充：瓦片就是渲染后的图片，按照一定的规则结合比例尺切成小的图片，一种是栅格地图瓦片，一种是矢量地图瓦片。openlayer 属于前者，**栅格地图瓦片**，**优点**：显示效率高，方便传输，**缺点**:占用服务器空间,无法完成像旋转，伪三维等交互显示功能,数据保密性差，死板，**矢量地图瓦片**，**优点**：极少占用服务器空间，可以实现有效的地图交互显示功能，可以形成丰富的配色，对于Cartographic，数据保密性强，灵活。 **缺点**：技术成熟度较差，以前的资源不通用