vue3-openlayers

Appearance

On this page

ol-webglpoints-layer ​

Usage ​

html
<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-webglpoints-layer :style="webglPointsStyle">
      <ol-source-webglpoints
        :format="geoJson"
        url="https://openlayers.org/en/latest/examples/data/geojson/world-cities.geojson"
      />
    </ol-webglpoints-layer>
  </ol-map>
</template>
js
import { ref, inject } from "vue";
export default {
  setup() {
    const center = ref([40, 40]);
    const projection = ref("EPSG:4326");
    const zoom = ref(3);
    const rotation = ref(0);

    const format = inject("ol-format");
    const geoJson = new format.GeoJSON();

    const webglPointsStyle = {
      symbol: {
        symbolType: "circle",
        size: [
          "interpolate",
          ["linear"],
          ["get", "population"],
          40000,
          8,
          2000000,
          28,
        ],
        color: "#ffed02",
        rotateWithView: false,
        offset: [0, 0],
        opacity: [
          "interpolate",
          ["linear"],
          ["get", "population"],
          40000,
          0.6,
          2000000,
          0.92,
        ],
      },
    };

    return {
      center,
      projection,
      zoom,
      rotation,
      geoJson,
      webglPointsStyle,
    };
  },
};

Properties ​

disableHitDetection ​

  • Type: boolean
  • Default: false

style ​

  • Type: object
  • Default: () => ({ symbol: { symbolType: 'circle', size: 8, color: '#33AAFF', opacity: 0.9 } })