Question

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

传单具有名为circle() polygon() etc

的功能

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

当第一次加载页面时，我将通过leaflet.js显示图像，当用户点击圆形或矩形按钮时，我必须允许用户在图像上绘制一个圆形或矩形。 the question which jquery or any javascript library i should use which will allow to draw a circle or rectangle on image ?

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

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

请指导我如何实现它。我从来没有做过，所以我不知道。请帮我。感谢

编辑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);

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

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

4）以下代码清晰

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

上面的代码将lat和lang存储为变量中的坐标但你已经推荐显示我将提供的另一组代码 lat和lang细节作为坐标然后代码将在正确的位置绘制相同的形状，如lat＆amp;郎值。

请阅读我的全部4分，请写出答案以消除我的困惑。特别指出1＆amp; 2相关代码对我来说不清楚然后给我代码，我将传递形状名称和latlang然后传单api将相应地绘制形状。

感谢

Answer 1

如gusper所述，Leaflet.draw是一个现成的图书馆，用于在Leaflet地图上进行交互式绘图。这是他们的演示稍作修改，以显示在地图上绘制的形状的坐标。

如有必要，您可以将这些坐标存储在数据库中，然后使用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>

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

编辑1

1 个答案: