OpenLayers 入门指南：从零开始的地图应用开发（四）

要素操作

1. 添加要素

创建要素

在 OpenLayers 中，可以使用 ol.Feature 类来创建要素。以下是创建点、线、面要素的示例：

import Point from 'ol/geom/Point';
import LineString from 'ol/geom/LineString';
import Polygon from 'ol/geom/Polygon';
import Feature from 'ol/Feature';

// 创建点要素
const pointGeometry = new Point([0, 0])
const pointFeature = new Feature(pointGeometry)

// 创建线要素
const lineGeometry = new LineString([
  [4e6, 2e6],
  [8e6, -2e6],
])
const lineFeature = new Feature(lineGeometry)

// 创建面要素
const polygonGeometry = new Polygon([
  [
    [-5e6, -1e6],
    [-3e6, -1e6],
    [-4e6, 1e6],
    [-5e6, -1e6],
  ],
])
const polygonFeature = new Feature(polygonGeometry)

将要素添加到矢量图层

在 OpenLayers 中，可以使用 ol.source.Vector 和 ol.layer.Vector 来创建矢量图层，然后将要素添加到该图层。

import 'ol/ol.css'
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { OSM, Vector as VectorSource } from 'ol/source';
import VectorLayer from 'ol/layer/Vector';

// 创建地图容器
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    }),
    // 创建矢量图层
    new VectorLayer({
      source: new VectorSource()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

// 获取矢量图层
const vectorLayer = map.getLayers().item(1);

// 将要素添加到矢量图层
vectorLayer.getSource().addFeature(pointFeature);
vectorLayer.getSource().addFeature(lineFeature);
vectorLayer.getSource().addFeature(polygonFeature);

通过以上代码，你可以学习如何创建要素，并将这些要素添加到矢量图层中，在地图上显示出来。

2. 修改要素

移动要素

在 OpenLayers 中，要移动要素，我们可以通过修改要素的几何对象的坐标来实现。以下是一个简单的例子：

// 移动点要素到新的坐标位置
function movePointFeature(newCoordinates) {
  const pointGeometry = pointFeature.getGeometry();
  pointGeometry.setCoordinates(newCoordinates);
}

// 示例：在一定时间后移动点要素
setTimeout(() => {
  const newCoordinates = [2e6, 1e6];
  movePointFeature(newCoordinates);
}, 2000);

在这个例子中，movePointFeature 函数用于将点要素移动到新的坐标位置。

缩放要素

缩放要素可以通过修改要素的几何对象的坐标并重新设置坐标来实现。以下是一个简单的例子：

// 缩放线要素
function scaleLineFeature(scaleFactor) {
  const lineGeometry = lineFeature.getGeometry();
  const coordinates = lineGeometry.getCoordinates();

  // 缩放坐标
  const scaledCoordinates = coordinates.map(coord => [coord[0] * scaleFactor, coord[1] * scaleFactor]);

  // 设置新的坐标
  lineGeometry.setCoordinates(scaledCoordinates);
}

// 示例：在一定时间后缩放线要素
setTimeout(() => {
  const scaleFactor = 0.5; // 缩放因子
  scaleLineFeature(scaleFactor);
}, 2000);

在这个例子中，scaleLineFeature 函数用于缩放线要素。

旋转要素

要旋转要素，可以通过修改要素的几何对象的坐标并重新设置坐标。以下是一个简单的例子：

// 旋转面要素
function rotatePolygonFeature(angle) {
  const polygonGeometry = polygonFeature.getGeometry();
  const coordinates = polygonGeometry.getCoordinates();

  // 计算旋转后的坐标
  const rotatedCoordinates = coordinates[0].map(coord => [
    Math.cos(angle) * coord[0] - Math.sin(angle) * coord[1],
    Math.sin(angle) * coord[0] + Math.cos(angle) * coord[1],
  ]);

  // 设置新的坐标
  polygonGeometry.setCoordinates([rotatedCoordinates]);
}

// 示例：在一定时间后旋转面要素
setTimeout(() => {
  const rotationAngle = Math.PI / 4; // 旋转角度，这里设置为 45 度
  rotatePolygonFeature(rotationAngle);
}, 2000);

在这个例子中，rotatePolygonFeature 函数用于旋转面要素。请注意，这里的旋转角度是弧度制。

3. 删除要素

单个要素删除

要删除单个要素，可以从矢量图层中移除特定要素。以下是一个简单的例子：

// 删除单个点要素
function removePointFeature() {
  vectorLayer.getSource().removeFeature(pointFeature);
}

// 示例：在一定时间后删除单个点要素
setTimeout(() => {
  removePointFeature();
}, 2000);

在这个例子中，removePointFeature 函数用于从矢量图层中移除点要素。

批量要素删除

要删除多个要素，可以通过从矢量图层中批量移除要素。以下是一个简单的例子：

// 删除所有要素
function removeAllFeatures() {
  const source = vectorLayer.getSource();
  const features = source.getFeatures();

  // 批量移除所有要素
  features.forEach(feature => {
    source.removeFeature(feature);
  });
}

// 示例：在一定时间后删除所有要素
setTimeout(() => {
  removeAllFeatures();
}, 2000);

在这个例子中，removeAllFeatures 函数用于从矢量图层中批量移除所有要素。

4. 查询要素

根据属性查询

要根据属性查询要素，可以通过遍历要素集合并比较属性值来实现。以下是一个简单的例子：

// 根据属性值查询要素
function queryFeaturesByAttribute(attributeName, attributeValue) {
  const vectorLayer = /* 获取你的矢量图层 */;
  const source = vectorLayer.getSource();
  const features = source.getFeatures();

  // 遍历要素集合，找到匹配的要素
  const matchingFeatures = features.filter(feature => {
    const attribute = feature.get(attributeName);
    return attribute === attributeValue;
  });

  // 返回匹配的要素集合
  return matchingFeatures;
}

// 示例：查询属性值为 'example' 的要素
const attributeName = 'propertyName'; // 替换为实际的属性名称
const attributeValue = 'example';
const matchingFeatures = queryFeaturesByAttribute(attributeName, attributeValue);
console.log(matchingFeatures);

在这个例子中，queryFeaturesByAttribute 函数用于根据指定属性名和属性值查询要素。

根据位置查询

要根据位置查询要素，可以使用 OpenLayers 提供的空间查询功能。以下是一个简单的例子：

// 根据位置查询要素
function queryFeaturesByPosition(position) {
  const vectorLayer = /* 获取你的矢量图层 */;
  const source = vectorLayer.getSource();
  const features = source.getFeatures();
  // 遍历要素集合，找到包含查询点的要素
  const matchingFeatures = features.filter(feature => {
    const geometry = feature.getGeometry();
    return geometry.intersectsCoordinate(position);
  });

  // 返回匹配的要素集合
  return matchingFeatures;
}

// 示例：查询包含位置 [-5e6, -1e6] 的要素
const position = [-5e6, -1e6]; // 替换为实际的位置
const matchingFeaturesByPosition = queryFeaturesByPosition(position);
console.log(matchingFeaturesByPosition);

在这个例子中，queryFeaturesByPosition 函数用于根据指定位置查询要素。请注意，这里的 intersectsCoordinate 方法用于检查要素的几何对象是否与查询点相交。

5. 监听要素事件

要素点击事件

// 监听地图的点击事件
map.on('click', (event) => {
  // 获取点击的像素坐标
  const pixel = event.pixel;

  // 遍历地图上的所有要素
  map.forEachFeatureAtPixel(pixel, (feature) => {
    // 在这里执行点击事件后的操作
    console.log('要素被点击了！', feature.getProperties());
  });
});

这样，当地图被点击时，会遍历点击的像素位置上的所有要素，执行相应的点击事件操作。

要素移动事件

// 监听地图的移动事件
map.on('pointermove', (event) => {
  // 获取移动的像素坐标
  const pixel = map.getEventPixel(event.originalEvent);

  // 遍历地图上的所有要素
  map.forEachFeatureAtPixel(pixel, (feature) => {
    // 在这里执行移动事件后的操作
    console.log('要素被移动了！', feature.getProperties());
  });
});

这样，当鼠标移动时，会遍历移动的像素位置上的所有要素，执行相应的移动事件操作。

6 自定义要素样式

根据属性设置样式

• 使用 getStyle 方法为要素设置样式
• 根据要素属性动态生成样式
• 示例：根据属性设置要素颜色

// 示例：根据属性设置要素颜色
const vectorLayer = new VectorLayer({
  source: new VectorSource(),
  style: function (feature) {
    const color = feature.get('color'); // 从要素属性中获取颜色属性
    return new Style({
      fill: new Fill({
        color: color || 'rgba(255, 0, 0, 0.2)', // 默认红色透明填充
      }),
      stroke: new Stroke({
        color: 'rgba(255, 0, 0, 0.8)',
        width: 2,
      }),
    });
  },
});

根据状态设置样式

• 使用 getStyle 方法为要素设置样式
• 根据要素状态动态生成样式
• 示例：根据选中状态设置要素样式

// 示例：根据选中状态设置要素样式
let selectedFeature = null; // 记录选中的要素

map.on('click', (event) => {
  const pixel = event.pixel;
  const clickedFeature = map.forEachFeatureAtPixel(pixel, (feature) => feature);

  if (clickedFeature) {
    // 切换选中状态
    if (clickedFeature === selectedFeature) {
      selectedFeature = null;
    } else {
      selectedFeature = clickedFeature;
    }

    // 更新样式
    vectorLayer.getSource().changed();
  }
});

// 在图层的 style 中动态设置选中要素的样式
vectorLayer.setStyle((feature) => {
  const isSelected = feature === selectedFeature
  return new Style({
    image: new Circle({
      radius: 8,
      fill: new Fill({
        color: isSelected ? 'rgba(0, 255, 0, 0.2)' : 'rgba(255, 0, 0, 0.2)',
      }),
      stroke: new Stroke({
        color: isSelected ? 'rgba(0, 255, 0, 0.2)' : 'rgba(255, 0, 0, 0.2)',
        width: 2,
      }),
    }),
  })
})

以上代码概述了如何根据要素的属性和状态来动态设置要素的样式。可以根据实际需求进一步定制样式的逻辑。

Overlay

Overlay 是 OpenLayers 中用于在地图上显示自定义 HTML 元素的弹出层的类。Overlay 通常用于实现自定义的信息框、标注、弹出菜单等用户界面元素。下面是一个简单的示例，演示了如何使用 Overlay：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OpenLayers App</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body,
    #map {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .btn-container {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 99;
    }

    button {
      cursor: pointer;
    }

    #overlay {
      width: 200px;
      height: 200px;
      background-color: red;
      color: #fff;
      text-align: center;
      line-height: 200px;
    }
  </style>
