简体   繁体   English

如何将许多带有自定义文本的标记添加到 openlayers 5

[英]How to add many markers with custom text to openlayers 5

I'm using openlayers v5.3.0, and actually loading a map with many markers (in the snippet are a small subset, in my code there are thousands).我正在使用 openlayers v5.3.0,并且实际上加载了一个带有许多标记的地图(在代码片段中是一个小的子集,在我的代码中有数千个)。

What i want to do is to customized those markers, styling them with differents colors and text.我想要做的是自定义这些标记,用不同的颜色和文字来设计它们。

How can i customize the text and the color of each marker added to the map?如何自定义添加到地图的每个标记的文本和颜色?

 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());
 <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>

You would need to create marker styles for each color you wish to use, and a text style, then use a style function to select the what is appropriate for each feature您需要为要使用的每种颜色和文本样式创建标记样式,然后使用样式功能选择适合每个功能的内容

 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());
 <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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM