Question

我使用以下代码生成地图图层：

dtick

没有错误。当我在控制台中调用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);时，我看到了添加的图层。图层的“可见”属性为true。为什么在地图上看不到带有图标的精确位置？为什么我只看到裸露的地图？

Answer 1

在OpenLayers默认样式设置的大西洋中，您可能具有在lon / lat 0,0的180米内可见的要素。您无法通过GeoJSON设置OpenLayers样式，必须使用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
});

还要检查图标src的网址是否正确（~是.还是..？），并确保data[i]["longitude"]和data[i]["latitude"]是数字而不是字符串（如有必要，请使用Number()。

添加了地图图层。没错图层不可见

1 个答案: