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

link管理
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
相关文章推荐
高大的大象 · 西南交通大学与中国电建集团成都勘测设计研究院 ...· 1 周前 ·
叛逆的沙滩裤 · MSP430F149: IAR ...· 1 月前 ·
勤奋的番茄 · “手机直连卫星”背景下，移动与卫星运营商的关 ...· 1 月前 ·
温文尔雅的罐头 · myF5· 1 月前 ·
贪玩的山楂 · 你不知道的大熊猫故事——熊猫“北川”_熊猫频道· 4 月前 ·
官网指引，生成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根据指定中心点绘制指定公里数的矩形
<!DOCTYPE html>
<html lang="en">
    <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>
      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>
    <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>
 增加了对地图上的绘图和编辑功能的支持。 
需要 。 兼容版本记录在package.json中
在NPM上，此软件包最近已从mapbox-gl-draw移至@mapbox/mapbox-gl-draw
npm install @mapbox/mapbox-gl-draw
Draw随CSS一起提供，请确保将其包含在构建中。
Typescript定义文件可作为包的一部分提供。
 npm install @types/mapbox__mapbox-gl-draw
使用模块时
import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css'
 使用CDN时
< link rel =' stylesheet ' href =' https://api.mapbox.com/mapbox
面积平方限制可选
npm install --save @mapbox/mapbox-gl-draw mapbox-gl-draw-rectangle-restrict-area
 import MapboxDraw from "@mapbox/mapbox-gl-draw" ;
import DrawRectangle , {
  DrawStyles ,
} from "mapbox-gl-draw-rectangle-restrict-area" ;
const map = new mapboxgl . Map ( {
  container : "map" , // container id
  style : "mapbox://styles/mapbox/stree
				mapbox自定义绘制工具如何使用mapbox绘制常用的工具需要引入的资源创建div引入mapbox实例设置circle工具创建 point 绘制工具创建line绘制工具创建polygon（多边形）绘制工具创建 rectangle（矩形）绘制工具清除图层（layer）和资源(source)
如何使用mapbox绘制常用的工具
每次在网上查资源，尼玛脑袋疼，好多大神写的啥玩意呀。我们知道，操作地图不外乎就是一些事件，其实mapbox有一些关于绘制工具的一些插件，也可以自己定义绘制工具。
我这里的demo，就是
				draw-tool
Draw vector elements online (mapbox-gl + mapbox-gl-draw + nebula.gl)
在地图中绘制编辑点线面等矢量要素
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
1按钮实现选择是自定义画矩形框还是指定大小的矩形框：
//在矩形中分两种：1 地图上画矩形 2 指定宽高
switch (DrawingInfo.Draw_rectWay)
    case RectWay.RectDraw:
            _mapControl.Action = SuperAction.C
真实值与预测值之间的关系为：
准确率（precision）和召回率（recall）作为统计值，各自的计算方式：
P=TPTP+FPP=\frac{TP}{TP+FP}P=TP+FPTPR=TPTP+FNR=\frac{TP}{TP+FN}R=TP+FNTP
准确率 PPP 给出了“预测为真值的样本中确实有多少比例为真值”，召回率 RRR 给出了“本来就是真值的样本模型预测出...
				1. 计算各个类别的map
1.1 方法1: 直接计算, 仅支持voc 数据集与 custom 数据集
使用如下命令直接计算各个分类的map , 使用的图片为 config 配置中test中的数据集评估
python tools/test.py work_dirs/faster_rcnn_r50_fpn_1x_coco.py work_dirs/latest.pth --eval mAP
# 参数说明
- work_dir/faster_rcnn_r50_fpn_1x_coco.py: 模型配置文件