首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用自定义文本向openlayers添加许多标记5

如何使用自定义文本向openlayers添加许多标记5
EN

Stack Overflow用户
提问于 2019-03-01 07:57:45
回答 1查看 0关注 0票数 0

我正在使用openlayers v5.3.0,并且实际上加载了一个包含许多标记的地图(在代码片段中是一个小子集,在我的代码中有数千个)。

我想要做的是定制这些标记,使用不同的颜色和文本设置样式。

如何自定义添加到地图中的每个标记的文本和颜色?

代码语言:javascript
复制
var baseMapLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});
var map = new ol.Map({
  target: 'map-canvas',
  layers: [baseMapLayer],
  view: new ol.View()
});
var markers = [];

markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.483713800000032, 41.901777])
  ),
  name: '492,00'
}));


markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.5048055, 41.8968191])
  ),
  name: '289,50'
}));


markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.48060190000001, 41.9077133])
  ),
  name: '1606,50'
}));


markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.498839999999973, 41.9000227])
  ),
  name: '324,00'
}));

var vectorSource = new ol.source.Vector({
  features: markers
});
var markerVectorLayer = new ol.layer.Vector({
  source: vectorSource,
});

map.addLayer(markerVectorLayer);
map.getView().fit(vectorSource.getExtent(), map.getSize());

代码语言:javascript
复制
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

<div id="map-canvas" style="width: 400px; height: 400px"></div>
EN

回答 1

Stack Overflow用户

发布于 2019-03-01 16:59:49

您需要为要使用的每种颜色和文本样式创建标记样式,然后使用样式函数选择适合每个要素的样式

代码语言:javascript
复制
var baseMapLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});
var map = new ol.Map({
  target: 'map-canvas',
  layers: [baseMapLayer],
  view: new ol.View()
});
var markers = [];

markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.483713800000032, 41.901777])
  ),
  name: '492,00'
}));


markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.5048055, 41.8968191])
  ),
  name: '289,50'
}));


markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.48060190000001, 41.9077133])
  ),
  name: '1606,50'
}));


markers.push(new ol.Feature({
  geometry: new ol.geom.Point(
    ol.proj.fromLonLat([12.498839999999973, 41.9000227])
  ),
  name: '324,00'
}));

var colors = ['red', 'green', 'blue', 'black'];
var iconStyles = [];

colors.forEach(function(color) {
  iconStyles.push(new ol.style.Style({
    image:  new ol.style.Circle({
        radius: 6,
        stroke: new ol.style.Stroke({
            color: '#fff'
        }),
        fill: new ol.style.Fill({
            color: color
        })
    })
  }))
});

var labelStyle = new ol.style.Style({
    text: new ol.style.Text({
        font: '12px Calibri,sans-serif',
        overflow: true,
        fill: new ol.style.Fill({
            color: '#000'
        }),
        stroke: new ol.style.Stroke({
            color: '#fff',
            width: 3
        }),
        textBaseline: 'bottom',
        offsetY: -8
    })
});

var vectorSource = new ol.source.Vector({
  features: markers
});
var markerVectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style: function(feature) {
      var name = feature.get('name');
      var iconStyle = iconStyles[parseInt(name)%colors.length];
      labelStyle.getText().setText(name);
      return [iconStyle, labelStyle];
  }
});

map.addLayer(markerVectorLayer);
map.getView().fit(vectorSource.getExtent(), map.getSize());

代码语言:javascript
复制
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>

<div id="map-canvas" style="width: 400px; height: 400px"></div>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/-100008968

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档