图层

基本上，图层分为栅格层和矢量层。栅格层由栅格图片组成，矢量层由矢量图形组成。

在地图中添加图层的方法是在 XML 描述中的 geoMap 元素声明 layers 及其配置。下面是带有一个栅格层和一个矢量层的地图示例。

<maps:geoMap id="map" height="400px" width="800px" centerX="-99.755859" centerY="39.164141" zoom="4">
    <maps:layers selectedLayer="orderLayer">
        <maps:tile id="tileLayer"
                   urlPattern="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                   attribution="&#169; &lt;a href=&quot;https://www.openstreetmap.org/copyright&quot;&gt;
                       OpenStreetMap&lt;/a&gt; contributors"/>
        <maps:vector id="orderLayer" dataContainer="orderDc" editable="true"/>
    </maps:layers>
</maps:geoMap>

selectedLayer 是指地图主要关注的选中图层。选中的图层会触发事件、与用户点击进行交互并支持通过 UI 交互进行修改（要求图层可编辑）。

下列参数适用各种图层：

  • id — 必需参数，指定图层的 ID。

  • visible — 图层是否可见。

  • minZoom — 图层的最小缩放度（包含）。

  • maxZoom — 图层的最大缩放度（包含）。

另外，也可以在界面控制器添加图层并进行配置：

@Autowired
private GeoMap map;

@Autowired
private InstanceContainer<Order> orderDc;

@Subscribe
public void onBeforeShow(BeforeShowEvent event) {
    TileLayer tileLayer = new TileLayer("tileLayer");
    tileLayer.setUrl("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png");
    tileLayer.setAttributionString("&copy; <a href=\"http://www.openstreetmap.org/copyright\"" +
            ">OpenStreetMap</a> &copy; <a href=\"https://carto.com/attributions\">CARTO</a>");
    map.addLayer(tileLayer);
    VectorLayer<Order> orderLayer = new VectorLayer<>("orderLayer", orderDc);
    orderLayer.setEditable(true);
    map.addLayer(orderLayer);
    map.selectLayer(orderLayer);
}

默认情况下，GeoMap UI 组件有一个特殊的工具层 - 画布层。画布层提供了在地图上展示和绘制几何图形的简单 API。