javascript - 根据 Openlayers 3 中获取的数据应用自定义图标

Question

我们正在尝试升级应用程序中的 map ，这里有 OL2 和 OL3 之间的很多差异。我们希望根据数据将不同的图标(图像)应用于我们的 map ，例如如果项目状态已打开 - 则使用此图标，如果项目状态已关闭 - 则使用另一个图标，依此类推。到目前为止，我们能够将一种图标应用于所有项目。但无法弄清楚如何使用多个。我已经创建了多种样式并应用于功能，但是它与随机数配合得很好，但是当我尝试对数据库(数组格式)中的数据使用相同的代码时，它看起来像是将第一种样式应用于整个大量项目。

这是我的 JS 代码:

    (function(){
    var vectorSource = new ol.source.Vector({
      //create empty vector
    });

    (function(){
    var vectorSource2 = new ol.source.Vector({
      //create another empty vector
    });

    //create a bunch of icons and add to source vector
    for (var i=0;i<10;i++){

    var budget = 'Budget:£133,876.99';
    var proj_manager = 'Craig Morgan';
    var href = '<a href="http://www.bbc.co.uk">View Project</a>';

        var iconFeature = new ol.Feature({
        geometry: new  
            ol.geom.Point(ol.proj.transform([Math.random()*360-180, Math.random()*180-90], 'EPSG:4326',   'EPSG:3857')),
        name: 'Project' + i +'<br>'+href +'<br>'+ proj_manager +'<br>' + budget,
        icon_a: 'map-icon-small.png '
        });

        vectorSource.addFeature(iconFeature);           
    }       


    for (var i=0;i<15;i++){

    var budget = 'Money:£100,555.11';
    var proj_manager = 'Bob Johnson';
    var href = '<a href="http://www.cnn.com">View Project</a>';

        var iconFeature2 = new ol.Feature({
        geometry: new  
            ol.geom.Point(ol.proj.transform([Math.random()*360-180, Math.random()*180-90], 'EPSG:4326',   'EPSG:3857')),
        name: 'Project' + i +'<br>'+href +'<br>'+ proj_manager +'<br>' + budget,
        icon_b: 'googleMapPointer.png '
        });

        vectorSource2.addFeature(iconFeature2); 
    }       


    //create the style
    var iconStyle = new ol.style.Style({
      image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 0.5],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        src: "http://obermain.com/assets/images/general/"+ iconFeature.get('icon_a')
      }))
    });


    /************** adding another style **********************/

    var iconStyle2 = new ol.style.Style({
      image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 0.5],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 1,
        src: "http://www.stsoman.com/images/"+ iconFeature2.get('icon_b')
      }))
    });



    //add the feature vector to the layer vector, and apply a style to whole layer
    var vectorLayer = new ol.layer.Vector({
      source: vectorSource,
      style: iconStyle
    });

   var vectorLayer2 = new ol.layer.Vector({
      source: vectorSource2,
      style: iconStyle2
    });

/************ set up the map *********************/


var map = new ol.Map({
    layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM()}),
        vectorLayer, vectorLayer2],
        target: document.getElementById("map"),
        view: new ol.View({
        center:  [0, 0],
        zoom: 4
    })
});             


/********************* getting popup element by id *********************************/   

var element = document.getElementById('popup');

var popup = new ol.Overlay({
    element: element,
    autoPan: true,
    positioning: 'center-center',
    stopEvent: false
});

map.addOverlay(popup);



// display popup on click

map.on('click', function (evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel,

    function (feature, layer) {
        return feature;
    });
    if (feature) {
        var geometry = feature.getGeometry();
        var coord = geometry.getCoordinates();
        popup.setPosition(coord);
        $(element).popover({
            'placement': 'auto top',
                'html': true,
                'content': feature.get('name')
        });
        $(element).popover('show');

        //FIX THAT MESSES UP THE POSITION OF THE POPOVER        
        $('.popover-content').html( '<pre>' + feature.get('name') + '</pre>' );

    } else {
        $(element).popover('destroy');
    }
});

// change mouse cursor when over marker
map.on('pointermove', function (e) {
    if (e.dragging) {
        $(element).popover('destroy');
        return;
    }
    var pixel = map.getEventPixel(e.originalEvent);
    var hit = map.hasFeatureAtPixel(pixel);
    map.getTarget().style.cursor = hit ? 'pointer' : '';
});

        })();
})();

这是 HTML:

    <script src="ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script src="http://openlayers.org/en/v3.10.1/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.js"></script>

<div id="map"></div>
<div id="popup"></div>

所以上面的代码工作得很好，但是，当我创建 PL/SQL 包并从数据库获取数据时，第一个样式应用于所有项目。我如何指定哪个项目应用确切的样式(图标)。从数据库中获取的数据是数组格式的，如果我手动将其插入到代码中，它也可以很好地工作。有什么帮助吗？谢谢

Answer 1

您没有展示如何存储以及如何从数据库读取。但解决方案可以是:在每个功能上存储一个标识符，以便您在阅读时可以基于它。

也许:

new ol.Feature({
  geometry: new ol.geom.Point(),
  project: project_identifier // <---- you are saving these properties on db, right?
});

假设您从数据库获取一个数组:

array_features.forEach(function(feature){
  // whose project are you
  var project = feature.get('project');
  // decide what you do
});