Слои и источники
Слой (Layer) - это способ организации данных на карте.
Слои могут быть растровыми или векторными. Растровые слои состоят из растровых изображений, которые представляют собой сетку пикселей, в то время как векторные слои состоят из векторных геометрий.
TileLayer
Тайловый слой (TileLayer
) - слой с источниками, которые предоставляют предварительно отрендеренные, разбитые на тайлы (плитки) изображения в сетках, организованных по уровням масштабирования для определенных разрешений.
Для получения более подробной информации см. документацию TileLayer.
TileLayer
поддерживает три источника:
OsmSource
Источник для загрузки тайлов с сервера OpenStreetMap и из сервисов XYZ tile. Для получения более подробной информации смотрите документацию 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>
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-контроллере с помощью StreamResource
:
@ViewComponent("programmaticMap.pImageLayer.programmaticSource")
private ImageStaticSource programmaticSource;
@Subscribe
protected void onInit(final InitEvent event) {
programmaticSource.setResource(new StreamResource("map.png",
() -> this.getClass().getResourceAsStream("/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
Векторный слой (VectorLayer
) используется для работы с геометриями. На карту можно добавить несколько векторных слоев.
VectorSource
Источник для работы с объектами (features). Для получения более подробной информации смотрите документацию 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)
}
1 | Добавляет объект-маркер в источник. |
DataVectorSource
DataVectorSource
позволяет выполнять привязку данных к контейнерам данных Jmix через атрибуты dataContainer
и property
. Атрибут property
может принимать как простое свойство, так и путь к свойству (property path).
<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>