图层和数据源

图层（Layer）是在地图上的一种数据组织方法。

图层可以是栅格层（raster）或矢量层（vector），栅格层由栅格图像（像素矩阵）组成，而矢量层由矢量几何图形组成。

瓦片层（TileLayer）

瓦片层（Tile Layer）的源需要能提供预渲染的地图瓦片，这些瓦片按缩放级别不同（在特定分辨率展示）提供不同的瓦片矩阵。

更多详情请参阅 TileLayer 文档。

TileLayer 支持以下源：

OsmSource
XyzSource
WmsSource
WmtsSource

OsmSource

这个源的瓦片数据是从 OpenStreetMap 瓦片服务和 XYZ 瓦片服务加载。更多详情请参阅 OSM 文档。

下面的示例演示了如何展示 OpenStreetMap 瓦片层。

<maps:geoMap id="map"
             height="100%"
             width="100%">
    <maps:layers>
        <maps:tile>
            <maps:osmSource/>
        </maps:tile>
    </maps:layers>
</maps:geoMap>

XyzSource

这个源的瓦片数据是在 URL 模板中定义一组 XYZ 格式的 URL。默认情况下，遵循 Google 矩阵的定义：x 0 和 y 0 位于左上角。XyzSource 可以加载 XYZ tile 服务提供的瓦片。更多详情请参阅 XYZ 文档。

下面的示例演示了如何展示 Thunderforest 瓦片层。

<maps:geoMap id="mapxyz"
             width="100%"
             height="100%">
    <maps:layers>
        <maps:tile>
            <maps:xyzSource
                    url="https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=YOUR_API_KEY">
            </maps:xyzSource>
        </maps:tile>
    </maps:layers>
</maps:geoMap>

WmsSource

这个源的瓦片数据是从 WMS（Web Map Service）服务加载。更多详情请参阅 TileWMS 文档。

下面的示例演示了如何展示 WmsSource 瓦片层。

<maps:geoMap id="mapwms"
             width="100%"
             height="100%">
    <maps:layers>
        <maps:tile>
            <maps:tileWmsSource url="https://ahocevar.com/geoserver/wms"
                                serverType="GEO_SERVER">
                <maps:parameters>
                    <maps:parameter name="LAYERS" value="topp:states"/>
                    <maps:parameter name="TILED" value="true"/>
                </maps:parameters>
            </maps:tileWmsSource>
        </maps:tile>
    </maps:layers>
</maps:geoMap>

WmtsSource

来自 WMTS（Web 地图瓦片服务）服务器的瓦片数据源。详情参见 WMTS 文档。

WMTS 服务使用瓦片矩阵集发布预渲染的瓦片。如需配置 WmtsSource，请指定服务 URL 和图层标识符，然后选择一种瓦片网格配置模式：

tileGrid - 显式定义分辨率、矩阵标识符、原点和瓦片大小。
webMercatorTileGrid - 自动创建标准的 EPSG:3857 瓦片网格。
capabilities - 下载 WMTS GetCapabilities 文档并从中派生源配置。

以下示例演示了显式配置瓦片网格的 WmtsSource：

<maps:geoMap id="mapWmts"
             width="100%"
             height="100%">
    <maps:mapView centerX="0" centerY="0" zoom="2"/>
    <maps:layers>
        <maps:tile>
            <maps:wmtsSource url="https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/wmts.cgi"
                             layer="BlueMarble_ShadedRelief_Bathymetry"
                             matrixSet="GoogleMapsCompatible_Level8"
                             format="image/jpeg"
                             style="default"
                             requestEncoding="KVP">
                <maps:projection code="EPSG:3857"/>
                <maps:tileGrid resolutions="156543.03392804097, 78271.51696402048, 39135.75848201024"
                               matrixIds="0, 1, 2">
                    <maps:origin x="-20037508.342789244" y="20037508.342789244"/>
                    <maps:tileSize width="256" height="256"/>
                </maps:tileGrid>
            </maps:wmtsSource>
        </maps:tile>
    </maps:layers>
