四章-39-渲染沿街道方向的街道名称标签
2020-04-21 本文已影响0人
彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers 5.3.x api。
源码 见 1039.html ，对应的 官网示例 https://openlayers.org/en/latest/examples/zoomslider.html?q=ZoomSlider
image.png
ol.style.Text:placement
有两种值：point和line
当使用line类型时，geometry必须是以下几种类型之一：lineString、polygon、multiLineString、multiPolygon
image.png
<!DOCTYPE html>
<html>
<head>
<title>渲染沿街道方向的街道名称标签</title>
<link rel="stylesheet" href="../include/ol.css" type="text/css" />
<script src="../include/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
var style = new ol.style.Style({
stroke: new ol.style.Stroke({
color: "#319FD3",
width: 1
}),
text: new ol.style.Text({
font: 'bold 11px "Open Sans", "Arial Unicode MS", "sans-serif"',
placement: 'line',//关键点
fill: new ol.style.Fill({
color: 'red'
})
})
});
var viewExtent = [1817379, 6139595, 1827851, 6143616];
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
new ol.layer.Vector({
declutter: true,
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: '../data/vienna-streets.geojson'
}),
style: function (feature) {
style.getText().setText(feature.get('name'));//设置道路的样式
return style;
}
})],
target: 'map',
view: new ol.View({
extent: viewExtent,
center: ol.extent.getCenter(viewExtent),
zoom: 17,
minZoom: 14
})
});
</script>
</body>
</html>
