四章-37-矢量标签的显示控制

作者: 彩云飘过 | 来源:发表于2020-04-21 11:25 被阅读0次

四章-37-矢量标签的显示控制
echart:地图上标签重叠问题解决
优化——SVG常用方法
CSS第二节：CSS性质
css性质（1）
CSS第二节
移动端meta 以及一些常用js事件
HTML5
css第二节
use_svg_display()

本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。

源码见 1037.html ，对应的官网示例

image.png

<!DOCTYPE html>
<html>

<head>
  <title>矢量标签显示控制</title>
  <link rel="stylesheet" href="../include/ol.css" type="text/css" />
  <script src="../include/ol.js"></script>
</head>

<body>
  <div id="map" class="map"></div>

  <script>
    var map = new ol.Map({
      target: "map",
      view: new ol.View({
        center: [0, 0],
        zoom: 1
      })
    });

    //文字标签样式
    var labelStyle = new ol.style.Style({
      geometry: function (feature) {
        var geometry = feature.getGeometry();
        //关键代码，找到最宽的多边形，然后显示字体标签
        if (geometry.getType() == "MultiPolygon") {
          // 多个多边形要素集合中仅渲染最宽的那个
          var polygons = geometry.getPolygons();
          var widest = 0;
          for (var i = 0, ii = polygons.length; i < ii; ++i) {
            var polygon = polygons[i];
            var width = ol.extent.getWidth(polygon.getExtent());
            if (width > widest) {
              widest = width;
              geometry = polygon;
            }
          }
        }
        
        return geometry;
      },
      text: new ol.style.Text({
        font: "14px Calibri,sans-serif",
        overflow: true,
        fill: new ol.style.Fill({
          color: "#000"
        }),
        stroke: new ol.style.Stroke({
          color: "#fff",
          width: 3
        })
      })
    });
    
    //国家边界样式
    var countryStyle = new ol.style.Style({
      fill: new ol.style.Fill({
        color: "rgba(255, 255, 255, 0.6)"
      }),
      stroke: new ol.style.Stroke({
        color: "#319FD3",
        width: 1
      })
    });
    
    var style = [countryStyle, labelStyle];

    var vectorLayer = new ol.layer.Vector({
      source: new ol.source.Vector({
        url: "../data/lands.geojson",
        format: new ol.format.GeoJSON()
      }),
      style: function (feature) {
        labelStyle.getText().setText(feature.get("name"));
        return style;
      },
      declutter: true
    });

    map.addLayer(vectorLayer);


  </script>
</body>

</html>