地图组件

GeoMap UI 组件展示 图层 提供的地理数据。

地图由层叠的图层构建。初始时,地图没有图层。

在视图的 XML 中,可以定义地图的参数以及图层。

地图

通过 Jmix Studio 添加地图组件。

点击操作面板中的 Add Component,找到 GeoMap 并双击。

adding map

新的 geoMap 元素会被添加到 Jmix UI 层级结构面板和 XML 中。可以配置一些属性,如 idheightwidth 等,与其他 UI 组件 类似。

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

图层

GeoMap 组件可以包含多个 图层,以展示不同类型的地理信息,例如栅格层、矢量层。

初始时,地图没有任何图层。

示例,我们在地图中添加一个 瓦片层

Jmix UI 层级结构面板或视图的 XML 中,选择 geoMap 元素,然后点击组件面板的 Add 按钮。在下拉框中选择 Layers → TileLayer

add tile layer

数据源

一个 数据源 表示用于渲染地图组件中图层的数据。数据源提供的空间信息定义了图层的内容和外观。

示例,我们为瓦片层添加一个 OsmSource

Jmix UI 层级结构面板或视图的 XML 中,选择 maps:tile 元素,然后点击组件面板的 Add 按钮。在下拉框中选择 OsmSource

add osmsource
<maps:layers>
    <maps:tile>
        <maps:osmSource attributions="© Your Attribution Info"
                        maxZoom="34"/>
    </maps:tile>
</maps:layers>

地图视图

View 定义地图的展示方式,包括中心点、缩放级别、旋转以及投影,设置地图在 UI 加载时的初始状态。

默认情况下,geoMap 组件展示一个世界地图,地理中心为 (0,0)

Jmix UI 层级结构面板或视图的 XML 中,选择 geoMap 元素,然后点击组件面板的 Add 按钮。在下拉框中选择 MapView

add map view
<maps:mapView centerX="10.872461786203276"
              centerY="48.36928140366503"
              zoom="4">,
</maps:mapView>

还可以设置更多参数:

  • centerX 定义地图初始的纬度。值传给 org.locationtech.jts.geom.Coordinate 对象。

  • centerY 定义地图初始的经度。值传给 org.locationtech.jts.geom.Coordinate 对象。

  • maxZoom - 设置 view 的最大缩放级别。

  • minZoom - 设置 view 的最小缩放级别。

  • projection 值的是地图显示时的坐标参考系。通用的投影有 EPSG:3857EPSG:4326。默认投影是 EPSG:3857。可以在内部的 projection 元素设置自定义投影。更多详情参阅 Projection

  • rotation - 以弧度为单位设置视图的旋转(顺时针正旋转,0 表示北)。更多详情参阅 setRotation

  • zoom 定义缩放级别。

地图范围

extent 通过坐标设置 地图视图 或特定 图层 的地理边界,定义地图的可见区域。

地图范围通常由最小值(左上角)和最大值(右下角)坐标值定义,其形式为 [minX, minY, maxX, maxY],表示区域的边界框。

Jmix UI 层级结构面板或视图的 XML 中,选择 mapView 元素或某个图层,然后点击组件面板的 Add 按钮。在下拉框中选择 Extent,并按照下面配置 minXminYmaxXmaxY 属性。

<maps:mapView centerY="51.0"
              centerX="40.0"
              zoom="4">
    <maps:extent minX="-15.0"
                 minY="30.0"
                 maxX="40.0"
                 maxY="60.0"/>
</maps:mapView>