Openlayers 6 - Select 一個特性和改變它的風格

Question

我正在使用 openlayers 6，我的主要目標是能夠繪制多個特征，然后能夠 select 分別繪制每個繪制的特征並使用不同的樣式對其進行樣式設置，我嘗試使用 Select 交互來獲取選定的特征並改變它的風格，它會改變，但在取消選擇它后，該功能會回到它的主要風格，我希望風格是持久性的。

這是我所取得的成就

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css"
      type="text/css"
    />
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
    <style>
      html,
      body,
      .map {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <input type="number" id="number" />
    <script>
      const mainStyle = [
        new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: "#000",
            width: 2,
          }),
        }),
      ];

      const selectStyle = [
        new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: "#000",
            width: 2,
          }),
        }),
        new ol.style.Style({
          image: new ol.style.Circle({
            radius: 5,
            fill: new ol.style.Fill({
              color: "#f59e0b",
            }),
            stroke: new ol.style.Stroke({
              color: "#000",
              width: 2,
            }),
          }),
          geometry: function (feature) {
            const coordinates = feature.getGeometry().getCoordinates();
            return new ol.geom.MultiPoint(coordinates);
          },
        }),
      ];

      var raster = new ol.layer.Tile({
        source: new ol.source.OSM(),
      });

      var source = new ol.source.Vector({ wrapX: false });

      var vector = new ol.layer.Vector({
        source: source,
      });

      var map = new ol.Map({
        layers: [raster, vector],
        target: "map",
        view: new ol.View({
          center: [-11000000, 4600000],
          zoom: 4,
        }),
      });

      var draw = new ol.interaction.Draw({
        source: source,
        condition: ol.events.condition.altKeyOnly,
        type: "LineString",
        style: function (feature) {
          if (feature.getGeometry().getType() === "LineString") {
            feature.setStyle(mainStyle);
          }
        },
      });
      map.addInteraction(draw);

      const select = new ol.interaction.Select({
        layers: [vector],
        hitTolerance: 10,
        style: selectStyle,
      });
      map.addInteraction(select);

      document.getElementById("number").addEventListener("change", (event) => {
        let width = event.target.value;
        let selectedFeature = select.getFeatures().array_[0];
        selectedFeature.getStyle()[0].getStroke().setWidth(width);
        selectedFeature.changed();
      });
    </script>
  </body>
</html>

Answer 1

使用 null 樣式定義 select 交互，因此它不會設置臨時 styles 並在 Z99948282F041071 事件中設置持久性樣式

 <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" type="text/css" /> <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script> <style> html, body, .map { margin: 0; padding: 0; width: 100%; height: 100%; } </style> </head> <body> <div id="map" class="map"></div> <input type="number" id="number" /> <script> const mainStyle = [ new ol.style.Style({ stroke: new ol.style.Stroke({ color: "#000", width: 2, }), }), ]; const selectStyle = [ new ol.style.Style({ stroke: new ol.style.Stroke({ color: "#000", width: 2, }), }), new ol.style.Style({ image: new ol.style.Circle({ radius: 5, fill: new ol.style.Fill({ color: "#f59e0b", }), stroke: new ol.style.Stroke({ color: "#000", width: 2, }), }), geometry: function (feature) { const coordinates = feature.getGeometry().getCoordinates(); return new ol.geom.MultiPoint(coordinates); }, }), ]; var raster = new ol.layer.Tile({ source: new ol.source.OSM(), }); var source = new ol.source.Vector({ wrapX: false }); var vector = new ol.layer.Vector({ source: source, }); var map = new ol.Map({ layers: [raster, vector], target: "map", view: new ol.View({ center: [-11000000, 4600000], zoom: 4, }), }); var draw = new ol.interaction.Draw({ source: source, condition: ol.events.condition.altKeyOnly, type: "LineString", style: function (feature) { if (feature.getGeometry().getType() === "LineString") { feature.setStyle(mainStyle); } }, }); map.addInteraction(draw); const select = new ol.interaction.Select({ layers: [vector], hitTolerance: 10, style: null, }); select.on('select', (event) => { event.selected.forEach((feature) => { feature.setStyle(selectStyle); }); }); map.addInteraction(select); </script> </body> </html>

Openlayers 6 - Select 一個特性和改變它的風格

問題描述

1 個解決方案

解決方案1
0 2022-08-31 22:04:46

Openlayers 6 - Select 一個特性和改變它的風格

問題描述

1 個解決方案

解決方案1 0 2022-08-31 22:04:46

解決方案1
0 2022-08-31 22:04:46