CP-999-04

OL - Chart - Consumo recursos

by SIGC

HTML

<script src="https://sigc.desarrollo.guadaltel.es/mapea5/js/mapea.ol.min.js"></script>
<link rel="stylesheet" href="https://sigc.desarrollo.guadaltel.es/mapea5/assets/css/mapea.ol.min.css">
<script src="https://sigc.desarrollo.guadaltel.es/mapea5/js/configuration.js"></script>
<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_sv10_ayuntamiento_point_indicadores&outputFormat=application/json&srsname=EPSG:4326',
  strategy: ol.loadingstrategy.bbox,

});


// The map
var map = new ol.Map({
  target: 'map',
  view: new ol.View({
    zoom: 5,
    center: [166326, 5972663]
  }),
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    ],
  target: 'mapjs'
});

function getFeatureStyle(feature, sel) {
  var k = $("#graph").val() + "-" + $("#color").val() + "-" + (sel ? "1-" : "") + feature.get("data");
  var radius = 15;
  // area proportional to data size: s=PI*r^2
  radius = 8 * Math.sqrt(feature.get("sum") / Math.PI);
  var data = feature.get("data");
  radius *= (sel ? 1.2 : 1);
  // Create chart style
  style = [new ol.style.Style({
    image: new ol.style.Chart({
      type: "pie",
      radius: radius,
      data: data,
      rotateWithView: true,
      stroke: new ol.style.Stroke({
        color: "#fff",
        width: 2
      }),
    })
  })];
  var sum = feature.get("sum");
  var s = 0;
  for (var i = 0; i < data.length; i++) {
    var d = data[i];
    var a = (2 * s + d) / sum * Math.PI - Math.PI / 2;
    var v = Math.round(d / sum * 1000);
    if (v > 0) {
      style.push(new ol.style.Style({
        text: new ol.style.Text({
          text: (v / 10) + "%",
          /* d.toString() */
          offsetX: Math.cos(a) * (radius + 3),
          offsetY: Math.sin(a) * (radius + 3),
          textAlign: (a < Math.PI / 2 ? "left" : "right"),
          textBaseline: "middle",
          stroke: new ol.style.Stroke({
            color: "#fff",
            width: 2.5
          }),
          fill: new ol.style.Fill({
            color: "#333"
          })
        })
      }));
    }
    s += d;
  }
  return style;
}



let vector = new...