【MAPBOX基础功能】22、mapbox根据指定中心点绘制指定公里数的矩形

前言

官网指引，生成accesstoken，下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm=1001.2014.3001.5501](https://blog.csdn.net/weixin_44402694/article/details/125414381?spm=1001.2014.3001.5501)
本文使用官网accesstoken，请自行生成私人token
mapbox根据指定中心点绘制指定公里数的矩形
1
2
3

效果

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>22、根据指定中心点获取指定公里数的矩形</title>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css"
      rel="stylesheet"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
    <script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
        text-decoration: none;
      }
      html,
      body {
        width: 100%;
        height: 100%;
      }
      #map {
        width: 100%;
        height: 100%;
      }
      .btn-list {
        position: fixed;
        top: 100px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      mapboxgl.accessToken =
        'pk.eyJ1Ijoid2FuZ3Rvbmd4dWUiLCJhIjoiY2pzY3E2M2k0MDk3NzN5dDA0Nmtia2h0cCJ9.oP9fEJxOgVzm0dWGvL6tGg'
      const map = new mapboxgl.Map({
        container: 'map', // 容器 id
        style: 'mapbox://styles/mapbox/streets-v11', // mapbox底图
        center: [108, 35], // 初始化中心点
        zoom: 4, // 初始化层级
      })
      map.on('load', () => {
        drawRectangle()
      })
      // 绘制矩形
      function drawRectangle() {
        const point = [108, 35]
        const lineGeoJson = {
          type: 'FeatureCollection',
          features: [this.getRectLatLngHandler(point)],
        }
        map.addSource('circle', {
          type: 'geojson',
          data: {
            type: 'FeatureCollection',
            features: [
              {
                type: 'Feature',
                properties: { size: 5, color: 'red' },
                geometry: { type: 'Point', coordinates: [108, 35] },
              },
            ],
          },
        })
        map.addLayer({
          id: 'circle',
          type: 'circle',
          source: 'circle',
          paint: {
            'circle-radius': ['get', 'size'],
            'circle-color': ['get', 'color'],
            'circle-opacity': 1,
            'circle-stroke-color': 'red',
            'circle-stroke-opacity': 1,
          },
        })
        map.addSource('line', {
          type: 'geojson',
          data: lineGeoJson,
        })
        map.addLayer({
          id: 'line',
          type: 'line',
          source: 'line',
          paint: {
            'line-color': 'red',
            'line-width': 1,
            'line-opacity': 1,
          },
        })
      }
      // 根据传入的经纬度点获取 长1500km 宽1000km的矩形geojson数据
      function getRectLatLngHandler(latlng) {
        const rectWidth = 1500 / 2 // 矩形宽度公里数
        const rectHeight = 1000 / 2 // 矩形高度公里数
        const center = latlng
        const maxRadius = rectWidth
        const minRadius = rectHeight
        const options = {
          steps: 4,
          units: 'kilometers',
        }
        // eslint-disable-next-line no-undef
        const maxCircle = turf.circle(center, maxRadius, options)
        // eslint-disable-next-line no-undef
        const minCircle = turf.circle(center, minRadius, options)
        const leftLon = maxCircle.geometry.coordinates[0][1][0]
        const rightLon = maxCircle.geometry.coordinates[0][3][0]
        const topLat = minCircle.geometry.coordinates[0][0][1]
        const bottomLat = minCircle.geometry.coordinates[0][2][1]
        return {
          type: 'Feature',
          geometry: {
            type: 'Polygon',
            coordinates: [
              [
                [leftLon, topLat],
                [rightLon, topLat],
                [rightLon, bottomLat],
                [leftLon, bottomLat],
                [leftLon, topLat],
              ],
            ],
          },
        }
      }
    </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

相关阅读:
Mac 环境安装 Tomcat
uniapp ui库 px 转 rpx
若依ruoyi-nbcio如何做一个仿钉钉流程设计器的思考
 数据结构之堆
 王道书 P191 思维拓展
 PyTorch：GPU的使用
 Spring Boot 实现文件本地以及OSS上传
 面试官：为什么忘记密码要重置而不是告诉你原密码？
[ C++ ] 抽象类虚函数虚函数表 -- C++多态（1）
SpringBoot定时任务打成jar 引入到新的项目中后并自动执行
原文地址：https://blog.csdn.net/weixin_44402694/article/details/125421357