Используя OpenLayers, как я могу отображать разные значки для разных функций на одном слое? - PullRequest
Новая
       16

Используя OpenLayers, как я могу отображать разные значки для разных функций на одном слое?

0 голосов
/ 23 января 2019

Во-первых, я новичок в Openlayers / JS в целом и довольно неопытен в программировании в целом, поэтому могут быть другие проблемы с моим кодом, о которых я не знаю.

Я использую последнюю версию Openlayers (5.3.0).

Моя программа в настоящее время передает данные в формате GeoJson через Ajax для отображения на карте Openlayers. Он создает карту, вид и слой для объектов, которые будут отображаться. Когда я нажимаю кнопку «Перейти» на странице, объекты успешно загружаются на карту. В моем случае объекты - это просто простые точки с широтой / долготой, использующие маркер png для визуализации. GeoJson выглядит так в C # перед сериализацией и отправкой в ​​JS на моей странице для десериализации: 

{{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.549077,
          53.800755
        ]
      },
      "properties": {
        "GPSKey": 1,
        "Latitude": 53.800755,
        "Longitude": -1.549077,
        "TimeAdded": "2019-01-15T12:10:16",
        "IconPath": "pinred.png"
      },
      "ID": 1,
      "IconPath": null
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.545077,
          53.800755
        ]
      },
      "properties": {
        "GPSKey": 2,
        "Latitude": 53.800755,
        "Longitude": -1.545077,
        "TimeAdded": "2019-01-15T12:10:16",
        "IconPath": "pinred.png"
      },
      "ID": 2,
      "IconPath": null
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -1.524043,
          53.773222
        ]
      },
      "properties": {
        "GPSKey": 3,
        "Latitude": 53.773222,
        "Longitude": -1.524043,
        "TimeAdded": "2019-01-15T12:10:16",
        "IconPath": ""
      },
      "ID": 3,
      "IconPath": null
    }
  ]
}}

JS получает сериализованное выше и использует этот код для добавления его в слой для просмотра: 

var geojsonFormat = new ol.format.GeoJSON({
        dataProjection: "EPSG:4326",
        featureProjection: "EPSG:3857"
    });//creates a format definition

    jsonDecoded = JSON.parse(result); /

    if (jsonDecoded.features.length > 0) {
        for (var i = 0; i < jsonDecoded.features.length; i++) {
            vectorSource.addFeature(geojsonFormat.readFeature(jsonDecoded.features[i], { featureProjection: "EPSG:3857" }));

        }

    }/

Векторный слой, к которому он добавляется, выглядит следующим образом: 

var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: iconStyleFunc()
});

И iconStyleFunc () выглядит так: 

function iconStyleFunc() {

    var zIndex = 1;

    var iconName = null;

    if (iconName == null) {
        iconName = "pinother.png"
    };


    iconStyle = [new ol.style.Style({
        image: new ol.style.Icon(({
            anchor: [0.5, 36], 
            anchorXUnits: "fraction",
            anchorYUnits: "pixels",
            opacity: 1,
            src: "images/" + iconName,  
            zIndex: zIndex
        })),
        zIndex: zIndex
    })];
return iconStyle;

Это прекрасно работает для стилизации всех функций с помощью значка "pinother.png". У меня нет проблем с отображением точек на карте, когда я нажимаю кнопку.

Что я хотел бы сделать, так это применить стили, основанные на пути к значкам в свойствах GeoJson «iconpath» каждого объекта, чтобы любой объект, имеющий «pinred.png», использовал его вместо стандартного «pinother». png "и т. д. с различными значками, которые мне, возможно, понадобится добавить в будущем.

Я не уверен, как читать это свойство каждой функции и как мне лучше всего реализовать его в функции стилей. Я предполагал, что итерация по функциям с помощью iconStyleFunc (), чтение свойства IconPath для каждой функции, добавление этого значения к пути «src / images /» в iconStyleFunc () и соответствующая стилизация объекта.

1 Ответ

0 голосов
/ 23 января 2019

Используя аргумент функции функции стиля, вы можете получить свойства функции 

function iconStyleFunc(feature) {

    var zIndex = 1;

    var iconName = feature.get("IconPath") || "pinother.png";

    iconStyle = [new ol.style.Style({
        image: new ol.style.Icon(({
            anchor: [0.5, 36], 
            anchorXUnits: "fraction",
            anchorYUnits: "pixels",
            opacity: 1,
            src: "images/" + iconName,  
            zIndex: zIndex
        })),
        zIndex: zIndex
    })];
return iconStyle;
...