repository·main·Indexed 21 days ago
https://github.com/melihaltintas/vue3-openlayersA component library that integrates the OpenLayers API into the Vue 3 reactive ecosystem. It allows developers to build web maps using tiled, raster, or vector layers. The library includes an Animations plugin providing specialized components such as ol-animation-drop, ol-animation-fade, ol-animation-path, ol-animation-shake, ol-animation-slide, and ol-animation-teleport.
vue3-openlayers is a component library that integrates the OpenLayers API into the Vue 3 reactive ecosystem. It enables the display of maps using various layer types, including tiled, raster, or vector layers loaded from different sources.
The renderMode property controls how vector tiles are drawn on the map:
hybrid (Default): Polygon and line elements are rendered as images (pixels scale during zoom animations), while point symbols and text are rendered as vectors to remain accurate and upright during rotation.vector: Everything is rendered as vectors. This mode is recommended for improved performance when the layer contains only a few features (e.g., for highlighting a subset of features from another layer).The ol-style-stroke component is used to define the stroke properties for geometric shapes. It is designed to be used as a nested component within other styling components:
ol-style to style lines and polygons.ol-style-circle to style circles.ol-style-text to style text.You can use it via the plugin component <ol-style-stroke> or by explicitly importing <Styles.OlStyleStroke>.
<!-- Plugin Usage -->
<ol-style-stroke color="red" :width="2" />
<!-- Explicit Import Usage -->
<Styles.OlStyleStroke color="#ff0000" :width="2" />The ol-feature component acts as a container for a single geometry. To display features on a map, you typically use ol-feature in conjunction with ol-vector-layer and ol-source-vector to render GeoJSON features or manual geometries.
Key constraints:
ol-feature must contain exactly one child element representing a Geometry (e.g., ol-geom-point).ol-feature must include an ol-style component to define how the geometry is rendered.ol-feature components.<ol-feature>
<ol-geom-point />
<ol-style ... />
</ol-feature>The ol-vector-image-layer component renders vector data from various backend services by drawing them to an image client-side. This provides significantly better performance during panning and zooming compared to ol-vector-layer.
Note on behavior: Because it renders to an image, point symbols and text will always rotate with the view, and pixels will be scaled during zoom animations.
To use this component, you must pair it with an ol-source-vector component.
<ol-vector-image-layer>
<ol-source-vector ... />
</ol-vector-image-layer>When working with a large number of markers or clusters, passing features directly to ol-source-vector can cause performance issues, such as rendering errors, blocked interactive elements, or memory leaks.
Recommendation: Instead of passing feature objects directly, request features from a URL (e.g., using a GeoJSON endpoint). This allows the source to manage data loading more efficiently.
<template>
<ol-map
:loadTilesWhileAnimating="true"
:loadTilesWhileInteracting="true"
style="height: 400px"
>
<ol-animated-cluster-layer :animationDuration="500" :distance="40">
<ol-source-vector :url="url" :format="geoJson" />
</ol-animated-cluster-layer>
</ol-map>
</template>
<script setup lang="ts">
import { computed, inject } from "vue";
// ...
const format = inject("ol-format");
const geoJson = new format.GeoJSON();
const url = computed(() => {
return `http://localhost:3000/${count.value}`;
});
</script>ol-webgl-vector-layer by providing a variables object. This allows for dynamic filtering of WebGL-rendered points, lines, or polygons based on feature attributes.When dealing with large numbers of markers or features, consider the following:
url (GeoJSON) is generally more performant than passing an array of features via the features property.url allows the browser to stream GeoJSON in chunks and fetch data as needed, reducing initial load time.url allows OpenLayers to manage data on-demand.url enables server-side filtering and caching, which reduces network load and improves response times.The ol-style component acts as a container for a collection of styles. It is used to provide custom visual representations to vector elements. You can nest <ol-style> inside several components to apply styles to specific parts of the map:
ol-feature: To style an individual feature.ol-vector-layer: To style all features within a specific layer.ol-interaction-select: To style features during a selection interaction.ol-interaction-draw: To style features being drawn.ol-interaction-modify: To style features during a modification interaction.<ol-style>
<!-- Style definitions go here -->
</ol-style>.ol-map-loading CSS class. This class is applied to the map container when the underlying OpenLayers map is in a loading state.If you prefer not to install the plugin globally, you can use explicit component imports. When using explicit imports, the Map component is available as a child of the named export Map.
Important: If you choose this method, you must adjust your template component names. For example, instead of using the standard <ol-map>, you must use <Map.OlMap>.
The ol-style-text component is used to style the text of a shape within an OpenLayers map. You can use it either via the plugin (as a component tag) or via explicit import from the Styles object.
Plugin Usage:
<ol-style-text>
Explicit Import:
<Styles.OlStyleText>
<template>
<!-- Plugin usage -->
<ol-style-text :fill="'red'" :stroke="'black'" />
<!-- Explicit import usage -->
<Styles.OlStyleText :fill="'blue'" />
</template>
<script setup>
import { Styles } from 'vue3-openlayers'
</script>