[英]OpenLayers3 add Text over Circle
After searching a lot, I finally managed to find a block of code that allows me to draw a circle on the map. 经过大量搜索后,我终于找到了一段代码,可以在地图上画一个圆。
HTML: HTML:
<div id="mapHolder"></div>
CSS: CSS:
#mapHolder{
width: 100%;
height: 200px;
background-color: #ccc;
}
JavaScript: JavaScript:
$(document).ready(function(){
var map = new ol.Map({
target: 'mapHolder',
interactions: ol.interaction.defaults({mouseWheelZoom:false}),
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.transform([parseFloat(8.680239), parseFloat(50.114034)], 'EPSG:4326','EPSG:3857'),
zoom: 13
})
});
var vectorSource = new ol.source.Vector();
var circleLayer = new ol.layer.Vector({
source: vectorSource
});
map.addLayer(circleLayer);
var coordinate = ol.proj.transform([parseFloat(8.680239), parseFloat(50.114034)], 'EPSG:4326','EPSG:3857');
vectorSource.addFeature(new ol.Feature(new ol.geom.Circle(coordinate, 2000)));
});
this is the fiddle: https://jsfiddle.net/79hjbxw9/ 这是小提琴: https : //jsfiddle.net/79hjbxw9/
1) How can I put a text on the Circle with the title "Approximate Area"; 1)如何在圆上放置标题为“近似面积”的文本; and also be able to define the color and font. 并能够定义颜色和字体。
2) also I want to change the color and thickness of Circle border. 2)我也想改变圆形边框的颜色和粗细。
You can get that using a style on your vector layer. 您可以在矢量层上使用样式来获得该效果。
Declare your style 宣扬你的风格
var myStlye = new ol.style.Style ({
fill: new ol.style.Fill({
color: 'rgba(255,100,50,0.5)'
}),
stroke: new ol.style.Stroke({
color: 'blue',
width: 3
}),
text: new ol.style.Text({
textAlign: "Start",
textBaseline: "Middle",
font: 'Normal 12px Arial',
text: 'Approximate Area',
fill: new ol.style.Fill({
color: '#ffa500'
}),
stroke: new ol.style.Stroke({
color: '#000000',
width: 3
}),
offsetX: -45,
offsetY: 0,
rotation: 0
})
});
and then attach it to your layer 然后将其附加到您的图层
var circleLayer = new ol.layer.Vector({
style:myStlye,
source: vectorSource
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.