Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/ssl/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Openlayers 3 如何在开放层3中为每个多边形显示一个标签?_Openlayers 3 - Fatal编程技术网

Openlayers 3 如何在开放层3中为每个多边形显示一个标签?

Openlayers 3 如何在开放层3中为每个多边形显示一个标签?,openlayers-3,Openlayers 3,我在试图弄清楚如何在OL3中为每个多多边形显示一个标签时遇到了一个问题。它当前显示每个多边形的标签,在这个特定场景中,这些多边形在任何情况下都不理想 var vector = new ol.layer.Vector({ source: new ol.source.Vector({ format: new ol.format.GeoJSON(), projection: 'EPSG:4326', url: 'resources/ol3/countries.geojson'

我在试图弄清楚如何在OL3中为每个多多边形显示一个标签时遇到了一个问题。它当前显示每个多边形的标签,在这个特定场景中,这些多边形在任何情况下都不理想

var vector = new ol.layer.Vector({
source: new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    projection: 'EPSG:4326',
    url: 'resources/ol3/countries.geojson'
}),
style: function (feature, resolution) {
    style.getText().setText(resolution < 10000 ? feature.get('NAME') : '');
    style.getFill().setColor('rgba(255, 255, 255, 0)');
    return styles;
}});

var vector=新ol.layer.vector({
来源:新ol.source.Vector({
格式:新建ol.format.GeoJSON(),
投影:‘EPSG:4326’,
url:'resources/ol3/countries.geojson'
}),
样式:功能(特征、分辨率){
style.getText().setText(分辨率<10000?feature.get('NAME'):“”);
style.getFill().setColor('rgba(255,255,255,0)');
返回样式;
}});

如果可能的话,我想在最大的多边形上显示标签。

ol3不支持您想做的事情,至少“本机”不支持。有几种方法可以实现你想要的,但我不认为在“客户端”实现它是最好的方法

1-简单快速的方式,服务器端 如果您可以控制数据/服务器,那么我将从那里管理要显示的标签。您可以创建一个“标签特定”字段,该字段包含要显示的文本的副本,对于那些不保留为空的文本。如果你只想让岛上最大的一块地方永远有这个标签,那就行了

2-复杂而缓慢的方式-客户端 在客户端,在样式函数中,您可以在每个特征中循环,并收集与尝试标记的特征具有相同名称的特征,然后比较它们的几何体区域。仅当该要素没有其他具有较大面积的同名要素时,才标记该要素


这个解决方案也可以在服务器端实现。如果功能是共享相同名称的功能中面积最大的功能,则可以返回值为1的额外字段,如果不是,则返回值为0。只能使用此字段=1来标记要素。

客户端的另一个选项是仅标记多边形多边形部分中较大的一个。 对于此选项,您不需要在服务器端进行任何控制。因此,请使用以下代码或直接转到以查看其实际操作:

var vector = new ol.layer.Vector({
  style: function (feature, resolution) {
    var polyStyleConfig = {
      stroke: new ol.style.Stroke({
        color: 'rgba(255, 255, 255, 1)',
        width: 1
      }),
      fill: new ol.style.Fill({
        color: 'rgba(255, 0, 0,0.3)'
      })
    }
    var textStyleConfig = {
      text:new ol.style.Text({
        text:resolution < 100000 ? feature.get('NAME') : '' ,
        fill: new ol.style.Fill({ color: "#000000" }),
        stroke: new ol.style.Stroke({ color: "#FFFFFF", width: 2 })
      }),
      geometry: function(feature){
        var retPoint;
        if (feature.getGeometry().getType() === 'MultiPolygon') {
          retPoint =  getMaxPoly(feature.getGeometry().getPolygons()).getInteriorPoint();
        } else if (feature.getGeometry().getType() === 'Polygon') {
          retPoint = feature.getGeometry().getInteriorPoint();
        }
        console.log(retPoint)
        return retPoint;
      }
    }
    var textStyle = new ol.style.Style(textStyleConfig);
    var style = new ol.style.Style(polyStyleConfig);
    return [style,textStyle];
  },
  source: new ol.source.Vector({
    url: 'http://openlayers.org/en/v3.8.2/examples/data/geojson/countries.geojson',
    format: new ol.format.GeoJSON(),
    wrapX: false
  })
});
var vector=新ol.layer.vector({
样式:功能(特征、分辨率){
变量polyStyleConfig={
笔划:新的ol风格笔划({
颜色:“rgba(255,255,255,1)”,
宽度:1
}),
填充:新的ol.style.fill({
颜色:“rgba(255,0,0,0.3)”
})
}
var textStyleConfig={
文本:新的ol.style.text({
文本:分辨率<100000?功能。获取('NAME'):“”,
fill:new ol.style.fill({color:#000000“}),
笔划:新的ol.style.stroke({color:#FFFFFF',宽度:2})
}),
几何:功能(特征){
var retPoint;
if(feature.getGeometry().getType()==='MultiPolygon'){
retPoint=getMaxPoly(feature.getGeometry().getPolygons()).getInteriorPoint();
}else if(feature.getGeometry().getType()===='Polygon'){
retPoint=feature.getGeometry().getInteriorPoint();
}
console.log(retPoint)
返回点;
}
}
var textStyle=newol.style.style(textStyleConfig);
var style=newol.style.style(polyStyleConfig);
返回[style,textStyle];
},
来源:新ol.source.Vector({
网址:'http://openlayers.org/en/v3.8.2/examples/data/geojson/countries.geojson',
格式:新建ol.format.GeoJSON(),
wrapX:错误
})
});
您还需要一个辅助函数来验证哪个多边形更大:

function getMaxPoly(polys) {
  var polyObj = [];
  //now need to find which one is the greater and so label only this
  for (var b = 0; b < polys.length; b++) {
    polyObj.push({ poly: polys[b], area: polys[b].getArea() });
  }
  polyObj.sort(function (a, b) { return a.area - b.area });

  return polyObj[polyObj.length - 1].poly;
 }
函数getMaxPoly(多边形){ var PolyBj=[]; //现在需要找出哪一个更大,所以只标注这个 对于(var b=0;b谢谢!这就是我要找的