Vue3 OpenLayers

ol-geom-multi-point

ol-geom--multi-point can be used inside a ol-feature to draw multiple points at once.

Usage

<template>
<ol-map :loadTilesWhileAnimating="true" :loadTilesWhileInteracting="true" style="height:400px">

    <ol-view ref="view" :center="center" :rotation="rotation" :zoom="zoom" :projection="projection" />

    <ol-tile-layer>
        <ol-source-osm />
    </ol-tile-layer>

    <ol-vector-layer>
        <ol-source-vector>
            <ol-feature>
                <ol-geom-multi-point :coordinates="[[116.544921,40.451633],[116.545264,40.451649],[116.545865,40.451698],[116.546144,40.451551],[116.546337,40.451274],[116.546788,40.451143],[116.547324,40.451078],[116.547539,40.450996],[116.547839,40.450719],[116.548440,40.450506],[116.548933,40.450604],[116.549448,40.450604],[116.550242,40.450376],[116.550865,40.450163],[116.551702,40.449935],[116.552581,40.449576]]"></ol-geom-multi-point>
                <ol-style>
                    <ol-style-circle :radius="radius">
                        <ol-style-fill :color="fillColor"></ol-style-fill>
                        <ol-style-stroke :color="strokeColor" :width="strokeWidth"></ol-style-stroke>
                    </ol-style-circle>
                </ol-style>
            </ol-feature>

        </ol-source-vector>

    </ol-vector-layer>

</ol-map>
</template>

import {
    ref
} from 'vue'
export default {
    setup() {
        const center = ref([116.54875, 40.45064])
        const projection = ref('EPSG:4326')
        const zoom = ref(17)
        const rotation = ref(0)
        const radius = ref(10)
        const strokeWidth = ref(4)
        const strokeColor = ref('red')
        const fillColor = ref('white')
        return {
            center,
            projection,
            zoom,
            rotation,
            radius,
            strokeWidth,
            strokeColor,
            fillColor
        }
    },
}

Properties

coordinates

  • Type: number[][] An array of points in units of the map's projection.