geoMap 地图

该组件需要安装商业版地图扩展组件。

在线示例

geoMap 显示地理数据。

XML 元素	`geoMap`
Java 类	`GeoMap`

XML 元素

geoMap

Java 类

GeoMap

基本用法

在视图 XML 中声明 maps 命名空间：

<view xmlns="http://jmix.io/schema/flowui/view"
      xmlns:maps="http://jmix.io/schema/maps/ui"
      title="msg://mapBasicView.title">

当使用顶部操作面板中的 Add Component 操作添加组件时，Studio 会自动添加该命名空间。请参见组件面板。

然后添加 geoMap 元素：

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

设置了 id 属性后，可以在控制器中注入 GeoMap 元素并直接访问 API：

@ViewComponent
private GeoMap geoMap;

@Subscribe
public void onInit(final InitEvent event) {
    geoMap.addLayer(new TileLayer()
            .withSource(new OsmSource()
                    .withUrl("https://tile.openstreetmap.org/{z}/{x}/{y}.png")
                    .withOpaque(true)
                    .withMaxZoom(10)));
}

图层

GeoMap 组件可以包含多个显示不同地理信息的图层。初始化时，地图不包含任何图层。

地图扩展组件提供以下类型的图层：

瓦片层显示预渲染的地图瓦片，瓦片在不同的缩放级别组织。
图像层显示静态图片或从网络图片服务（WMS）获取的图片。
矢量层显示地图要素和几何图案。
热力图层将点要素渲染为热力图。

参考图层和数据源了解每个图层支持的数据源和示例。

可以在控制器中注入图层并访问其方法：

@ViewComponent("map.tile")
private TileLayer mapTile;

@Subscribe
public void onInit(final InitEvent event) {
    mapTile.setSource(new XyzSource()
            .withUrl("https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}"));
}

数据源

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

地图扩展组件提供下列数据源类型：

TileLayer：OsmSource、XyzSource 和 WmsSource。
ImageLayer：ImageStaticSource 和 ImageWmsSource。
VectorLayer：VectorSource、DataVectorSource 和 ClusterSource。
HeatmapLayer：HeatmapDataVectorSource 和 VectorSource。

参考图层和数据源了解详细内容和示例。

下面的示例为瓦片层定义了一个 OsmSource：

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

可以在控制器中注入数据源并访问其方法：

@ViewComponent("map.tile.osmSource")
private OsmSource osmSource;

@Subscribe
public void onInit(final InitEvent event) {
    osmSource.withUrl("https://tile.openstreetmap.org/{z}/{x}/{y}.png")
            .withMaxZoom(12)
            .withWrapX(false);
}

视图

视图定义地图显示的方式，包括中心点、缩放级别、旋转角度以及投影。其本质是当地图加载到用户界面时设置初始状态。

默认情况下，geoMap 显示一个世界地图，初始地理中心为 (0,0)。

<maps:mapView centerX="10.872461786203276"
              centerY="48.36928140366503"
              zoom="4.0"/>

可以设置其他参数：

centerX 定义地图初始地理中心的纬度。传递给 org.locationtech.jts.geom.Coordinate 对象。
centerY 定义地图初始地理中心的经度。传递给 org.locationtech.jts.geom.Coordinate 对象。
maxZoom - 设置视图的最大缩放级别。
minZoom - 设置视图的最小缩放级别。
projection 定义在地图上显示地理数据的坐标参考系（CRS）。将三维地球坐标转换为二维平面。常见的投影包括 EPSG:3857（Web 墨卡托）和 EPSG:4326（WGS 84）。默认投影为 EPSG:3857。还可以设置自定义投影。
rotation - 设置视图的旋转角度，单位为弧度（正值为顺时针旋转，0 表示正北）。详情请参见 setRotation。
zoom 定义具体的缩放级别。缩放级别从 0 开始，表示最大的缩小视图，级别随着地图放大而逐渐增大。

自定义投影

在线示例

按以下步骤配置自定义投影：

定义投影 Bean。使用 PROJ.4 格式在 Spring 配置中注册投影：

@Bean
public ProjectionRegistration projectionRegistration21781() {
    return new GeoMapProjectionRegistration("EPSG:21781",
            "+proj=somerc +lat_0=46.9524055555556 " +
                    "+lon_0=7.43958333333333 " +
                    "+k_0=1 +x_0=600000 +y_0=200000 +ellps=bessel " +
                    "+towgs84=674.374,15.056,405.346,0,0,0,0 +units=m " +
                    "+no_defs +type=crs");
}

配置地图组件。在 XML 中设置 mapView 的 projection 属性：

<maps:geoMap id="geoMap"
             width="100%"
             height="100%">
    <maps:mapView projection="EPSG:21781"
                  centerX="10.872461786203276"
                  centerY="48.36928140366503"
                  zoom="4.0">
    </maps:mapView>
    <maps:layers>
        <maps:tile>
            <maps:osmSource/>
        </maps:tile>
    </maps:layers>
</maps:geoMap>

在控制器中初始化。在页面所有地图组件中编程式应用投影：
```
@ViewComponent
private GeoMap geoMap;

@Subscribe
public void onInit(final InitEvent event) {
    geoMap.setProjection(() -> "EPSG:21781");
}
```
该投影适用于页面上的所有地图组件。一旦设置，所有坐标操作都使用投影的单位（米、度等）。

范围

范围（extent）以坐标形式指定地图视图或特定图层的地理边界，定义地图上的可见区域。

范围通常由最小（左上角）和最大（右下角）坐标值定义，形式为 [minX、minY、maxX、maxY]，表示该区域的边界框。

在 Jmix UI 结构面板或视图 XML 描述符中选择图层或 mapView 元素，然后点击组件属性面板中的 Add 按钮。从下拉列表中选择 Extent，并按下文所述配置 minX、minY、maxX 和 maxY 属性。

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

范围约束选项

默认情况下，当 mapView 有 extent 时，OpenLayers 会约束整个视口保持在该范围内。在响应式布局中，如果地图容器的宽高比与范围的宽高比不同，这可能会导致地图被放大。

使用 mapView 的下列属性调整此行为：

showFullExtent - 允许缩小到足以显示整个配置的范围，即使容器的宽高比与之不同。默认值为 false。
constrainOnlyCenter - 仅对视图中心使用范围约束，因此视口边缘可能会移出范围。默认值为 false。
smoothExtentConstraint - 平滑地使用范围约束，允许轻微过度滚动并带有回弹效果，而不是硬性停止。默认值为 true。

这些属性是创建时选项。在初始化期间传递给 OpenLayers 视图，并且无法在运行时更改。

<maps:geoMap id="map"
             width="100%"
             height="340px">
    <maps:mapView centerX="7"
                  centerY="7"
                  zoom="7"
                  showFullExtent="true">
        <maps:extent minX="5"
                     minY="0"
                     maxX="20"
                     maxY="15"/>
    </maps:mapView>
    <maps:layers>
        <maps:tile>
            <maps:osmSource/>
        </maps:tile>
    </maps:layers>
</maps:geoMap>

XML 属性

geoMap 无组件级别的属性。

下面是 geoMap 支持的通用属性：

id - alignSelf - classNames - colspan - css - height - maxHeight - maxWidth - minHeight - minWidth - visible - width

事件和处理器

下面是 geoMap 的特殊事件和处理器：

在 Jmix Studio 生成处理器桩代码时，可以使用 Jmix UI 组件面板的 Handlers 标签页或者视图类顶部面板的 Generate Handler 添加，也可以通过 Code → Generate 菜单（Alt+Insert / Cmd+N）生成。

名称描述

名称	描述
`MapClickEvent`	点击地图时发送。双击会导致该事件发出两次。
`MapDoubleClickEvent`	双击地图是发送。
`MapMoveEndEvent`	地图完成移动时发送。
`MapSingleClickEvent`	当组件判断点击不是双击时发送。
`MapZoomChangedEvent`	当地图的缩放级别变化时发送。

MapClickEvent

点击地图时发送。双击会导致该事件发出两次。

MapDoubleClickEvent

双击地图是发送。

MapMoveEndEvent

地图完成移动时发送。

MapSingleClickEvent

当组件判断点击不是双击时发送。

MapZoomChangedEvent

当地图的缩放级别变化时发送。

下面是 geoMap 支持的其他通用事件：

AttachEvent - DetachEvent

XML 内部元素

一个 geoMap 可以包含一个 mapView 元素以及一个必须的 layers 元素。layers 元素内可以包含 tile、image、vector 和 heatmap 等图层元素，每个图层元素都有各自的数据源和样式元素。

参考

本页是否有帮助？

感谢您的反馈

出错啦~