Question

我需要导出一个＆＃34;迷你地图＆＃34; （569 * 238）当我想扩展到vector_source时，我面临着标签的碰撞问题。我必须显示它们，这意味着我不能使用重叠或分辨率。我知道我可以设置最大宽度，如example所示，但就我而言，由于我正在处理城市名称，因此无关紧要。

我尝试创建一个snippet来向您展示它是如何工作的，但似乎投影效果不佳（全部设置为[0,0]）。

 var vectorSource = new ol.source.Vector({
      features: (new             ol.format.GeoJSON()).readFeatures(geojsonObject)  
      });

function styleFunction (feature) {
       return new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'blue',
            width: 1
          }),
          fill: new ol.style.Fill({
            color: 'rgba(0, 0, 255, 0.1)'
          }),
          text: new ol.style.Text({
             text: feature.get('PORT_NAME'),
             fill: new ol.style.Fill({
            color: '#000000'
          }),
          stroke: new ol.style.Stroke({


  color: '#FFFF99',
            width: 3.5
          })
        })
      });
};

var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: styleFunction
      });


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

我想我的需要是移动我的标签并用线条将它们链接到他们的点，但我无法弄清楚如何使其工作，或者是否已经存在这样的解决方案。

任何帮助将不胜感激！

你如何处理标签碰撞？

0 个答案: