Question

我正在尝试在Openlayers 4.6上使用不同图标的多个标记。问题是加载地图时，我只看到一个标记图像。我错过了什么以及如何解决此错误？

var lamarin = ol.proj.fromLonLat([29.1728363, 40.8950354]);
var view = new ol.View({
  center: lamarin,
  zoom: 4
});

var vectorSource = new ol.source.Vector({});
var places = [
  [29.1728363, 40.8950354, 'http://www.binaprekast.com/wp-content/uploads/2018/04/MG_2371.jpg'],
  [29.1741285, 40.8960586, 'http://www.binaprekast.com/wp-content/uploads/2018/04/3-4.jpg'],
  [29.1728363, 40.8950354, 'http://www.binaprekast.com/wp-content/uploads/2018/04/DSC1554.png'],
];

for (var i = 0; i < places.length; i++) {
  var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([places[i][0], places[i][1]], 'EPSG:4326', 'EPSG:3857')),
  });

  var iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 0.5],
      anchorXUnits: 'fraction',
      anchorYUnits: 'fraction',
      src: places[i][2],
    })
  });
}
vectorSource.addFeature(iconFeature);
iconFeature.getStyle(iconStyle);

var vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  updateWhileAnimating: true,
  updateWhileInteracting: true,
  style: function(feature, resolution) {
    iconStyle.getImage().setScale(map.getView().getResolutionForZoom(18) / resolution);
    return iconStyle;
  }
});

var map = new ol.Map({
  target: 'map',
  view: view,
  layers: [
    new ol.layer.Tile({
      preload: 3,
      source: new ol.source.OSM(),
    }),
    vectorLayer,
  ],
  loadTilesWhileAnimating: true,
});

map.once('postrender', function(event) {
  view.animate({
    center: lamarin,
    zoom: 17,
    duration: 10000,
    mapTypeId: 'roadmap',
  });
});

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div id="map" class="map"></div>

Answer 1

您只是将最后一个添加到vectorSource。要将所有标记添加到地图，请更改：

for (var i = 0; i < places.length; i++) {
  var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([places[i][0], places[i][1]], 'EPSG:4326', 'EPSG:3857')),
  });

  var iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 0.5],
      anchorXUnits: 'fraction',
      anchorYUnits: 'fraction',
      src: places[i][2],
    })
  });
}
// outside the loop
vectorSource.addFeature(iconFeature);

要：

for (var i = 0; i < places.length; i++) {
  var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([places[i][0], places[i][1]], 'EPSG:4326', 'EPSG:3857')),
  });

  var iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 0.5],
      anchorXUnits: 'fraction',
      anchorYUnits: 'fraction',
      src: places[i][2],
    })
  });
  // inside the loop
  vectorSource.addFeature(iconFeature);
}

proof of concept fiddle

代码段

var lamarin = ol.proj.fromLonLat([29.1728363, 40.8950354]);
var view = new ol.View({
  center: lamarin,
  zoom: 15 // 5
});

var vectorSource = new ol.source.Vector({});
var places = [
  [29.1728363, 40.8950354, 'https://openlayers.org/en/v4.6.5/examples/data/dot.png', '#8959A8'],
  [29.1741285, 40.8960586, 'https://openlayers.org/en/v4.6.5/examples/data/dot.png', '#4271AE'],
  [29.1733, 40.894, 'http://maps.google.com/mapfiles/ms/micons/blue.png', /* [113, 140, 0]*/ ],
];

var features = [];
for (var i = 0; i < places.length; i++) {
  var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform([places[i][0], places[i][1]], 'EPSG:4326', 'EPSG:3857')),
  });


  /* from https://openlayers.org/en/latest/examples/icon-color.html
    rome.setStyle(new ol.style.Style({
      image: new ol.style.Icon(({
       color: '#8959A8',
       crossOrigin: 'anonymous',
       src: 'https://openlayers.org/en/v4.6.5/examples/data/dot.png'
      }))
    })); */

  var iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 0.5],
      anchorXUnits: 'fraction',
      anchorYUnits: 'fraction',
      src: places[i][2],
      color: places[i][3],
      crossOrigin: 'anonymous',
    })
  });
  iconFeature.setStyle(iconStyle);
  vectorSource.addFeature(iconFeature);
}



var vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  updateWhileAnimating: true,
  updateWhileInteracting: true,
});

var map = new ol.Map({
  target: 'map',
  view: view,
  layers: [
    new ol.layer.Tile({
      preload: 3,
      source: new ol.source.OSM(),
    }),
    vectorLayer,
  ],
  loadTilesWhileAnimating: true,
});

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div id="map" class="map"></div>

Openlayers 4.6上有多个标记，带有不同的图标？

1 个答案: