Question

我使用LeafletJS制作自定义实验室布局图，我计划放入一些矩形图层来显示区域是否正在使用中。目前我有一个使用坐标来定义每个形状的工作测试用例，但有没有办法可以创建一个标准尺寸的形状对象，可以调用它并输入一个坐标以使其自身居中？

如果有帮助，这是Angular控制器的当前代码。

function showMap() {
  var map = L.map('mapid', {
      crs: L.CRS.Simple,
      maxZoom: 4,
      attributionControl: false
    }).setView([0, 0], 1),
    southWest = map.unproject([0, 4096], map.getMaxZoom()),
    northEast = map.unproject([4096, 0], map.getMaxZoom()),
    bounds = L.latLngBounds(southWest, northEast);

  L.tileLayer('images/4231/{z}/{x}/{y}.png', {
    minZoom: 1,
    maxZoom: 4,
    center: [0, 0],
    noWrap: true,
    bounds: bounds
  }).addTo(map);

  var testBench = [{
    number: "1A1",
    coord1: "-48.6",
    coord2: "6",
    coord3: "-81.4",
    coord4: "71",
    inUse: true
  }, {
    number: "1A2",
    coord1: "-48.5",
    coord2: "71",
    coord3: "-81",
    coord4: "137",
    inUse: false
  }, {
    number: "1A3",
    coord1: "-48.5",
    coord2: "137",
    coord3: "-81",
    coord4: "202",
    inUse: true
  }];

  angular.forEach(testBench, function(item, index) {
    var location = [
        [item.coord1, item.coord2],
        [item.coord3, item.coord4]
      ],
      color;
    switch (item.inUse) {
      case true:
        color = "red"
        break;
      case false:
        color = "green"
        break;
    }
    L.rectangle(location, {
      color: color,
      weight: 1
    }).bindPopup("Bench Number is: " + item.number).addTo(map);
  })
  map.setMaxBounds(bounds);
}

最终，工作台信息将从数据库而不是变量中提取，并且将有数百个工作台，因此我希望尽可能简化定位布局。

Answer 1

有没有办法可以创建一个标准尺寸的形状对象，可以调用它并输入一个坐标以使其自身居中？

在传单中，没有。

传单矢量要素或L.Path s（L.Polyline s和L.Polygon s）由它们的坐标定义，而不是由它们的质心和该质心的一系列偏移定义。

你可能想要实现一个简单的Factory design pattern来创建规则形状的特征，但只给出一个中心点。

有没有办法制作可重复使用的形状对象？

1 个答案: