如何在OpenLayers6的EPSG:25832投影WMTS地图中添加LineString

我完全懂你的困扰——OpenLayers的文档有时候确实绕，尤其是涉及到投影和矢量图层结合的时候。你猜的方向没错：就是用VectorLayer + VectorSource来承载LineString要素，但重点要把坐标投影匹配和要素创建逻辑理清楚，我来给你一步步拆解：

核心步骤说明 #

1. 提取标记点坐标：你已经有了originMarker和destinationMarker两个标记要素，先把它们的几何坐标取出来——注意必须确保这些坐标是和地图一致的EPSG:25832投影（如果你的标记点原始是经纬度，记得用fromLonLat转换）。
2. 创建LineString要素：用两个标记的坐标生成LineString几何对象，再包装成Feature。
3. 添加线条专用矢量图层：把这个线条要素放到单独的VectorSource里，再创建对应的VectorLayer，最后加到地图的图层列表中。

修改后的完整代码示例 #

我直接在你现有代码基础上修改，你可以参考：

// 先从已有的标记点中提取坐标（假设标记点的坐标已经是EPSG:25832）
const originCoord = originMarker.getGeometry().getCoordinates();
const destinationCoord = destinationMarker.getGeometry().getCoordinates();

// 创建LineString要素
const lineString = new LineString([originCoord, destinationCoord]);
const lineFeature = new Feature({
  geometry: lineString
});

// 自定义线条样式（可选，根据需求调整）
const lineStyle = new Style({
  stroke: new Stroke({
    color: '#ff0000', // 红色线条
    width: 3          // 线条宽度
  })
});

var map = new Map({ 
  target: 'map', 
  layers: [ 
    new TileLayer({ 
      opacity: 0.7, 
      source: new WMTS({ 
        crossOrigin: 'Anonymous', 
        url: `https://kortforsyningen.kms.dk/topo_skaermkort_daempet?TICKET=${TOKEN}`, 
        layer: 'dtk_skaermkort_daempet', 
        matrixSet: 'View1', 
        format: 'image/jpeg', 
        tileGrid: tileGrid, 
        style: 'default', 
        size: SIZE 
      }) 
    }), 
    new VectorLayer({ 
      source: new VectorSource({ features: [originMarker] }), 
      style: new Style({ 
        image: new Icon({ 
          anchor: [0.5, 1], 
          src: A_ICON, 
        }) 
      }) 
    }), 
    new VectorLayer({ 
      source: new VectorSource({ features: [destinationMarker] }), 
      style: new Style({ 
        image: new Icon({ 
          anchor: [0.5, 1], 
          src: B_ICON, 
        }) 
      }) 
    }),
    // 新增的线条图层
    new VectorLayer({
      source: new VectorSource({ features: [lineFeature] }),
      style: lineStyle
    })
  ], 
  view: new View({ 
    center: fromLonLat(centerPoint, 'EPSG:25832'), 
    zoom: 3, 
    resolutions: tileGrid.getResolutions(), 
    projection: projection, 
    extent: EXTENT 
  }) 
});

关键注意事项 #

• 投影匹配：如果你的originMarker或destinationMarker是用经纬度创建的，一定要先把坐标转换成EPSG:25832，比如：

  const originCoord = fromLonLat([lon, lat], 'EPSG:25832');
  

• 动态更新线条：如果后续需要根据新数据更新线条，只需要操作线条图层的VectorSource即可：

  const lineSource = map.getLayers().getArray()[3].getSource(); // 假设线条是第4个图层
  lineSource.clear();
  lineSource.addFeature(newLineFeature);
  

• 样式自定义：你可以根据需求调整线条的颜色、宽度、虚线样式等，比如给Stroke添加lineDash: [5, 5]来创建虚线。

内容的提问来源于stack exchange，提问作者Hansted