【问题标题】:Openlayers 4: loading features from arrayOpenlayers 4:从数组加载特征
【发布时间】:2018-01-07 18:10:05
【问题描述】:

所以,我对 JS 很陌生。 我正在我的 rgb 图层的中心创建样式为标记的功能,并使用以下代码将它们分配给一个数组:

        for (var i = 0, len = Layers.length; i < len; i++) {
            var mExtent = ol.proj.transformExtent(Layers[i].BoundingBox[0].extent, 'EPSG:4326', 'EPSG:3857');

            var X = mExtent[0] + (mExtent[2]-mExtent[0])/2;
            var Y = mExtent[1] + (mExtent[3]-mExtent[1])/2;

  var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point([X, Y]),
    name: Layers[i].Title,
    layername: Layers[i].Name,
    description: Layers[i].Abstract
  });                
  var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: ortho
    }))
  });

  iconFeature.setStyle(iconStyle);

  var vectorSource = new ol.source.Vector({
    features: [iconFeature]
  });

var vectorLayer = new ol.layer.Vector({source: vectorSource, zIndex: 100 });
layers2[i] = vectorLayer
            }

当我尝试调用地图时:

var map = new ol.Map({
    layers:[BaseLayers, POI, layers2],    
    target: document.getElementById('map')
});

我的 layers2 要素数组未显示在地图上。 如果那时我尝试在控制台中手动添加这一系列功能:

map.addLayer(layers2)

我收到以下错误:

TypeError: a.addEventListener is not a function

但是如果我尝试像这样从数组中手动​​调用一个元素:

map.addLayer(layers2[0])

它工作正常。 我的包含基础层(OSM+mapbox)的数组工作正常。 我很确定我的数组类型有问题。 但不知道是什么。

感谢您的光临。

编辑 1

试图将我所有的功能、RGB 图层和底图放在一个数组“图层”中。 所以代码在第一个循环中从

layers2[i] = vectorLayer;

收件人:

layers.push(vectorLayer);

其中“层”已经包含所有其余层对象。 调用地图时 - 上面没有“vectorLayer”功能。 当使用 map.addLayer(layers) 在控制台中手动调用“图层”时,仍然会出现相同的错误。 例如,当使用 map.addLayer(layers[2]) 调用特定的“vectorLayer”功能时 - 它会显示出来。

【问题讨论】:

    标签: javascript arrays openlayers-3


    【解决方案1】:

    通过查看代码layers2 是一个层数组。在创建 ol.Map 对象时,layers 属性应该是一维数组,但在您的代码中它是一个二维数组,如下所示。这就是它给出错误的原因。

    [BaseLayer, POI, [layers[0],layers2[1],.....]]

    解决方案 1:使用循环创建地图对象后添加图层数组。

    var map = new ol.Map({
        layers:[BaseLayers, POI],    
        target: document.getElementById('map')
    });
    
    for ( var i=0; i<layers2.length; i++ ) {
       map.addLayer(layers2[i]);
    };
    

    解决方案 2:将 BaseLayersPOI 插入到 layers2,然后通过仅声明 layers2 来配置 ol.Map

    【讨论】:

    • 你说得对。你也可以试试'layers:BaseLayers.concat(Layers2).concat(POI)'。它应该为您提供所有层的单一维度数组。
    • 感谢您的回复。我之前尝试过的第一个解决方案,它确实有效,是的,但这是我想避免的事情。至于解决方案 2 - 我尝试使用 layers.push(vectorLayer); 将所有图层放在一个数组中;在第一个循环中,并将其余层推送到同一阵列(层) - 但仍然不起作用。当我试图在一个数组中调用所有图层的地图时 - 来自“vectorLayer”的功能不会显示,并且如果尝试在控制台中再次调用该图层数组 - 仍然会出现相同的错误。将在第一篇文章中进行一些调整。
    • 如果您之前尝试过,那么您应该在提问时提及它。如果您不想使用解决方案 1,请使用 2 或@Pavlos 给出的解决方案。
    • 数组中层的顺序很重要。如果您最后推送 BaseLayers,那么该层将位于所有其他层之上。
    • @SumanthShastry 就是这样,BaseLayers 是数组中的拳头,当“vectorLayer”对象在其中时,无论如何我尝试手动调用“layers”时都会出错。是的,很抱歉没有指出我尝试了第一个解决方案,当时我很困。但由于某种原因,第二个对我不起作用。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-10-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多