GIS工具maptalks开发手册(二)01-11——渲染文字及参数注释

news2024/12/22 8:53:06

GIS工具maptalks开发手册(二)01-11——渲染文字及参数注释

效果

在这里插入图片描述

代码

index.html

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图形样式 - 文字标注</title>
<style type="text/css">
  html,
  body {
    margin: 0px;
    height: 100%;
    width: 100%;
  }

  .container {
    width: 900px;
    height: 500px;
    margin: 50px;
  }
</style>
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>

<body>

  <div id="map" class="container"></div>
  <script>

    var map = new maptalks.Map('map', {
      center: [-0.113049, 51.49856],
      zoom: 14,
      baseLayer: new maptalks.TileLayer('base', {
        urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',
        subdomains: ['a', 'b', 'c', 'd'],
        attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
      })
    });

    var layer = new maptalks.VectorLayer('vector').addTo(map);

    var text = new maptalks.Marker(
      [-0.113049, 51.49856],
      {
        'properties': { // 属性
          'name': '文字显示'
        },
        'symbol': {
          'textFaceName': 'sans-serif', // 文本面名字
          // 文本名字
          'textName': '{name}',          //value from name in geometry's properties（几何图形特性中名称的值）
          // 文本加粗
          'textWeight': 'normal', //'bold', 'bolder'
          // 文本样式
          'textStyle': 'normal', //'italic', 'oblique'
          // 文本字体大小
          'textSize': 32,
          // 文本字体
          'textFont': null,     //same as CanvasRenderingContext2D.font, override textName, textWeight and textStyle  （与CanvasRenderingContext2D相同。字体，覆盖textName、textWeight和textStyle）
          // 文本填充颜色
          'textFill': 'blue',
          // 文本透明度
          'textOpacity': 1,
          // 文本光晕填充
          // 'textHaloFill'      : 'red',
          // 文本光晕圆角
          'textHaloRadius': 5,
          // 文本包裹宽度
          'textWrapWidth': null,
          // 文本包裹字符
          'textWrapCharacter': '\n',
          // 文本行距
          'textLineSpacing': 0,
          'textDx': 0,
          'textDy': 0,
          // 文本水平对齐
          'textHorizontalAlignment': 'middle', //left | middle | right | auto
          // 文本垂直对齐
          'textVerticalAlignment': 'middle',   // top | middle | bottom | auto
          // 文本对齐方式
          'textAlign': 'center' //left | right | center | auto
        }
      }
    ).addTo(layer);

  </script>
</body>

</html>