comparison client/src/map/store.js @ 701:8149772c62d6

client: add bbox loading strategy to riverkilometre * Change Maplayer.vue to offer a buildVectorLoader which can be used to implement a loading strategy that will only load the extents that are currently viewed. * Change the Distance Marks, Axis layer to use this new way of loading.
author Bernhard Reiter <bernhard@intevation.de>
date Thu, 20 Sep 2018 23:40:22 +0200
parents 8c3c43595d39
children aaf5dbfb9512
comparison
equal deleted inserted replaced
700:8c3c43595d39 701:8149772c62d6
3 import TileWMS from "ol/source/TileWMS.js"; 3 import TileWMS from "ol/source/TileWMS.js";
4 import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js"; 4 import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
5 import OSM from "ol/source/OSM"; 5 import OSM from "ol/source/OSM";
6 import { Stroke, Style, Fill, Text, Circle as CircleStyle } from "ol/style.js"; 6 import { Stroke, Style, Fill, Text, Circle as CircleStyle } from "ol/style.js";
7 import VectorSource from "ol/source/Vector.js"; 7 import VectorSource from "ol/source/Vector.js";
8 import { bbox as bboxStrategy } from "ol/loadingstrategy";
8 9
9 const MapStore = { 10 const MapStore = {
10 namespaced: true, 11 namespaced: true,
11 state: { 12 state: {
12 layers: [ 13 layers: [
91 isVisible: false 92 isVisible: false
92 }, 93 },
93 { 94 {
94 name: "Distance marks, Axis", 95 name: "Distance marks, Axis",
95 data: new VectorLayer({ 96 data: new VectorLayer({
96 source: new VectorSource(), 97 source: new VectorSource({
98 strategy: bboxStrategy
99 }),
97 style: function(feature, resolution) { 100 style: function(feature, resolution) {
98 if (resolution < 10) { 101 if (resolution < 10) {
99 var s = new Style({ 102 var s = new Style({
100 image: new CircleStyle({ 103 image: new CircleStyle({
101 radius: 5, 104 radius: 5,