GIS工具maptalks开发手册(五)01-用JSON载入地图——json格式绘制多个面之基础版

效果-json渲染图层基础版

在这里插入图片描述

代码

index.html

DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JSON序列化 - 用JSON载入地图title>
<style type="text/css">
  html,
  body {
    margin: 0px;
    height: 100%;
    width: 100%;
  }

  .container {
    width: 900px;
    height: 500px;
    margin: 50px;
  }

  #json {
    position: fixed;
    background-color: rgba(13, 13, 13, 0.5);
    padding: 10px 10px 10px 10px;
    font: 13px bold sans-serif;
    color: #fff;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 85px;
    overflow: hidden
  }
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 mapJSON = {
      "version": "1.0",
      "options": {
        "center": {
          "x": 114.40178858433023,
          "y": 37.00265895531547
        },
        "zoom": 19
      },
      "baseLayer": {
        "type": "TileLayer",
        "id": "base",
        "options": {
          "urlTemplate": "http://{s}.tile.osm.org/{z}/{x}/{y}.png",
          "subdomains": ["a", "b", "c"]
        }
      },
      "layers": [{
        "type": "VectorLayer",
        "id": "v",
        "geometries": [{
          "feature": {
            "type": "Feature",
            "geometry": {
              "type": "Polygon",
              "coordinates": [[114.40154986772791, 37.002687616434656], [114.40156562570587, 37.00268788429551], [114.40156529042974, 37.00268440210405], [114.40154919717565, 37.0026841342432]]
            }
          },

          symbol: [{
            lineColor: '#34495e',
            lineWidth: 2,
            polygonFill: '#fef102',
            polygonOpacity: 0.6
          },
          {
            'markerDy': 20,
            'textFaceName': 'sans-serif',
            'textName': '李世民',
            'textFill': '#000',
            'textHorizontalAlignment': 'center',
            'textSize': 16,
            'textDx': 0,
            'textDy': 16,
          }]
        }, {
          "feature": {
            "type": "Feature",
            "geometry": {
              "type": "Polygon",
              "coordinates": [[114.40178858433023, 37.00265895531547], [114.40180333647982, 37.00265895531547], [114.40180333647982, 37.002656544566634], [114.40180735979334, 37.002656276705665], [114.40180769506946, 37.002647705153635], [114.4017882490541, 37.00264743729261], [114.4017882490541, 37.002647705153635]]
            }
          },

          symbol: [{
            lineColor: '#34495e',
            lineWidth: 2,
            polygonFill: '#01a2e6',
            polygonOpacity: 0.6
          },
          {
            'markerDy': 20,
            'textFaceName': 'sans-serif',
            'textName': '曹操',
            'textFill': '#000',
            'textHorizontalAlignment': 'center',
            'textSize': 16,
            'textDx': 0,
            'textDy': 7,
          }]

        }, {
          "feature": {
            "type": "Feature",
            "geometry": {
              "type": "Polygon",
              "coordinates": [[114.40157836619869, 37.00256520391568], [114.40158440116898, 37.00256520391568], [114.4015833953406, 37.00257511478341], [114.40171147082106, 37.00257457906085], [114.40171180609718, 37.0025769898123], [114.40177953187481, 37.00257752553486], [114.40177919659868, 37.00256466819306], [114.40178389046446, 37.00256520391568], [114.40178422574058, 37.00255984668931], [114.40177852604643, 37.00255984668931], [114.4017781907703, 37.002548060790076], [114.40171415303007, 37.00254752506734], [114.40171281192556, 37.00255020368101], [114.40158440116898, 37.00254913223554], [114.40158406589285, 37.00255984668931], [114.40157836619869, 37.00255931096669]]
            }
          },

          symbol: [{
            lineColor: '#34495e',
            lineWidth: 2,
            polygonFill: '#01a2e6',
            polygonOpacity: 0.6
          },
          {
            'markerDy': 20,
            'textFaceName': 'sans-serif',
            'textName': '朱元璋',
            'textFill': '#000',
            'textHorizontalAlignment': 'center',
            'textSize': 16,
            'textDx': 0,
            'textDy': 7,
          }]
        }]
      }]
    };

    var map = maptalks.Map.fromJSON('map', mapJSON);
    var layer = map.getLayer('v');
    var drawTool = new maptalks.DrawTool({
      mode: 'Point'
    }).addTo(map).disable();

    drawTool.on('drawend', function (param) {
      // console.log(param.geometry);
      console.log('面的坐标', param.geometry._coordinates);
      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);
    // document.getElementById('json').innerHTML = JSON.stringify(mapJSON);
  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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186

相关阅读:
区块链实训教程(6)--开发、编译、部署、调用HelloWorld合约
 【算法|动态规划No.10】leetcode LCR 089. 打家劫舍 & LCR 090. 打家劫舍 II
seata的快速入门
 TOGAF 架构内容框架
 ACL 2022 RE两篇
 第十八章：Swing自述
 前端flex布局
 SharePreference与MMKV对比
 深入理解WebSocket，让你入门音视频
 诈骗对象逐渐年轻化，“00”后为何成黑平台青睐对象？
原文地址：https://blog.csdn.net/weixin_44867717/article/details/128156370