</head>

<body>
  <div id="map">
    <div class="btn-container">
      <button id="showOverlay">显示</button>
      <button id="hideOverlay">隐藏</button>
    </div>
  </div>
  <div id="overlay">
    我是一个弹框
  </div>
  <script src="./src/app.js"></script>
</body>

</html>

import 'ol/ol.css'
import Overlay from 'ol/Overlay'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import { OSM } from 'ol/source'

// 创建地图容器
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
})

// 创建 Overlay
const overlay = new Overlay({
  element: document.getElementById('overlay'), // HTML 元素
  positioning: 'bottom-center', // 定位方式
  offset: [0, -20], // 偏移量
  autoPan: true, // 是否自动平移地图以确保 Overlay 完全可见
})

// 将 Overlay 添加到地图
map.addOverlay(overlay)

// 设置 Overlay 的位置
overlay.setPosition([0, 0])

// 显示/隐藏 Overlay
document.getElementById('showOverlay').addEventListener('click', () => {
  overlay.setPosition([0, 0])
})

document.getElementById('hideOverlay').addEventListener('click', () => {
  overlay.setPosition(undefined)
})

在这个示例中，我们创建了一个地图，添加了两个图层，然后创建了一个 Overlay，将其绑定到 HTML 元素，并使用 setPosition 方法设置 Overlay 的位置。在按钮点击事件中，我们可以通过设置 Overlay 的位置来显示或隐藏它。确保在 HTML 中有一个与 Overlay 关联的元素，它将充当弹出层的内容。

其他

如果你想深入了解更多实例，请访问我的网站 Map Demo ，感谢你的阅读！