如何将许多带有自定义文本的标记添加到openlayers 5 [英] How to add many markers with custom text to openlayers 5
本文介绍了如何将许多带有自定义文本的标记添加到openlayers 5的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用openlayers v5.3.0,实际上是在加载带有许多标记的地图(代码段中是一小部分,在我的代码中有数千个).
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).
我想做的是自定义这些标记,并用不同的颜色和文字设置样式.
What i want to do is to customized those markers, styling them with differents colors and text.
如何自定义添加到地图上的每个标记的文本和颜色?
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>
这篇关于如何将许多带有自定义文本的标记添加到openlayers 5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文