javascript - 使用 Angularjs 将白色或空的基础层添加到 Leaflet

Question

我需要创建一个非常简单的 map ，可以在其中向用户绘制简单的对象。

我想通过使用 leaflet-directive 在传单中用 angularjs 实现它插件以便与 map 交互。这里有一个代码示例:

{
  "baselayers": {
    "osm": {
      "name": "OpenStreetMap",
      "url": "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      "type": "xyz",
      "layerParams": {},
      "layerOptions": {}
    }
  }
}

想法是创建一个空的或白色的基础图层，并在其上添加自定义图层，但 baselayers 属性不能为空或未定义。

创建空的或白色的底层的最佳方法是什么？

Answer 1

我找到了一个解决方案，也许不太聪明，但它有效。
我只是使用白色图像作为基础叠加层，然后在其上绘制我需要的所有内容。

baselayers: {
    white: {
        name: 'White',
        type: 'imageOverlay',
        url: 'http://www.ledr.com/colours/white.jpg',
        bounds: [[-540, -960], [540, 960]],
        layerParams: {
            noWrap: true,
            attribution: 'Creative Commons image found <a href="http://www.flickr.com/photos/c32/8025422440/">here</a>'
        }
    }
}

边界是指世界中心的 0, 0 坐标，但这并不重要，因为我的目标是绘制与世界地图无关的对象。

下面是我自己绘制的 map 。