Добавлен слой карты. Нет ошибки. Слой не виден

Я создаю слой карты со следующим кодом:

var GeoJSON = {};
GeoJSON.type = "FeatureCollection";
GeoJSON.features = [];

var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: "~/icons/delivery-truck.png"
    }))
});

for (var i = 0; i < data.length; i++) {

    var machineGeoObject = {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [data[i]["longitude"], data[i]["latitude"]],
        },
        "properties": data[i],
        "style": iconStyle
    }
    GeoJSON.features.push(machineGeoObject);
} //end of loop

var format = new ol.format.GeoJSON({
    featureProjection: "EPSG:3857"
});

var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
       features: format.readFeatures(GeoJSON)
    })
});

map.addLayer(vector);

Ошибки нет. Когда я вызываю map.getLayers() в консоли, я вижу добавленный слой. Свойство слоя «видимый» истинно. Почему я не вижу на карте отмеченных местоположений значков? Почему я вижу только голую карту?


openlayers openlayers-5
person Community    schedule 22.09.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вероятно, у вас есть объекты, видимые в пределах 180 метров от долготы / широты 0,0 в атлантическом стиле, выполненном в стиле OpenLayers по умолчанию. Вы не можете установить стиль OpenLayers через GeoJSON, он должен быть установлен на слое или на элементе с помощью setStyle(). Также featureProjection в формате используется только в настройках источника слоя, если вы используете readFeatures, это должно быть указано там:

var GeoJSON = {};
GeoJSON.type = "FeatureCollection";
GeoJSON.features = [];

var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: "~/icons/delivery-truck.png"
    }))
});

for (var i = 0; i < data.length; i++) {

    var machineGeoObject = {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [data[i]["longitude"], data[i]["latitude"]],
        },
        "properties": data[i],
    }
    GeoJSON.features.push(machineGeoObject);
} //end of loop

var format = new ol.format.GeoJSON();

var vector = new ol.layer.Vector({
    source: new ol.source.Vector({
       features: format.readFeatures(GeoJSON, {
         featureProjection: "EPSG:3857"
       })
    }),
    style: iconStyle
});

Также проверьте правильность URL вашего значка src (должно ~ быть . или ..?) И убедитесь, что data[i]["longitude"] и data[i]["latitude"] являются числами, а не строками (при необходимости используйте Number()).

person Mike    schedule 22.09.2019