0

我尝试在这里制作一个像这个例子一样的交互式平面图，但我使用的是 php。这些图像是非地理的。至于现在，我可以像这样将平面图图像添加为地图中的背景。

（这里）

但现在我正在寻找如何绘制多边形、线条等并对其进行编辑的方法（目前它显示错误，L.Control.Draw 不是构造函数）。这是我的代码

map-configure.js 和 mapConfigure.php

$(document).ready(function() {

      //get image width and height 
      var size = document.getElementById("floorplan_size").value.split(',');

      //get floorplan image  (width X height)
      var width = size[0];
      var height = size[1];

      //floorplan image as background in the map
      var imageUrl = "data:image/jpeg;base64," + $("#floorplan_data").val();
      var mymap = L.map("mapL", {
        crs: L.CRS.Simple,
        minZoom: -4
      }); //CRS simple referring to normal coordinate value
      var bounds = [
        [0, 0],
        [height, width]
      ]; // height and width of image is set
      mymap.fitBounds(bounds);
      var image = L.imageOverlay(imageUrl, bounds).addTo(mymap);

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(mymap);

      var drawnItems = new L.FeatureGroup(); // FeatureGroup is to store editable layers
      mymap.addLayer(drawnItems);

      var drawControl = new L.Control.Draw({
        draw: {
          polygon: {
            shapeOptions: {
              color: 'purple' //Color for polygon
            },
            allowIntersection: false,
            drawError: {
              color: 'orange',
              timeout: 1000
            },
            showArea: true,
            metric: true //Can set the measurement units to not be metric (to show acres instead) by setting the metric option to false
          },
          polyline: {
            shapeOptions: {
              color: 'red' //Color for polyline
            },
          },
          rect: {
            shapeOptions: {
              color: 'green' //Color for rectangle
            },
          },
          circle: {
            shapeOptions: {
              color: 'steelblue' //Color for circle
            },
          },
        },

        edit: {
          featureGroup: drawnItems
        }
      });
      mymap.addControl(drawControl);

      mymap.on('draw:created', function(event) {
        var layer = event.layer,
          feature = layer.feature = layer.feature || {}; // Intialize layer.feature

        feature.type = feature.type || "Feature"; // Intialize feature.type
        var props = feature.properties = feature.properties || {}; // Intialize feature.properties
        drawnItems.addLayer(layer);
      });
    }
<!DOCTYPE html>
<html lang="en" data-textdirection="ltr" class="loading">

<head>
  <!-- Leaflet and Leaflet Draw -->

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>

</head>

<body>

  <div class="card-block card-dashboard ">
    <input type="hidden" id="floorplan_data" name="floorplan_data" value=< ?php echo $_POST[ 'floorplan_data']?> >
    <input type="hidden" id="floorplan_size" name="floorplan_size" value= <?php  echo $_POST['floorplan_size']?> >
  </div>

  <div id="mapL"> </div>

  <script type="text/javascript" src="leaflet/leaflet.js"></script>
  <script type="text/javascript" src="assets/js/map-configure.js"></script>

</body>

</html>

任何提示将不胜感激。

4

0 回答 0