OpenLayers 详细开发指南 - 第十部分 - 基础属性和方法汇总-CSDN博客

1. Map（地图对象）

// 1. 创建地图
const map = new Map({
  target: 'map',  // DOM元素ID
  view: view,     // 视图对象
  layers: [],     // 图层数组
  controls: [],   // 控件数组
  interactions: [], // 交互数组
  overlays: []    // 覆盖物数组
});

// 2. 常用方法
// 图层操作
map.addLayer(layer);           // 添加图层
map.removeLayer(layer);        // 移除图层
map.getLayers();              // 获取所有图层
map.getLayerGroup();          // 获取图层组

// 视图操作
map.getView();                // 获取视图
map.setView(view);            // 设置视图

// 控件操作
map.addControl(control);      // 添加控件
map.removeControl(control);   // 移除控件
map.getControls();           // 获取所有控件

// 交互操作
map.addInteraction(interaction); // 添加交互
map.removeInteraction(interaction); // 移除交互
map.getInteractions();        // 获取所有交互

// 覆盖物操作
map.addOverlay(overlay);      // 添加覆盖物
map.removeOverlay(overlay);   // 移除覆盖物
map.getOverlays();           // 获取所有覆盖物

// 坐标转换
map.getPixelFromCoordinate(coordinate); // 坐标转像素
map.getCoordinateFromPixel(pixel);      // 像素转坐标

// 事件监听
map.on('click', function(event) {});     // 点击事件
map.on('pointermove', function(event) {}); // 鼠标移动事件
map.on('moveend', function() {});        // 地图移动结束事件

2. View（视图）

// 1. 创建视图
const view = new View({
  center: [0, 0],          // 中心点坐标
  zoom: 4,                 // 缩放级别
  minZoom: 2,             // 最小缩放级别
  maxZoom: 19,            // 最大缩放级别
  rotation: 0,            // 旋转角度
  projection: 'EPSG:3857' // 投影
});

// 2. 常用方法
// 视图状态
view.setCenter([x, y]);    // 设置中心点
view.getCenter();          // 获取中心点
view.setZoom(level);       // 设置缩放级别
view.getZoom();           // 获取缩放级别
view.setRotation(angle);   // 设置旋转角度
view.getRotation();       // 获取旋转角度

// 视图范围
view.fit(extent, {
  padding: [100, 100, 100, 100],
  duration: 1000
});  // 适应范围

// 动画
view.animate({
  center: [x, y],
  zoom: level,
  rotation: angle,
  duration: 1000
});

// 事件监听
view.on('change:center', function() {}); // 中心点变化
view.on('change:resolution', function() {}); // 分辨率变化
view.on('change:rotation', function() {});  // 旋转角度变化

3. Layers（图层集合）

// 1. 图层组
const layerGroup = new LayerGroup({
  layers: []  // 图层数组
});

// 2. 常用方法
layerGroup.getLayers();     // 获取所有图层
layerGroup.setLayers(layers); // 设置图层
layerGroup.addLayer(layer);   // 添加图层
layerGroup.removeLayer(layer); // 移除图层

// 3. 图层属性
layer.setVisible(true/false); // 设置可见性
layer.getVisible();          // 获取可见性
layer.setOpacity(0-1);       // 设置透明度
layer.getOpacity();         // 获取透明度
layer.setZIndex(index);      // 设置层级
layer.getZIndex();          // 获取层级

4. Controls（控件集合）

// 1. 常用控件
// 缩放控件
const zoom = new ZoomControl({
  zoomInTipLabel: '放大',
  zoomOutTipLabel: '缩小'
});

// 比例尺控件
const scaleLine = new ScaleLine({
  units: 'metric'
});

// 鼠标位置控件
const mousePosition = new MousePosition({
  coordinateFormat: createStringXY(4),
  projection: 'EPSG:4326'
});

// 全屏控件
const fullScreen = new FullScreen();

// 2. 控件方法
control.setMap(map);       // 设置地图
control.getMap();         // 获取地图
control.setTarget(element); // 设置目标元素
control.getTarget();      // 获取目标元素

5. Interactions（交互集合）

// 1. 常用交互
// 选择交互
const select = new Select({
  condition: click,
  style: selectStyle
});

// 修改交互
const modify = new Modify({
  features: select.getFeatures()
});

// 绘制交互
const draw = new Draw({
  source: vectorSource,
  type: 'Polygon'
});

// 2. 交互方法
interaction.setActive(true/false); // 设置激活状态
interaction.getActive();          // 获取激活状态
interaction.setMap(map);          // 设置地图
interaction.getMap();            // 获取地图

// 3. 事件监听
draw.on('drawstart', function(event) {});
draw.on('drawend', function(event) {});
select.on('select', function(event) {});
modify.on('modifystart', function(event) {});
modify.on('modifyend', function(event) {});

6. Overlays（覆盖物集合）

// 1. 创建覆盖物
const overlay = new Overlay({
  element: document.getElementById('popup'),
  positioning: 'bottom-center',
  offset: [0, -10],
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  }
});

// 2. 覆盖物方法
overlay.setPosition(coordinate); // 设置位置
overlay.getPosition();         // 获取位置
overlay.setElement(element);    // 设置元素
overlay.getElement();         // 获取元素
overlay.setOffset(offset);     // 设置偏移
overlay.getOffset();          // 获取偏移

7. VectorLayer（矢量图层）

// 1. 创建矢量图层
const vectorLayer = new VectorLayer({
  source: vectorSource,
  style: style,
  visible: true,
  opacity: 1,
  zIndex: 1
});

// 2. 矢量图层方法
vectorLayer.getSource();          // 获取数据源
vecto