GIS工具maptalks开发手册(二)03-01——示例之添加绘制工具、渲染文字和多个面

最新推荐文章于 2024-07-29 10:14:18 发布

viceen

最新推荐文章于 2024-07-29 10:14:18 发布

阅读量434

点赞数

分类专栏：可视化文章标签： javascript 前端 java

本文链接：https://blog.csdn.net/weixin_44867717/article/details/128140499

版权

可视化专栏收录该内容

130 篇文章 79 订阅

订阅专栏

GIS工具maptalks开发手册(二)03-01——示例之添加绘制工具、渲染文字和多个面

效果

在这里插入图片描述

代码

index.html

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>图层 - VectorLayer: 批量添加图形</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 center = new maptalks.Coordinate(-0.113049, 51.498568);
    var map = new maptalks.Map('map', {
      center: center,
      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: '© <a href="http://osm.org">OpenStreetMap</a>  contributors, © <a href="https://carto.com/">CARTO</a> '
      })
    });

    var marker = new maptalks.Marker(
      center, //.add(-0.018,0.007).toArray(),
      {
        symbol: {
          'textFaceName': '"microsoft yahei",arial,sans-serif',
          'textName': 'MapTalks',
          'textFill': '#34495e',
          'textHorizontalAlignment': 'right',
          'textSize': 40
        }
      }
    );

    var text = new maptalks.Marker(
      [-0.120099, 51.49956],
      {
        '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
        }
      }
    );
    var text2 = new maptalks.Marker(
      [-0.125099, 51.50780],
      {
        '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
          '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
        }
      }
    );
    var text3 = new maptalks.Marker(
      [-0.135990, 51.49876],
      {
        'properties': {
          'name': '水泵房'
        },
        'symbol': {
          'textFaceName': 'sans-serif',
          'textName': '{name}',          //value from name in geometry's properties
          'textWeight': 'normal', //'bold', 'bolder'
          'textStyle': 'normal', //'italic', 'oblique'
          'textSize': 24,
          'textFont': null,     //same as CanvasRenderingContext2D.font, override textName, textWeight and 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
        }
      }
    );


    var polygon2 = new maptalks.Polygon([
      [-0.141049, 51.511500],
      [-0.107049, 51.511500],
      [-0.107049, 51.503800],
      [-0.141049, 51.503800],
      [-0.141049, 51.511500]
    ], {
      symbol: {
        lineColor: '#34495e',
        lineWidth: 2,
        polygonFill: 'rgb(135,196,240)',
        polygonOpacity: 0.6
      }
    });
    var polygon = new maptalks.Polygon([
      [
        [-0.131049, 51.502500],
        [-0.107049, 51.502500],
        [-0.107049, 51.497500],
        [-0.131049, 51.497500],
        [-0.131049, 51.502500]
      ]
    ], {
      symbol: {
        lineColor: '#34495e',
        lineWidth: 2,
        polygonFill: 'rgb(135,196,240)',
        polygonOpacity: 0.6
      }
    });
    var polygon3 = new maptalks.Polygon([
      [
        [-0.141049, 51.502500],
        [-0.131920, 51.502500],
        [-0.131820, 51.494500],
        [-0.141049, 51.494500],
        [-0.141049, 51.502500]
      ]
    ], {
      symbol: {
        lineColor: '#34495e',
        lineWidth: 2,
        polygonFill: 'rgb(135,196,240)',
        polygonOpacity: 0.6
      }
    });



    var drawTool = new maptalks.DrawTool({
      mode: 'Point'
    }).addTo(map).disable();

    // 添加绘制工具
    drawTool.on('drawend', function (param) {
      console.log(param.geometry);
      layer.addGeometry(param.geometry);
    });

    var items = ['Point', 'LineString', 'Polygon'].map(function (value) {
      return {
        item: value,
        click: function () {
          drawTool.setMode(value).enable();
        }
      };
    });

    var toolbar = new maptalks.control.Toolbar({
      items: [
        {
          item: 'Shape/绘制',
          children: items
        },
        {
          item: 'Disable/关闭',
          click: function () {
            drawTool.disable();
          }
        },
        {
          item: 'Clear/清空',
          click: function () {
            layer.clear();
          }
        }
      ]
    }).addTo(map);

    var layer = new maptalks.VectorLayer('vector')
      .addGeometry([marker, polygon2, polygon, polygon3, text, text2, text3])
      .addTo(map);

  </script>
</body>

</html>