OpenLayers学习笔记（一）

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
    }),
    target: 'map'    // 让id为map的div作为地图的容器
});

一个地图要包括图层Layer、显示View和HTML的Dom元素相绑定的target。还有一个重点就是每一个Layer都必须对应一个数据源Source！
target：地图的容器，元素本身或id元素的

单页面多地图的开发

创建两个地图。
直接以上面的方法创建地图，则两个地图之间没有联动。
若想这两个地图之间联动，则需保证是同一个view。（对比分屏的时候用）

// 创建一个视图
var view = new ol.View({
    center: [0, 0],
    zoom: 2
});
new ol.Map({
    layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
    view: view,//除了这，其他地方一样一样的
    target: 'map1'
});

单页面多地图中地图交换的功能，map的setTarget方法指定HTML中的Dom元素

主要就这句：map1.setTarget(‘map2’)

地图的上下左右移动及定位功能

// 设置青岛为地图中心，此处进行坐标转换， 把EPSG:4326的坐标，转换为EPSG:3857坐标，因为ol默认使用的是EPSG:3857坐标
center: ol.proj.transform([120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'),

移动地图

function moveToLeft() {
    var view = map.getView();
    var mapCenter = view.getCenter();
    mapCenter[0] += 50000;// 让地图中心的x值增加，即可使得地图向左移动
    mapCenter[0] -= 50000;// 让地图中心的x值减少，即可使得地图向右移动
    mapCenter[1] -= 50000;// 让地图中心的y值减少，即可使得地图向上移动
    mapCenter[1] += 50000;// 让地图中心的y值增加，即可使得地图向下移动
    view.setCenter(mapCenter);
    map.render();
}

移动至某个位置

function moveToChengDu() {
    var view = map.getView();
    // 设置地图中心为青岛的坐标，即可让地图移动到青岛
    view.setCenter(ol.proj.transform([120.374798,36.07316], 'EPSG:4326', 'EPSG:3857'));
    map.render();
}

这进行了坐标转换，并使用ol.proj.transform方法

第一个参数是ol.Coordinate类型的坐标，第二个参数是当前坐标所用的坐标系，第三个参数是转换后的坐标所用的坐标系，4326是WGS84坐标系，3857是OpenLayers所使用的Web墨卡托投影坐标系

放大缩小地图

function zoomIn() {
    var view = map.getView();
    view.setZoom(view.getZoom() + 1);// 让地图的zoom增加1，从而实现地图放大
    view.setZoom(view.getZoom() - 1);// 让地图的zoom减小1，从而实现地图缩小
}

限制地图范围/限制地图缩放级别

view: new ol.View({
    extent: [120.33944,36.049352, 120.442925,36.126585],// 地图中心范围
    center: [120.374798,36.07316],//  地图中心
    projection: 'EPSG:4326',//  坐标系
    zoom: 10//  级别
    minZoom: 10,// 限制地图缩放最大级别为14，最小级别为10
    maxZoom: 14
}),

除了使用minZoom和maxZoom之外，还可以使用minResolution和maxResolution，一般采用前面那种。

自适配区域

function fitToQingdao() {
    // 让地图最大化完全地显示市南区区域[120.33944,36.049352, 120.442925,36.126585]
    map.getView().fit([120.33944,36.049352, 120.442925,36.126585], map.getSize());
}

中级篇

各种地图的加载

Source和Layer是一对一的关系，有一个Source，必然需要一个Layer，然后把这个Layer添加到Map上，就可以显示出来了。通过官网的API搜索ol.source的Source归纳起来共三种：ol.source.Tile，ol.source.Image和ol.source.Vector。

• ol.source.Tile对应的是瓦片数据源，现在网页地图服务中，绝大多数都是使用的瓦片地图。
• ol.source.Image对应的是一整张图，而不像瓦片那样很多张图，从而无需切片，也可以加载一些地图，适用于一些小场景地图。
• ol.source.Vector对应的是矢量地图源，点，线，面等等常用的地图元素(Feature)。

ol.source.Tile 大致可以分为以下几类：

• 在线服务的Source，
  包括ol.source.BingMaps(使用的是微软提供的Bing在线地图数据)，ol.source.MapQuest(使用的是MapQuest提供的在线地图数据)(注: 由于MapQuest开始收费，ol v3.17.0就移除了ol.source.MapQuest)，ol.source.OSM(使用的是Open Street Map提供的在线地图数据)，ol.source.Stamen(使用的是Stamen提供的在线地图数据)。
• 支持协议标准的Source，包括ol.source.TileArcGISRest，ol.source.TileWMS，ol.source.WMTS，ol.source.UTFGrid，ol.source.TileJSON。如果要使用它们，首先你得先学习对应的协议，之后必须找到支持这些协议的服务器来提供数据源，这些服务器可以是地图服务提供商提供的，也可以是自己搭建的服务器，关键是得支持这些协议。
• ol.source.XYZ，这个需要单独提一下，因为是可以直接使用的，而且现在很多地图服务（在线的，或者自己搭建的服务器）都支持xyz方式的请求。国内在线的地图服务，高德，天地图等，都可以通过这种方式加载，本地离线瓦片地图也可以，用途广泛，且简单易学，需要掌握。

总的来说，就是如果你没有地图服务器，那么你要加载地图就只能调用地图商发布的在线服务，包括在线服务的Source：ol.source.BingMaps,ol.source.OSM等地图；还有一种是ol.source.XYZ格式的在线服务地图，包括国内的一些在线服务地图，高德、百度、天地图等。
如果你有自己的地图服务器，那么你就可以发布地图服务然后在OpenLayers中调用自己发布的服务了，例如我们常见的几种发布的服务：ol.source.TileArcGISRest—ArcGIS发布的服务还有Geoserver发布的服务等等。

在线地图服务的加载

//ArcGIS地图
var esriMapLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      	url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
    	}),//对应的url
    	title:"ESRI影像"
});
//OSM地图
var osmLayer = new ol.layer.Tile({
    source: new ol.source.OSM(),
    title:"OSM影像"
})
//天地图
var tiandituSatelliteLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
      	url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=008a8816d2eee25a677670273eaee891",
      	crossOrigin: "anonymous"
    }),
    title:"天地图影像"
});
//高德地图
var gaodeMapLayer = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url:'http://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}'
    })
});
var map=new ol.Map({
// 在地图上添加上面创建的四个图层，图层顺序自下而上，依次是ESRI地图，OSM地图，天地图和高德地图
    layers: [esriMapLayer, osmLayer, tiandituSatelliteLayer,gaodeMapLayer],
    view: new ol.View({
         center: [120.374,36.073],
         projection: 'EPSG:4326',
         zoom: 10
     }),
     target: 'map'  
  });
map.getView().fit([120.33944,36.049352, 120.442925,36.126585], map.getSize());

esriMapLayer.setVisible(elem.checked);//地图显隐，elem传的参数
if (elem.checked) {//
    esriMapLayer.setZIndex(3); //地图置顶
    osmLayer.setZIndex(osmLayer.getZIndex()-1); //原来位置基础上下移
}

使用地图服务器发布地图

var format = 'image/png';
var bounds = [73.62004852302096,3.8378885148431436,134.7684631352655, 53.553741455004214];
var untiled = new ol.layer.Image({
    source: new ol.source.ImageWMS({
        url: 'http://"你的服务器ip"+/geoserver/airtraffic/wms',
        params: {
            'FORMAT': format,
            'VERSION': '1.1.1',  
            STYLES: '',
            LAYERS: 'airtraffic:china',
        }
    })
});
var tiled = new ol.layer.Tile({
    visible: false,
    source: new ol.source.TileWMS({
        url: 'http://"你的服务器ip"+/geoserver/airtraffic/wms',
        params: {
            'FORMAT': format, 
            'VERSION': '1.1.1',
            tiled: true,
            STYLES: '',
            LAYERS: 'airtraffic:china',
            tilesOrigin: 73.62004852302096 + "," + 3.8378885148431436
       }
    })
});
var projection = new ol.proj.Projection({
    code: 'EPSG:4326',
    units: 'degrees',
});
var map = new ol.Map({
    target: 'map',
    layers: [untiled,tiled],
    view: new ol.View({
        projection: projection
    })
});   
map.getView().fit(bounds, map.getSize());      

两个Layer，一个是Image格式，一个是Tile格式。
ArcGIS 中的Feature TO Json可以将shp文件转化为Json格式；或者通过https://mapshaper.org/进行转换。

//创建地图
var map = new ol.Map({
    layers: [
        // 底图用Open Street Map 地图
        new ol.layer.Tile({source: new ol.source.OSM()}),
        // 再加载一个geojson的矢量地图
        new ol.layer.Vector({
            source: new ol.source.Vector({
            url: 'img/china.json',  // 地图来源
            format: new ol.format.GeoJSON()  // 解析矢量地图的格式化类
        })
    })],
    view: new ol.View({ 
        center: [-72.980624870461128, 48.161307640513321],
        zoom: 8,
        projection: 'EPSG:4326'
    }),
    target: 'map'
    });
map.getView().fit(bounds, map.getSize());

• 加载矢量图使用的source是ol.source.Vector, layer是ol.layer.Vector，不要错误的使用。
• OpenLayers 3内置了对应矢量地图格式的解析类，比如ol.format.GeoJSON， 它们都位于包ol.format下。 如果是shapefile这种不支持的，则需要自己解析。 解析后，矢量地图都会转换为对应于OpenLayer s 3中的feature。当加载完成后，可以通过source的getFeatures方法来获取所有的矢量图形。
• 需要注意坐标系，因为.geojson文档里用的是和当前地图用的不一样的坐标系

对矢量地图的操作

获取features

var vectorLayer = new ol.layer.Vector({
	source: new ol.source.Vector({
	    url: 'img/china.json', // 地图来源
	    format: new ol.format.GeoJSON()
	})
});
// 因为是异步加载，所以要采用事件监听的方式来判定是否加载完成
var listenerKey = vectorLayer.getSource().on('change', function(){
	if (vectorLayer.getSource().getState() === 'ready') {    // 判定是否加载完成
	    document.getElementById('count').innerHTML = vectorLayer.getSource().getFeatures().length;
	}
});
map.addLayer(vectorLayer);
// 如果在此处调用vectorLayer.getSource().getFeatures()是完全有可能获取不到任何Feature的，这是常犯错误(因为方法是异步的)

具体方法

vectorLayer.getSource().getFeatures().length;

注意：因为我们加载json格式的地图数据时是异步加载，所以要采用事件监听的方式来判定是否加载完成，所以需要监听判断是否加载完成。

尝试改变features

var vectorLayer = new ol.layer.Vector({
	source: new ol.source.Vector({
	    url: 'img/china.json', // 地图来源
	    format: new ol.format.GeoJSON()
	}),
	// 设置样式，颜色为红色，线条粗细为1个像素
	style: new ol.style.Style({
	    stroke: new ol.style.Stroke({
	        color: 'red',
	        size: 1
	    })
    })
}); 

这样，绘制的json变了颜色。
这篇就写到这了，下一篇继续编写学习。

参考博文：https://blog.csdn.net/MagicMHD/article/details/91038839
https://blog.csdn.net/MagicMHD/article/details/91042309
https://blog.csdn.net/MagicMHD/article/details/91044471
https://blog.csdn.net/MagicMHD/article/details/91388067