Question

我正在处理一个地图，其中矢量图层来自不同的geojson文件。每个文件都包含一系列多边形（type = multipolygon）。

每个多边形的特征在于一系列参数，例如“种类”。默认情况下，图层设置为不可见并具有特定样式（填充和描边）。

我创建了一个选择以启用按物种搜索

Microsoft.VisualStudio.Azure.Fabric.Application.props

然后我编写了一个jquery，只有当文件中存在选定的种类时才能上传图层

            <form>
            <select class="species">
                <option value="">Choose</option>
                <option value="Balaenopteraphysalus">Balaenoptera physalus</option>
                <option value="Physetercatodon">Physeter catodon</option>
                <option value="Delphinusdelphis">Delphinus delphis</option>
                <option value="Tursiopstruncatus">Tursiops truncatus</option>
                <option value="Stenellacoeruleoalba">Stenella coeruleoalba</option>
                <option value="Grampusgriseus">Grampus griseus</option>
                <option value="Globicephalamelaena">Globicephala melaena</option>
                <option value="Ziphiuscavirostris">Ziphius cavirostris</option>
                <option value="Monachusmonachus">Monachus monachus</option>
            </select>
        </form>
        <button id="clearSpecies">Clear</button>

一切正常。但是，由于我实际上在同一层处理不同的多边形，我需要进一步的步骤。在上面的循环（$(document).ready(function() { $("select.species").change(function() { var selectedSpecies = $(".species option:selected").val(); if (selectedSpecies) { //geojson request $.getJSON('http://localhost:8888/maps/prova/immas_test_separated_js_immas_file/resources/test_imma_2.geojson', function (data) { $.each(data.features, function (key, val) { $.each(val.properties, function(i,j){ //i = proprietà l = valore proprietà if(i == 'Species') { //replace spaces to have one single word j = j.replace(/\s+/g, ''); species = j.split(","); species.forEach(function(animal) { if(animal == selectedSpecies) { //test passed prova1.setVisible(true); //add something to change style (hide the multipolygon not which are not satisfying the condition and show those who satisfy the condition } }); } });//loop ends });//loop ends }); //ends geojson request } }); //clears layers $("#clearSpecies").click(function(){ prova1.setVisible(false); }); });）中将图层设置为可见之后，我需要将样式更改为整个图层，而不是根据if条件更改单个多边形：参数“species”不包含的那些选定的选项值必须将填充和描边更改为无（透明），而参数种类包含所选选项值的多边形必须用颜色填充。

考虑geojson文件中的参数“species”包含多个名称（例如“物种”：“Monachus monachus，Balaenoptera physalus，Physeter macrocephalus，Ziphius cavirostris，Globicephala melas，Grampus griseus，Tursiops truncatus，Stenella coeruleoalba ，Delphinus delphis“）

有什么建议吗？谢谢！

=========== UPDATE ===========

我按照@pavlos的建议研究了报告的例子here。但是我没有通过。

这里是我用于样式和创建prova1.setVisible(true);

的代码

function styleFunction(feature, resolution)

当用户搜索物种时，我因此尝试重写JQuery / javascript来处理样式更改。在这样做时，我没有使用forEachFeature函数，因为我从未成功获得任何结果，但我通过jQuery在对象内部循环。各种循环都应该是因为“species”参数包含一个具有不同名称（属+种类）的字符串，否则我可以通过复制上面链接中给出的示例来克服该问题。如前所述，我想用不同的样式突出显示那些在字符串中包含用select选择的物种的多边形（更好的是高亮这些并隐藏所有其他不包含搜索物种的物种）。

//SET STYLES

//set colours
var colourSpecies = [64,196,64,1];
var colourCriteria = [90,160,64,1];

//set levelnames related to colours
var selectedLevels = {
  'species': colourSpecies,
  'criteria': colourCriteria
}

//default style
var defaultStyle =
  new ol.style.Style({
        fill: new ol.style.Fill({
        color: [0,0,0,1]
    }),
    stroke: new ol.style.Stroke({
    color: [0,0,0,1],
    width: 1
    })
});

//custom styleFunction
var styleCache = {};
function styleFunction(feature, resolution) {
  var level = feature.get('selectedLevel');
    if (!level || !selectedLevels[level]) {
       return [defaultStyle];
    }
  if (!styleCache[level]) {
      styleCache[level] =
    new ol.style.Style({
      fill: new ol.style.Fill({
      color: selectedLevels[level]
      }),
      stroke: defaultStyle.stroke
      });
  }
  return [styleCache[level]];
}

但是它不起作用：显示$(document).ready(function() { $("select.species").change(function() { var selectedSpecies = $(".species option:selected").val(); if (selectedSpecies && selectedSpecies !='') { //geojson request $.getJSON('http://localhost:8888/maps/prova/immas_test_separated_js_immas_file/resources/test_imma_2.geojson', function (data) { {$.each(data.features, function (key, val) { console.log(val.properties); $.each(val.properties, function(i,j){ //i = proprietà l = valore proprietà console.log(i); if(i == 'Species') { j = j.replace(/\s+/g, ''); //eliminates spaces between genus and species var species = j.split(","); console.log(species); var species_array_length = species.length; console.log(species_array_length); var counter; for (counter = 0; counter < species_array_length; counter++){ if (selectedSpecies === species[counter]){ var animal = species[counter]; console.log('Found' + animal); var feature = val.properties; console.log(feature); feature.set('selectedLevel', 'species'); } }//termina ciclo for } });//termina loop });//temrina loop} }); //ends geojson request prova1.setVisible(true); } }); //clears layers $("#clearSpecies").click(function(){ prova1.setVisible(false); }); });的错误，并再次使用默认样式上传所有图层。我很担心这是一个简单的例子。最后我应该处理18个geojson文件和两个选项（按物种和“criteriacode”这是我的geojson文件中的另一个参数）。

我在这里添加了files使用的链接（包括teh geojson用作测试）

Answer 1

对于上面发布的问题， ====更新=== 。

感谢@pavlos提供的一些建议，我成功解决了上述问题。

此fiddle提供了包含测试文件的整个解决方案。

将样式设置为层

//SET STYLES
//default style
var defaultStyle =
  new ol.style.Style({
        fill: new ol.style.Fill({
        color: [0,0,0,1]
    }),
    stroke: new ol.style.Stroke({
    color: [0,0,0,1],
    width: 1
    })
});
var selectStyle =   new ol.style.Style({
        fill: new ol.style.Fill({
        color: [64,196,64,1]
    }),
    stroke: new ol.style.Stroke({
    color: [64,196,64,1],
    width: 1
    })
});
var transparentStyle =   new ol.style.Style({
        fill: new ol.style.Fill({
        color: [255,255,255, 0]
    }),
    stroke: new ol.style.Stroke({
    color: [255,255,255, 0],
    width: 1
    })
});


//Gets the layer sources

var ocean_map =
    new ol.layer.Tile({
        source: new ol.source.XYZ({
        url: 'https://services.arcgisonline.com/ArcGIS/rest/services/' +
            'Ocean_Basemap/MapServer/tile/{z}/{y}/{x}',

        }),
        visible: true,
        });

var source =
  new ol.source.Vector({
    format: new ol.format.GeoJSON({
    }),
        dataProjection: 'EPSG:3857',
    url: 'test.geojson',
    attributions: [
      new ol.Attribution({
        html: 'Mediteranean region'
      })
    ]
  });

var prova1 =

new ol.layer.Vector({
  source: source,
    style: defaultStyle,
  name: 'Mediteranean region',
    visible: false,
});

管理风格

//when clicking the select
document.getElementById("species_select").addEventListener('click', function () {
    resetSelectElement(mySelect);
//first step it loads the vector layer and sets the style to transparent
    prova1.setStyle(transparentStyle);
    prova1.setVisible(true);
//second step when the select changes (i.e. I make a choice)
    $("#species_select").change(function() {
//it starts the function to change styles according to the selection made
        var selectedSpecies = $("#species_select option:selected").text();
        console.log('selectedSpecies',selectedSpecies);
            source.forEachFeature(function(feat){
                console.log(feat);
                console.log(feat.get('Species'))
                console.log(feat.get('Species').indexOf(selectedSpecies));
    //if substring(selected text) exist within fetaure property('Speices)
    //should return any value other than -1
                if (feat.get('Species').indexOf(selectedSpecies)!=-1) {
    //so set the style on each feature
                feat.setStyle(selectStyle);

                } else {
    //and if doesnt exist switch back to the deafult style
                feat.setStyle(transparentStyle);
                }
            })

    });
});
//clears layers
$("#clearSpecies").click(function(){
    prova1.setVisible(false);
    prova1.setStyle(defaultStyle);
});

如何使用多边形更改geojson矢量图层中的样式

1 个答案: