OpenLayers的初级学习--Map

参考：https://www.cnblogs.com/xtfge/p/9949059.html

1、Map示例

// 实例化Map对象加载地图
		//let mapContainer=document.getElementsByClassName('mapContainer')[0];
        var map=new ol.Map({
            // 地图容器
            //target:mapContainer,
            target:'mapCon',
            // 地图图层列表
            layers:[TiandiMap_vec,TiandiMap_cva,TiandiMap_img,TiandiMap_cia],
            // 地图视图设置
            view:new ol.View({
                // 地图中心点
                center:[0,0],
                // 地图初始显示级别
                zoom:4,
                minZoom:2,
                maxZoom:12
            }),
            controls:ol.control.defaults().extend([
                // 加载鼠标位置控件
                new ol.control.MousePosition(
                    {
                        target:document.getElementById('mouse-position')
                    }
                )
            ])
        });

2、Map常见属性

• target 地图容器 属性值可以为元素本身（可以通过DOM获取该元素）target:mapContainer,或者该元素的id名 target:'mapCon',
• layers 图层 属性值必须是数组
• view 地图视图 new ol.View({}) 必填属性// 地图中心点 center:[0,0], // 地图初始显示级别 zoom:4,
• controls 地图控件
• overlays 叠加图层

3、Map常用方法

• addControl() 添加控件 getControls()、removeControl()
• addLayer() 添加图层、getLayers()、removeLayer()
• addOverlay() 添加叠加图层、getOverlays()、removeOverlay()
• getEventCoordinate() 触发事件的坐标
• getTarget() 得到Map的所有容器
• getView()、setView()
• getTarget()、setTarget()

4、Map的事件

• click 地图鼠标点击事件
• dblclick 地图鼠标左键双击事件
• moveend 地图被移动后触发
• movestart 地图开始移动时触发
• postrender 地图被渲染后触发
• singleclick 地图鼠标左键单击事件
• pointerdrag 地图鼠标拖拽事件
• pointermove 地图鼠标移动事件
  监听地图事件：map.on(type,listener)
  只监听一次：map.once(type,listener)
  注销监听：map.un(type(type,listener))

事件示例

 map.on('click',function(e){
    // 单击显示经纬度
    let coor=e.coordinate;
    let lonlat=ol.proj.transform(coor,"EPSG:3857","EPSG:4326")           console.log('lon:'+lonlat[0].toFixed(2)+",lat:"+lonlat[1].toFixed(2));
        })