CP-999-01 - OL - STYLE_POINT - Consumo recursos

Prueba para evaluar consumo de recursos librería. Trabaja sobre OpenLayers directamente

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.0.1/ol.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.0.1/ol.css">
<div id="mapjs"></div>

CSS

<style rel="stylesheet">
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
      }

JavaScript

let source = new ol.source.Vector({
  format: new ol.format.GeoJSON(),
  url: 'https://clientes.guadaltel.es/desarrollo/geossigc/mapea/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=mapea:assda_centros&outputFormat=application/json&srsname=EPSG:4326',
  strategy: ol.loadingstrategy.bbox
});

let vector = new ol.layer.Vector({
  source: source,
});

let map = new ol.Map({
  view: new ol.View({
    center: [-4, 37],
    zoom: 6,
    projection: 'EPSG:4326',
  }),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    vector
  ],
  target: 'mapjs',
});

vector.setStyle(new ol.style.Style({
  fill: new ol.style.Fill({
    color: 'rgba(255, 100, 50, 0.3)'
  }),
  stroke: new ol.style.Stroke({
    width: 2,
    color: 'rgba(255, 100, 50, 0.8)'
  }),
  image: new ol.style.Circle({
    fill: new ol.style.Fill({
      color: 'rgba(55, 200, 150, 0.5)'
    }),
    stroke: new ol.style.Stroke({
      width: 1,
      color: 'rgba(55, 200, 150, 0.8)'
    }),
    radius: 7
  }),
}));