前端之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，数据保密性强，灵活。 **缺点**：技术成熟度较差，以前的资源不通用