openlayers中的动态文本覆盖

Question

我需要根据地图的缩放级别和中心坐标以编程方式显示多达 600 个单独的 6 位文本标签。我当前显示标签的功能是：

function addLabel(lon, lat) {
    var pos = ol.proj.fromLonLat([lon, lat]);
    var maptxt = new ol.Overlay({
        position: pos,
        element: document.getElementById('txt')
      });
      map.addOverlay(maptxt);
}

是动态创建 600 个 HTML 元素的唯一方法，还是有更好的替代方法在地图上显示 6 位值？

Answer 1

制作文本功能的示例（Mike 在他对您的问题的评论中提出的建议）

来自Vector Labels example in the documentation的修改代码

// Points
function labelStyleFunction(feature, resolution) {
  return new ol.style.Style({
    text: new ol.style.Text({
      text: feature.get('name'),
      fill: new ol.style.Fill({
        color: "#aa3300"
      }),
      stroke: new ol.style.Stroke({
        color: "#ffffff",
        width: 3
      }),
    }) 
  });
}
var vectorSource = new ol.source.Vector({});
var vectorLabels = new ol.layer.Vector({ // VectorLayer({
  source: vectorSource,
  style: labelStyleFunction
});
vectorLabels.getSource().addFeatures(features);
map.addLayer(vectorLabels);

制作特征的例子：

for (var i = 0; i < locations.length; ++i) {
  var coordinates = ol.proj.fromLonLat([locations[i].LONGITUDE, locations[i].LATITUDE]);
  var feature = new ol.Feature(new ol.geom.Point(coordinates));
  feature.set("name", locations[i].ATM_ID);
  features.push(feature);
}

proof of concept fiddle

代码 sn-p：

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([155, -35.563910]),
    zoom: 4
  })
});

var locations = [{
    LATITUDE: -31.563910,
    LONGITUDE: 147.154312,
    ATM_ID: "ID1"
  },
  {
    LATITUDE: -33.718234,
    LONGITUDE: 150.363181,
    ATM_ID: "ID2"
  },
  {
    LATITUDE: -33.727111,
    LONGITUDE: 150.371124,
    ATM_ID: "ID3"
  },
  {
    LATITUDE: -33.848588,
    LONGITUDE: 151.209834,
    ATM_ID: "ID4"
  },
  {
    LATITUDE: -33.851702,
    LONGITUDE: 151.216968,
    ATM_ID: "ID5"
  },
  {
    LATITUDE: -34.671264,
    LONGITUDE: 150.863657,
    ATM_ID: "ID6"
  },
  {
    LATITUDE: -35.304724,
    LONGITUDE: 148.662905,
    ATM_ID: "ID7"
  },
  {
    LATITUDE: -36.817685,
    LONGITUDE: 175.699196,
    ATM_ID: "ID8"
  },
  {
    LATITUDE: -36.828611,
    LONGITUDE: 175.790222,
    ATM_ID: "ID9"
  },
  {
    LATITUDE: -37.750000,
    LONGITUDE: 145.116667,
    ATM_ID: "ID10"
  },
  {
    LATITUDE: -37.759859,
    LONGITUDE: 145.128708,
    ATM_ID: "ID11"
  },
  {
    LATITUDE: -37.765015,
    LONGITUDE: 145.133858,
    ATM_ID: "ID12"
  },
  {
    LATITUDE: -37.770104,
    LONGITUDE: 145.143299,
    ATM_ID: "ID13"
  },
  {
    LATITUDE: -37.773700,
    LONGITUDE: 145.145187,
    ATM_ID: "ID14"
  },
  {
    LATITUDE: -37.774785,
    LONGITUDE: 145.137978,
    ATM_ID: "ID15"
  },
  {
    LATITUDE: -37.819616,
    LONGITUDE: 144.968119,
    ATM_ID: "ID16"
  },
  {
    LATITUDE: -38.330766,
    LONGITUDE: 144.695692,
    ATM_ID: "ID17"
  },
  {
    LATITUDE: -39.927193,
    LONGITUDE: 175.053218,
    ATM_ID: "ID18"
  },
  {
    LATITUDE: -41.330162,
    LONGITUDE: 174.865694,
    ATM_ID: "ID19"
  },
  {
    LATITUDE: -42.734358,
    LONGITUDE: 147.439506,
    ATM_ID: "ID20"
  },
  {
    LATITUDE: -42.734358,
    LONGITUDE: 147.501315,
    ATM_ID: "ID21"
  },
  {
    LATITUDE: -42.735258,
    LONGITUDE: 147.438000,
    ATM_ID: "ID22"
  },
  {
    LATITUDE: -43.999792,
    LONGITUDE: 170.463352,
    ATM_ID: "ID23"
  }
];

var features = [];
var i;

for (var i = 0; i < locations.length; ++i) {
  var coordinates = ol.proj.fromLonLat([locations[i].LONGITUDE, locations[i].LATITUDE]);
  var feature = new ol.Feature(new ol.geom.Point(coordinates));
  /* feature.setProperties({
    name: locations.ATM_ID
  }) */
  feature.set("name", locations[i].ATM_ID);
  features.push(feature);
}
// Points
function labelStyleFunction(feature, resolution) {
  return new ol.style.Style({
    text: new ol.style.Text({
      text: feature.get('name'),
      fill: new ol.style.Fill({
        color: "#aa3300"
      }),
      stroke: new ol.style.Stroke({
        color: "#ffffff",
        width: 3
      }),
    })
  });
}
var vectorSource = new ol.source.Vector({});
var vectorLabels = new ol.layer.Vector({ // VectorLayer({
  source: vectorSource,
  style: labelStyleFunction
});
vectorLabels.getSource().addFeatures(features);
map.addLayer(vectorLabels);

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map,
.map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<title>OpenLayers example</title>
<div id="map"></div>