openLayer-基本介绍 OL名词解释

1、Map

1.1、属性
	    target ：实例地图挂载到对应DOM
		layers ：默认为数组,最后的图层，会在地图最上面 
		|view：地图视图
1.2、方法
		map.getLayers().getArray();       获取所有的图层                 
		addLayer()                                 添加图层                        
		removeLayer()                           移除图层                        
		map.getLayers().item(1).setVisible(false)  设置某个图层的显示/隐藏         
		map.addLayers                        
		map.getPixelFromCoordinate([114,30])  将经纬度坐标转化为像素坐标      
		map.getLayers().insertAt(index,layer)      在下标`index`的前面插入某个图层 
		$map.value.getInteractions().pop()    map如何是响应式的，执行删除画笔 

1.3、事件
		 https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html

//为map添加鼠标移动事件监听,当鼠标移动到元素上的时候会显示手型
map.on('pointermove', function (e) {
    var pixel = map.getEventPixel(e.originalEvent);
    var hit = map.hasFeatureAtPixel(pixel);
    map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});


// 为map添加点击事件监听，渲染弹出popup
map.on('click', function (e) {
    // 获取当前点击的点是否存在要素, 并返回
    const feature = map.forEachFeatureAtPixel(
        //
        e.pixel,
        function (feature, layer) {
            return feature
        }
    )
    if (feature) {
        console.log(feature);
    }
})

2、target

target: 'map' //绑定的DOM元素

制定初始化的地图设置到html页面上的哪一个DOM元素上

3、layers

3.1 属性
`source`：设置图层数据源
`title`：说明图层
`zIndex`：可以设置图层的堆叠顺序
`visible`：设置图层是否可见，默认值true
`opacity`：设置图层透明度,默认值1
`style`：图层的样式
通过这个参数的名字我可以推断一个`map`可以设置多个`layer`，图层是构成openlayers的基本单位，地图是由多个layer组成的，这种设计类似于Photoshop里面的图层，多个图层是可以叠加的，在最上面的会覆盖下面的。

3.2 方法
`new ol.layer.Tile`：实例化瓦片图层
`layer.setVisible(boolean)`：可以控制图层显示和隐藏
`layer.setOpacity`：控制图层的透明度
`layer.setMap(map)`：将图层添加到地图上
`layer.setStyle()`：可以给图层设置样式
`layer.setZIndex()`：设置图层zIndex的值
`layer.setSource`：设置数据源

4、Source

	4.1 方法
	addFeature：添加要素
	addFeatures：([])添加要素
	clear()：删除数据源中所有的要素
	getFeatues()：获取数据源中所有的要素
	4.2事件
	source.on("addfeature",callback)

5、交互式-画笔

	5.1创建画笔 
	let draw = new ol.interaction.Draw({
		source,
		type:"Point"
	}) 
	5.2激活画笔 
	 map.addInteraction(draw); 
	5.3 移除画笔  
	map.removeInteraction(draw); 
	5.4监听画笔  
	draw.on("drawend",function(evt){
	    console.log(evt);
	}) 

6、交互式-Select

	6.1创建select 
	 const select  = new ol.interaction.Select({
	    condition:ol.events.condition.click,
	    layers:[],
	    style
	}) 
	6.2激活select ：`map.addInteraction(select);` 
	6.3移除select ：`map.removeInteraction(select);` 
	6.4监听select ：select.on("select",function(evt){
	    console.log(evt);
	}) 

7、view

     7.1 中心点经纬度 center: [114.30, 30.50],
     7.2 初始化缩放比 zoom: 4,
     7.3 坐标 : projection: "EPSG:4326" 
     7.4 center 视图的初始中心。
	extent 限制视图的范围。值表示范围的数字数组：[minx, miny, maxx, maxy]。
	constrainRotation 旋转约束。 false意味着没有约束。true意味着没有约束，但在零附近捕捉到零。数字将旋转限制为该数量的值，就是设置90只能旋转90度。
	enableRotation 是否启用旋转。
	constrainOnlyCenter 如果为true，则范围约束将仅适用于视图中心而不是整个范围。
	smoothExtentConstraint 如果为true，范围约束将被平滑地应用，即允许视图稍微超出给定的extent。
	maxResolution 用于确定分辨率约束的最大分辨率。
	minResolution 用于确定分辨率约束的最小分辨率。
	maxZoom 用于确定分辨率约束的最大缩放级别。
	minZoom 用于确定分辨率约束的最小缩放级别。
	constrainResolution 如果为 true，则视图将始终在交互后以最接近的缩放级别进行动画处理；false 表示允许中间缩放级别。
	resolutions决定缩放级别的分辨率。
	rotation 以弧度为单位的视图初始旋转（顺时针旋转，0 表示北）。

总结：
通过以下代码解读，我可以得出一个结论，一个ol的地图，主要由layer和view组成。layer可以有多个，view只能设置一个。

8、坐标转化

	ol.proj.transform([114,30], 'EPSG:4326', 'EPSG:3857')

9、geojson数据转换

9.1、geojson To ol-feature

new ol.format.GeoJSON().readFeauters();  //FeatureColletion|Feature
new ol.format.GeoJSON().readFeauter(); // Feature

9.2、ol-feature To geojson

new ol.format.GeoJSON().writeFeatureObject();
new ol.format.GeoJSON().writeFeaturesObject();

9.3、geojson-url

const source = new ol.source.Vector({
  url:"xxx",
  format:new ol.format.GeoJSON()
})

10、瓦片图层

new ol.layer.Tile()
概念：随着地图的缩放，按照一定的算法和比例对地图进行切割,将地图分成一个个小的模块，那么这些模块就是瓦片,页面只加载显示的模块，其他模块模糊处理。

11、坐标

1、EPSG:4326 表示一个地理坐标系，使用经纬度来表示地理位置，通常用于地理位置的显示和制图。
2、EPSG:3857 表示一个 Web 墨卡托坐标系，使用平面墨卡托投影来表示地理位置。
3、Openlayer默认使用EPSG:3857;
4、ol.proj.transform([114,30],'EPSG:4326','EPSG:3857')可以将经纬度，转化为墨卡托。

12、思维导图

13、后期满满的干货，欢迎关注订阅，将持续更新