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: '© OpenStreetMap contributors, © CARTO'
      })
    });

    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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

相关阅读:
关于spie官网上的latex模版
生成模型评价指标 D-1，distinct-n
什么是专线网络？互联网专线为什么贵
pyhton 类动态绑定函数
【手把手反内卷】开创全新AI多模态任务一视听分割：代码实践、优化教程（二）
git的详细使用
带你初识微服务
python的os模块常用函数介绍
Real-Time Rendering——Chapter 10Local Illumination局部照明
HTML+CSS静态网页设计：(房地产网站设计与实现6页)

原文地址：https://blog.csdn.net/weixin_44867717/article/details/128140384