Скрипт OpenLayers возвращает TypeError: e.getId не является функцией - PullRequest
Новая
       50

Скрипт OpenLayers возвращает TypeError: e.getId не является функцией

0 голосов
/ 02 апреля 2020

Я пытаюсь настроить значок отдельного маркера на карте (весь источник извлечен на БД), но я не понимаю, почему не работает.

Я использую ol_v5 .2. маркер». Если я не создаю вектор и оставляю одно изображение для всех маркеров, оно работает правильно.

Это мой (неправильный) код: 

    var locations = [
        ["<b>Klos</b>", 41.5063062, 20.0859109 , "id_c=87",  "img\ico_red.png", 1],
        ["<b>Kavaja</b>", 41.183305, 19.567137 , "id_c=92",  "img\ico_green.png", 2]
    ];

// Array of Icon features
var iconFeatures=[];
for (var i = 0; i < locations.length; i++) {
  var iconFeature = new ol.Feature({
    type: 'click',
    luogo: locations[i][0],
    url: locations[i][3], 
    geometry: new ol.geom.Point(ol.proj.transform([locations[i][2], locations[i][1]], 'EPSG:4326', 'EPSG:3857')),
  });

  iconFeatures.push(iconFeature);
}

var vectorSource = new ol.source.Vector({
    features: iconFeatures
});

// Array of icon for marker
var iconStyles=[];
for (var i = 0; i < locations.length; i++) {
    var iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 0.5],
          anchorXUnits: 'fraction',
          anchorYUnits: 'fraction',
          src: locations[i][4], 
          scale: 1
            })
    });

  iconStyles.push(iconStyle);
}

var vectorSourceBis = new ol.source.Vector({
    features: iconStyles
});


var vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: vectorSourceBis,
  updateWhileAnimating: true,
  updateWhileInteracting: true,
});

// Initial map view
var mapCenter = ol.proj.fromLonLat([  19.7583493375,41.4856463875 ]); 
var view = new ol.View({
  center: mapCenter,
  zoom: 6
});

// Create  map
var map = new ol.Map({
  target: 'map',
  view: view,
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM(),
    }),
    vectorLayer,
  ],
  loadTilesWhileAnimating: true,
});

Что не так?

1 Ответ

0 голосов
/ 03 апреля 2020

Взгляните на пример, который я сделал для вас. В этом примере стиль значка создается и устанавливается для функции, то есть так вы обозначаете каждую функцию в другом стиле. 

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
    <title>Icon Features</title>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script type="text/javascript">
    let locations = [
      ["<b>Klos</b>", 41.5063062, 20.0859109 , "id_c=87",  "https://openlayers.org/en/latest/examples/data/square.svg", 1],
      ["<b>Kavaja</b>", 41.183305, 19.567137 , "id_c=92",  "https://openlayers.org/en/latest/examples/data/dot.png", 2]
    ];
    // Array of Icon features
    const iconFeatures=[];
    for (let i = 0; i < locations.length; i++) {
      const iconFeature = new ol.Feature({
        type: 'click',
        luogo: locations[i][0],
        url: locations[i][3], 
        geometry: new ol.geom.Point(
          ol.proj.transform([locations[i][2], locations[i][1]], 'EPSG:4326', 'EPSG:3857')
        )
      });
      const iconStyle = new ol.style.Style({
        image: new ol.style.Icon({
          anchor: [0.5, 0.5],
          anchorXUnits: 'fraction',
          anchorYUnits: 'fraction',
          src: locations[i][4], 
          scale: 1
        })
      });
      iconFeature.setStyle(iconStyle);
      iconFeatures.push(iconFeature);
    }
    const vectorSource = new ol.source.Vector({
      features: iconFeatures
    });
    const vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      updateWhileAnimating: true,
      updateWhileInteracting: true,
    });
    // map
    const mapCenter = ol.proj.fromLonLat([  19.7583493375,41.4856463875 ]); 
    const view = new ol.View({
      center: mapCenter,
      zoom: 6
    });
    const map = new ol.Map({
      target: 'map',
      view: view,
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM(),
        }),
        vectorLayer,
      ],
      loadTilesWhileAnimating: true,
    });
    </script>
  </body>
</html>

Кстати, я использую значки из OL Примеры - Цвет значка

...