如何通过angular-leaflet-directive在AngularJS中配置OpenSeaMap瓦片图层？

你遇到的这个报错「[AngularJS - Leaflet] A layer must have a valid type defined.」，核心原因是angular-leaflet-directive对图层类型的取值有严格要求，不同版本的指令对应的有效值不一样，结合你的配置来看，我给你两种针对性的解决方案：

情况1：使用v1.x及以上版本的angular-leaflet-directive #

这个版本的指令已经把XYZ瓦片图层的类型统一命名为'xyz'，你的类型取值是对的，但可能漏了必填的版权声明（attribution）——OpenSeaMap的瓦片服务也要求标注版权信息。修改后的配置应该是这样的：

layers: {
  baselayers: {
    openSeaMap: { // 建议把键名改成和图层名一致，避免混淆
      name: 'OpenSeaMap',
      url: 'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
      type: 'xyz',
      attribution: 'Map data © OpenSeaMap contributors'
    }
  }
}

如果还是不行，检查一下你的AngularJS模块是否正确依赖了'leaflet'模块，确保指令已经被正确加载。

情况2：使用v0.10.x及以下的旧版本指令 #

旧版本的angular-leaflet-directive要求图层类型使用Leaflet原生的类名，XYZ瓦片对应的类型是'tileLayer'而不是'xyz'，修改配置如下：

layers: {
  baselayers: {
    openSeaMap: {
      name: 'OpenSeaMap',
      url: 'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
      type: 'tileLayer',
      attribution: 'Map data © OpenSeaMap contributors'
    }
  }
}

另外提醒一下，OpenSeaMap的瓦片服务主要是海图标记层，通常需要叠加在普通地图瓦片之上使用，如果你希望同时显示基础地图和海图，可以配置多个baselayer或者把OpenSeaMap作为overlay图层添加。

内容的提问来源于stack exchange，提问作者rajmohan