</maps:geoMap>

对于 Web 墨卡托服务，使用 webMercatorTileGrid 无需手动列出所有分辨率和矩阵标识符：

<maps:geoMap id="mapWmtsWebMercator"
             width="100%"
             height="100%">
    <maps:mapView centerX="0" centerY="0" zoom="4"/>
    <maps:layers>
        <maps:tile>
            <maps:wmtsSource url="https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/wmts.cgi"
                             layer="BlueMarble_ShadedRelief_Bathymetry"
                             matrixSet="GoogleMapsCompatible_Level8"
                             format="image/jpeg"
                             style="default">
                <maps:webMercatorTileGrid maxZoom="8"
                                          numericMatrixIds="true"/>
            </maps:wmtsSource>
        </maps:tile>
    </maps:layers>
</maps:geoMap>

默认情况下，webMercatorTileGrid 生成 {matrixSet}:{zoom} 格式的矩阵标识符，例如 EPSG:900913:0。如果 WMTS 服务使用数字矩阵标识符（如 0、1、2），则设置 numericMatrixIds="true"。

如需从 WMTS 能力文档配置源，请添加 capabilities 元素。如果无法从源 URL 派生能力文档，请使用 url 属性显式指定：

<maps:geoMap id="mapWmtsCapabilities"
             width="100%"
             height="100%">
    <maps:mapView centerX="0" centerY="0" zoom="4"/>
    <maps:layers>
        <maps:tile>
            <maps:wmtsSource url="https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/wmts.cgi"
                             layer="BlueMarble_ShadedRelief_Bathymetry">
                <maps:capabilities url="https://gibs.earthdata.nasa.gov/wmts/epsg3857/best/1.0.0/WMTSCapabilities.xml"/>
            </maps:wmtsSource>
        </maps:tile>
    </maps:layers>
</maps:geoMap>

capabilities 模式在视图打开时异步加载文档。如果无法加载文档或找不到指定的图层，会在日志写入错误，地图视图仍可在没有此源的情况下使用。

以下应用程序属性仅影响 capabilities 模式：

属性类型默认值描述

属性	类型	默认值	描述
`jmix.maps.ui.wmts-capabilities-timeout`	Duration	`10s`	下载 WMTS `GetCapabilities` 文档的超时时间。
`jmix.maps.ui.wmts-capabilities-cache-ttl`	Duration	`10m`	下载的 `GetCapabilities` 文档按 URL 缓存的时长。设置为 `0` 可禁用缓存。

jmix.maps.ui.wmts-capabilities-timeout

Duration

10s

下载 WMTS GetCapabilities 文档的超时时间。

jmix.maps.ui.wmts-capabilities-cache-ttl

Duration

10m

下载的 GetCapabilities 文档按 URL 缓存的时长。设置为 0 可禁用缓存。

图像层（ImageLayer）

ImageLayer 用于处理静态图片或 WMS 图片。

ImageStaticSource

这个源展示单一静态图片。更多详情请参阅 Static 文档。

这个示例展示使用 URL 的图片。取自 OpenLayers → Examples → Static image：

<maps:geoMap id="mapimagestatic"
             width="100%"
             height="100%">
    <maps:mapView centerX="512" centerY="479" zoom="2">
        <maps:projection code="static-image"
                         units="PIXELS">
            <maps:extent minX="0" minY="0" maxX="1024" maxY="968"/>
        </maps:projection>
    </maps:mapView>
    <maps:layers>
        <maps:image id="imageLayer">
            <maps:imageStaticSource url="https://imgs.xkcd.com/comics/online_communities.png">
                <maps:projection code="static-image"/>
                <maps:imageExtent minX="0" minY="0" maxX="1024" maxY="968"/>
            </maps:imageStaticSource>
        </maps:image>
    </maps:layers>
</maps:geoMap>

