javascript - 如何在平铺图像上绘制圆形或矩形 leaflet.js-6ren

javascript - 如何在平铺图像上绘制圆形或矩形 leaflet.js

转载作者：行者123 更新时间：2023-11-29 15:33:42

我知道使用 leaflet.js 可以在图 block 图像上绘制圆形或矩形。这是一个链接 http://jsfiddle.net/tridip/p6ssbvqj/

leaflet 具有名为 circle() polygon() 等的函数

我的界面就像我有 4 个按钮，一个是圆形、矩形、加载图像、保存图像。

当页面第一次加载时，我将通过 leaflet.js 显示图像，当用户单击圆形或矩形按钮时，我必须允许用户在图像上绘制圆形或矩形。 我应该使用哪个 jquery 或任何 javascript 库来允许在图像上绘制圆形或矩形的问题？

接下来我需要在客户端存储那些圆或矩形的坐标，因为稍后我可以将这些信息保存在数据库中。

第 3 个，当我再次重新加载图像时，我需要在同一图像上和用户绘制的相同位置显示绘制的圆形或矩形。

请指导我如何实现它。我以前从未做过所以不知道我有。请帮我。谢谢

编辑 1

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

1) L.FeatureGroup() 是什么意思？ L.FeatureGroup() 有什么作用？

2) 下面的代码是做什么的？

var drawControl = new L.Control.Draw({
    draw: {
        position: 'topleft',
        polygon: {
            allowIntersection: false,
            drawError: {
                color: '#b00b00',
                timeout: 1000
            },
            shapeOptions: {
                color: '#bada55'
            },
            showArea: true
        },
        polyline: {
            metric: false
        },
        circle: {
            shapeOptions: {
                color: '#662d91'
            }
        }
    },
    edit: {
        featureGroup: drawnItems
    }
});

map.addControl(drawControl);

上面的代码是做什么的。上面的代码似乎试图以编程方式在 map 上绘制控件。可能是我不对。因为如果上面的行与以编程方式在 map 上绘制控件相关，那么应该有坐标或者应该有一些相关的东西但我没有在上面的代码中找到任何东西。所以请告诉我上面的代码在做什么？

3) 如果我需要在 map 上绘制任何形状，那么我是否需要先在 map 上添加任何图层，因为根据您的代码，您首先通过此行添加图层map.addLayer(drawnItems);

4) 下面的代码很清楚

if (type === 'marker') {
   coords = JSON.stringify(layer._latlng);
}

上面的代码将 lat 和 lang 作为坐标存储在变量中，但是你错过了显示另一组代码，我将在其中提供lat 和 lang 详细信息作为坐标，然后代码将根据 lat 和 lang 值在正确位置绘制相同的形状。

请阅读我的所有 4 点并写下答案以消除我的困惑。特别是第 1 点和第 2 点相关代码我不清楚接下来给我代码，我将在其中传递形状名称和 latlang，然后 leaflet api 将相应地绘制形状。

谢谢

最佳答案

作为gusper注意到，Leaflet.draw是一个现成的库，用于在 Leaflet map 上进行交互式绘图。这是他们的演示，稍作修改以显示在 map 上绘制的形状的坐标。

如有必要，您可以将这些坐标存储在数据库中，然后使用 native Leaflet functions从坐标列表中重新绘制这些形状。

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  osm = L.tileLayer(osmUrl, {
    maxZoom: 18,
    attribution: osmAttrib
  }),
  map = new L.Map('map', {
    layers: [osm],
    center: new L.LatLng(-37.7772, 175.2756),
    zoom: 15
  });

var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);

var drawControl = new L.Control.Draw({
  draw: {
    position: 'topleft',
    polygon: {
      allowIntersection: false,
      drawError: {
        color: '#b00b00',
        timeout: 1000
      },
      shapeOptions: {
        color: '#bada55'
      },
      showArea: true
    },
    polyline: {
      metric: false
    },
    circle: {
      shapeOptions: {
        color: '#662d91'
      }
    }
  },
  edit: {
    featureGroup: drawnItems
  }
});
map.addControl(drawControl);

map.on('draw:created', function(e) {
  var type = e.layerType;
  var layer = e.layer;
  var coords;
  console.log(e);
  if (type === 'marker') {
    coords = JSON.stringify(layer._latlng);
  }
  if (type === 'circle') {
    coords = JSON.stringify(layer._latlng) + " " + layer._mRadius;
  }
  if (type === 'rectangle') {
    coords = JSON.stringify(layer._latlngs);
  }
  if (type === 'polygon') {
    coords = JSON.stringify(layer._latlngs);
  }
  if (type === 'polyline') {
    coords = JSON.stringify(layer._latlngs);
  }
  document.getElementById("coords").innerHTML = coords;
  drawnItems.addLayer(layer);
});

<head>
  <title>Leaflet Draw</title>

  <link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.css" />
  <link rel="stylesheet" href="http://leaflet.github.io/Leaflet.draw/leaflet.draw.css" />

  <!--[if lte IE 8]>
		<link rel="stylesheet" href="lib/leaflet/leaflet.ie.css" />
		<link rel="stylesheet" href="leaflet.draw.ie.css" />
	<![endif]-->

  <script src="http://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.js"></script>
  <script src="http://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>
</head>

<body>
  <div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>
  <div id="coords" style="position: fixed; bottom: 0; right: 0; width: 50%; height: 20%; z-index: 99; background-color: white; text-wrap: "></div>