Dynamic layers

by Vladimir Vershinin

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io/en/v5.3.0/build/ol.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/style.css">
<div id="app">
  <vl-map ref="map">
    <vl-view ref="mapView" :zoom.sync="zoom" :center.sync="center"></vl-view>
    
    <vl-layer-tile>
      <vl-source-osm />
    </vl-layer-tile>
    
    <!-- other layers from config -->
      <component v-for="layer in layers" :is="layer.cmp" v-if="layer.visible" :key="layer.id" v-bind="layer">
        <!-- add vl-source-* -->
        <component :is="layer.source.cmp" v-bind="layer.source">
          <!-- add static features to vl-source-vector if provided -->
          <vl-feature v-if="layer.source.staticFeatures && layer.source.staticFeatures.length"
                      v-for="feature in layer.source.staticFeatures" :key="feature.id"
                      :id="feature.id" :properties="feature.properties">
            <component :is="geometryTypeToCmpName(feature.geometry.type)" v-bind="feature.geometry"></component>
          </vl-feature>

          <!-- add inner source if provided (like vl-source-vector inside vl-source-cluster) -->
          <component v-if="layer.source.source" :is="layer.source.source.cmp" v-bind="layer.source.source">
            <!-- add static features to vl-source-vector if provided -->
            <vl-feature v-if="layer.source.source.staticFeatures && layer.source.source.staticFeatures.length"
                        v-for="feature in layer.source.source.staticFeatures" :key="feature.id"
                        :id="feature.id" :properties="feature.properties">
              <component :is="geometryTypeToCmpName(feature.geometry.type)" v-bind="feature.geometry"></component>
            </vl-feature>
          </component>
        </component>
        <!--//...

CSS

html, body, #app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

let geojsonObject = {
  'type': 'FeatureCollection',
  'crs': {
    'type': 'name',
    'properties': {
      'name': 'EPSG:3857'
    }
  },
  'features': [{
  	'id': 1,
    'type': 'Feature',
    'geometry': {
      'type': 'Point',
      'coordinates': [-5e6, 6e6],
    }
  }, {
  	'id': 2,
    'type': 'Feature',
    'geometry': {
      'type': 'Point',
      'coordinates': [-2e6, 6e6],
    }
  }, {
  	'id': 3,
    'type': 'Feature',
    'geometry': {
      'type': 'Point',
      'coordinates': [1e6, 6e6],
    }
  }]
};

new Vue({
	el: '#app',
  data () {
  	return {
    	zoom: 2,
      center: [0, 3000000],
      selectedFeatures: [],
      layers: [
      	{
        	id: 'dataKml',
          title: 'Layer KML',
          cmp: 'vl-layer-vector',
          visible: true,
          renderMode: 'image',
          source: {
            cmp: 'vl-source-vector',
            features: geojsonObject.features,
          },
          style: [{
            cmp: 'vl-style-func',
            factory: this.pointsStyleFunc,
          }],
        },
      ],
    }
  },
  methods: {
    pointsStyleFunc () {
    	const pStyle = [
     		VueLayers.olExt.createStyle({
     			// this is required to create ol.style.Circle with some radius
          imageRadius: 10,
          strokeColor: '#de9147', // or it can be imageStrokeColor to apply only to ol.style.Circle
          strokeWidth: 3, // or it can be imageStrokeWidth to apply only to ol.style.Circle
          fillColor: [222, 189, 36, 0.8], // or it can be imageFillColor to apply only to ol.style.Circl
     		}),
   		]
   
   		return function __pointsStyleFunc (feature) {
     		return pStyle
   		}
 		},
  },
})