如需展示 classpath 中的图片，可以按照下面示例中的方法在 XML 定义：

<maps:geoMap id="declarativeMap"
             width="100%"
             height="100%">
    <maps:mapView centerX="450" centerY="522" zoom="2">
        <maps:projection code="static-image"
                         units="PIXELS">
            <maps:extent minX="0" minY="0" maxX="900" maxY="1044"/>
        </maps:projection>
    </maps:mapView>
    <maps:layers>
        <maps:image id="dImageLayer">
            <maps:imageStaticSource id="classpathSource"
                                    url="maps/map.png">
                <maps:projection code="static-image"/>
                <maps:imageExtent minX="0" minY="0" maxX="900" maxY="1044"/>
            </maps:imageStaticSource>
        </maps:image>
    </maps:layers>
</maps:geoMap>

此外，在 Java 控制器中可以通过 DownloadHandler 实现：

@Subscribe
protected void onInit(final InitEvent event) {
    programmaticSource.setDownloadHandler(
            DownloadHandler.forClassResource(getClass(),"/META-INF/resources/maps/map.png"));
}

ImageWmsSource

这个源从 WMS 服务加载单一未命名图片。更多详情请参阅 ImageWMS 文档。

使用 ImageWmsSource 的示例取自 OpenLayers → Examples → Single Image WMS：

<maps:geoMap id="mapimagewms"
             width="100%"
             height="100%">
    <maps:layers>
        <maps:tile>
            <maps:osmSource/>
        </maps:tile>
        <maps:image>
            <maps:imageWmsSource url="https://ahocevar.com/geoserver/wms"
                                 ratio="1"
                                 serverType="GEO_SERVER">
                <maps:parameters>
                    <maps:parameter name="LAYERS" value="topp:states"/>
                </maps:parameters>
            </maps:imageWmsSource>
            <maps:extent minX="-124.43" minY="24.57" maxX="-66.58" maxY="49.22"/>
        </maps:image>
    </maps:layers>
</maps:geoMap>

矢量层（VectorLayer）

矢量层用于处理几何图形。一个地图可以添加多个矢量层。

VectorSource

这个源处理地图要素。更多详情请参阅 VectorSource 文档。

下面的示例演示了如何展示 VectorSource 矢量层。首先，在 XML 中定义一个地图：

<maps:geoMap id="mapwithvector"
             width="100%"
             height="100%">
    <maps:layers>
        <maps:tile>
            <maps:osmSource/>
        </maps:tile>
        <maps:vector id="vectorLayer">
            <maps:vectorSource id="vectorSource"/>
        </maps:vector>
    </maps:layers>
</maps:geoMap>

然后，打开视图控制器并在地图中添加标记：

@ViewComponent("mapwithvector.vectorLayer.vectorSource")
private VectorSource vectorSource;

@Subscribe
protected void onInit(final InitEvent event) {
    vectorSource.addFeature(new MarkerFeature(createPoint(0, 0)));(1)
}

添加标记要素。

DataVectorSource

DataVectorSource 支持通过 dataContainer 和 property 属性绑定 Jmix 数据容器。property 可以是属性名或者属性路径。

<maps:geoMap id="map" height="100%" width="100%">
    <maps:layers>
        <maps:tile>
            <maps:osmSource/>
        </maps:tile>
        <maps:vector id="vectorLayer">
            <maps:dataVectorSource id="dataVectorSource"
                                   dataContainer="locationDc"
                                   property="building"/>
        </maps:vector>
    </maps:layers>
    <maps:mapView centerY="51.0">
        <maps:extent minX="-15.0"
                     minY="30.0"
                     maxX="40.0"
                     maxY="60.0"/>
    </maps:mapView>
</maps:geoMap>

<maps:vector id="vectorLayer">
    <maps:dataVectorSource dataContainer="ordersDc"
                           property="customer.address.point"/>
</maps:vector>

本页是否有帮助？

感谢您的反馈

出错啦~