四章-39-渲染沿街道方向的街道名称标签

作者: 彩云飘过 | 来源:发表于2020-04-21 11:26 被阅读0次

四章-39-渲染沿街道方向的街道名称标签
2023-03-02
板桥
今日份夜空
CSS选择器
开封街道名称的古往今来
css选择器
CSS选择器
CSS选择器
十二，标签选择器

本文基于腾讯课堂老胡的课《跟我学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>