openlayers6 添加道路图层 并点击道路高亮显示

在OpenLayers 6中，你可以通过以下步骤添加一个道路图层并实现点击道路高亮显示的功能：

1. 添加基本的道路图层。
2. 监听click事件以获取点击的要素。
3. 高亮显示点击的道路。

以下是实现上述功能的示例代码：

import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import OSM from 'ol/source/OSM';
import VectorSource from 'ol/source/Vector';
import { Fill, Stroke, Style } from 'ol/style';
import { click } from 'ol/events/condition';
import { LineString } from 'ol/geom';
 
// 创建地图
const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
    // 添加道路图层
    roadsLayer
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});
 
// 创建道路图层
const roadsLayer = new VectorLayer({
  source: new VectorSource({
    url: 'path/to/roads/geojson', // 道路数据的GeoJSON URL
    format: new GeoJSON()
  }),
  style: new Style({
    stroke: new Stroke({
      color: 'blue',
      width: 3,
    }),
  }),
});
 
// 添加到地图
map.addLayer(roadsLayer);
 
// 监听点击事件
map.on('click', (evt) => {
  // 获取被点击的要素
  const feature = map.forEachFeatureAtPixel(evt.pixel, (feature) => feature, {
    layerFilter: (layer) => layer === roadsLayer
  });
 
  if (feature) {
    // 高亮显示点击的道路
    roadsLayer.getSource().forEachFeature((f) => {
      if (f === feature) {
        f.setStyle(new Style({
          stroke: new Stroke({
            color: 'red',
            width: 5,
          })
        }));
      } else {
        f.setStyle(null);
      }
    });
    map.render();
  }
});

在这个例子中，我们首先创建了一个新的矢量图层roadsLayer，并且从一个GeoJSON URL加载了道路数据。然后我们监听了地图的click事件，当用户点击地图时，我们检查点击事件是否发生在roadsLayer上。如果点击了道路，我们就通过遍历图层源中的所有要素，并为点击的要素设置一个高亮样式，而其他要素则设置为null（即没有样式），这样它们就会正常渲染，但不再被高亮显示。