GIS工具maptalks开发手册(四)02——渲染地图信息框之添加绘制工具 & 获取面的坐标数据信息框进行展示 & 渲染图片的两种方式

效果-获取面的坐标

在这里插入图片描述

效果-渲染图片的2种方式

在这里插入图片描述

代码

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: [114.400196, 36.999478],
      // center:  [-0.1310557164531474,51.502540469671175],
      zoom: 16,
      baseLayer: new maptalks.TileLayer('base', {
        // urlTemplate: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', //黑暗主题
        // urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',  // 官网
        urlTemplate: 'https://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}',// 彩色主题，坐标系同黑暗主题
        subdomains: ['a', 'b', 'c', 'd'],
        attribution: '© OpenStreetMap contributors, © CARTO'
      })
    });

    // 渲染图片的第二种方式：images设置限定区域，左上和右下的位置坐标
    //  ① extent: map.getExtent(),  //  图片大小：居中铺满地图视野
    // ② 
    // let  extent = map.getExtent();

    // // console.log(extent);
    // // console.log(extent.xmax); // -0.0012234410202154322
    // extent.xmax =
    //   extent.xmax -
    //   0.0009520458196448089 -
    //   0.0013465535936347806 -
    //   0.0013146624997943945;
    // extent.xmin = extent.xmin + 0.0008865151057761977 - 0.0013146624997943945;
    // extent.ymax = extent.ymax - 0.0013408400707248802 - 0.0013465535936347806;
    // extent.ymin = extent.ymin + 0.0013416043410643397;

    new maptalks.ImageLayer("images", [{
      // url : './a.jpg',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      // extent: map.getExtent(), // ① 居中铺满
      // extent:extent, // ② 限定区域
      // ③ 具体坐标数值
      extent: [114.40184088740602, 37.002608169667695, 114.4028259092072, 37.00181114116637],  // 左上  右下
      opacity: 1
    }]).addTo(map);

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

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

    drawTool.on('drawend', function (param) {
      console.log('图层类型', param.geometry.type);
      console.log(param.geometry._coordinates);
      if (param.geometry.type === 'Point') {
        var arrData = '';
        arrData = '[' + param.geometry._coordinates.x + ',' + param.geometry._coordinates.y + ']'
        console.log('点的坐标', arrData);
      }
      if (param.geometry.type === 'Polygon') {
        var arr2 = param.geometry._coordinates.map((val) => {
          var arr1 = [];
          console.log(val);
          arr1[0] = val.x;
          arr1[1] = val.y;
          // console.log(arr1);
          return arr1
        })
        console.log('面的坐标', arr2);
        var json = JSON.stringify(arr2);
        console.log('面的坐标json格式', json);
      }

      // 地图信息框
      //     var options = {
      //     'title'     : '绘制点/面的坐标',
      //     'content'   : arrData
      //     'content'   : arr2+''

      //     // 'autoPan': true,
      //     // 'width': 300,
      //     // 'minHeight': 120,
      //     // 'custom': false,
      //     //'autoOpenOn' : 'click',  //set to null if not to open window when clicking on map
      //     //'autoCloseOn' : 'click'
      //   };
      //   var infoWindow = new maptalks.ui.InfoWindow(options);
      //   infoWindow.addTo(map).show();
      layer.addGeometry(param.geometry);
    });

    var items = ['Point', 'LineString', 'Polygon', 'Circle', 'Ellipse', 'Rectangle', 'FreeHandLineString', 'FreeHandPolygon'].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);
    
    // 渲染图片的第一种方式：Marker设置宽高
    var marker1 = new maptalks.Marker(
      [114.400196, 36.999478],
      {
        'symbol': {
          'markerFile': './56.svg',
          'markerWidth': 200,
          'markerHeight': 100,
          'markerDx': 0,
          'markerDy': 0,
          'markerOpacity': 1
        }
      }
    ).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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163

相关阅读:
Vue生命周期与自定义指令
 Spring-底层架构核心概念
 F. Colouring Game（博弈论/sg函数）
为K8S集群准备Ceph存储
 玩以太坊链上项目的必备技能（初识智能合约语言-Solidity之旅一）
python 编程规范有哪些？
Elasticsearch: Field Type
js函数新东西——匿名函数
 Python:实现ternary search三元搜索算法(附完整源码)
ZZULIOJ 2066: 带分数
原文地址：https://blog.csdn.net/weixin_44867717/article/details/128156348