Home / Questions / 121510
Accepted
raintrooper
Asked: 2020-12-01 07:25:23 +0800 CST 2020-12-01 07:25:23 +0800 CST

Irrigation Percentage on Map, Google Maps API Js

  • 772

Good morning, I am trying to show a percentage of Irrigation on a map. I have tried in several ways, for example:

-Show a 50% polygon over an original 100% polygon It didn't work because by sending only 50% of the array coordinates to display, the superimposed polygon is not symmetrical.

In this case, the green polygon is the overlay.

Overlay Polygon

-Show a label on the polygon. It works but we did not like how it turned out.

-Show a graph when clicking on the polygon. They didn't use it because it was too many clicks to go from graph to graph.

-Change color or opacity of the polygon fill.

I would like to be able to return to the first option of showing an overlay polygon according to the irrigation progress.

If anyone could help me with that, I'd be very grateful.

var map;
var infoWindow;
var avanceRiego=50;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 18,
    center: {lat: 13.866291, lng: -90.204114},
    mapTypeId: 'terrain'
  });

  var coordenadas = [
      {lat: 13.866291, lng: -90.204114},
      {lat: 13.866325, lng: -90.204115},
      {lat: 13.866325, lng: -90.204115},
      {lat: 13.866365, lng: -90.20413},
      {lat: 13.86639,  lng: -90.20416},
      {lat: 13.86639,  lng: -90.20416},
      {lat: 13.866434, lng: -90.204177}, 
      {lat: 13.866457, lng: -90.204189}, 
      {lat: 13.866457, lng: -90.204189},
      {lat: 13.866494, lng: -90.204192},
      {lat: 13.866512, lng: -90.204298},
      {lat: 13.866507, lng: -90.204353},
      {lat: 13.866479, lng: -90.204402},
      {lat: 13.866479, lng: -90.204402},
      {lat: 13.86642,  lng: -90.204426},
      {lat: 13.86642,  lng: -90.204426},
      {lat: 13.86642,  lng: -90.204426},
      {lat: 13.866385, lng: -90.204396},
      {lat: 13.86636,  lng: -90.204366},
      {lat: 13.866353, lng: -90.204334},
      {lat: 13.866324, lng: -90.20429},
      {lat: 13.866303, lng: -90.204236},
      {lat: 13.866293, lng: -90.204177},
      {lat: 13.866282, lng: -90.20415},
      {lat: 13.866282, lng: -90.20415},
      {lat: 13.866291, lng: -90.204114}
  ];
  var poligono = new google.maps.Polygon({
    paths: coordenadas,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  poligono.setMap(map);
}
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
 <!-- Replace the value of the key parameter with your own API key. -->

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCK3ulYYM8GCwK-_HlZVNKvkgp-zvEebUM&callback=initMap" async defer></script>

javascript

1 Answers

  1. Best Answer

    As I have told you:

    From each polygon:

    1. Get your Bounding Box
    2. Make a new Bounding Box by taking 50% of its height (or width)
    3. Intersect the Bounding Box from step 2 with the original polygon

    NOTE: The result does NOT get a polygon with half the area of ​​the original.

    I leave you a practical example with Openlayers and the JSTS library .

    var coordenadas = [
  {lat: 13.866291, lng: -90.204114},
  {lat: 13.866325, lng: -90.204115},
  {lat: 13.866325, lng: -90.204115},
  {lat: 13.866365, lng: -90.20413},
  {lat: 13.86639,  lng: -90.20416},
  {lat: 13.86639,  lng: -90.20416},
  {lat: 13.866434, lng: -90.204177}, 
  {lat: 13.866457, lng: -90.204189}, 
  {lat: 13.866457, lng: -90.204189},
  {lat: 13.866494, lng: -90.204192},
  {lat: 13.866512, lng: -90.204298},
  {lat: 13.866507, lng: -90.204353},
  {lat: 13.866479, lng: -90.204402},
  {lat: 13.866479, lng: -90.204402},
  {lat: 13.86642,  lng: -90.204426},
  {lat: 13.86642,  lng: -90.204426},
  {lat: 13.86642,  lng: -90.204426},
  {lat: 13.866385, lng: -90.204396},
  {lat: 13.86636,  lng: -90.204366},
  {lat: 13.866353, lng: -90.204334},
  {lat: 13.866324, lng: -90.20429},
  {lat: 13.866303, lng: -90.204236},
  {lat: 13.866293, lng: -90.204177},
  {lat: 13.866282, lng: -90.20415},
  {lat: 13.866282, lng: -90.20415},
  {lat: 13.866291, lng: -90.204114}
];

var parserJSTS = new jsts.io.OL3Parser();

var poly = new ol.Feature({
  geometry: new ol.geom.Polygon([coordenadas.map(({lng, lat})=>[lng, lat])])
})

var boundingBox = poly.getGeometry().getExtent()
var polybbox = new ol.Feature({
  geometry: ol.geom.Polygon.fromExtent(boundingBox)
})

var [xmin, ymin, xmax, ymax] = boundingBox
var porcentaje = 0.25
var newXmax = xmin + ((xmax - xmin) * porcentaje)

var newBoundingBox = [xmin, ymin, newXmax, ymax]

var polybbox50 = new ol.Feature({
  geometry: ol.geom.Polygon.fromExtent(newBoundingBox)
})

var polybbox50jsts = parserJSTS.read(polybbox50.getGeometry())

var polyjsts = parserJSTS.read(poly.getGeometry())

var intersectionJSTSGeometry = polyjsts.intersection(polybbox50jsts)

var intersectionGeometry = parserJSTS.write(intersectionJSTSGeometry)

var newPoly = new ol.Feature({ geometry: intersectionGeometry })
//console.log(boundingBox)

newPoly.setStyle(new ol.style.Style({
  fill: new ol.style.Fill({
    color: '#ffbb00'
  })
}))

var layer = new ol.layer.Vector({
  source: new ol.source.Vector()
})

// Descomentar para ver los bounding boxes
//layer.getSource().addFeature(polybbox)
//layer.getSource().addFeature(polybbox50)
layer.getSource().addFeature(poly)
layer.getSource().addFeature(newPoly)


var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    layer
  ],
  target: 'map',
  controls: ol.control.defaults({
    attributionOptions:({
      collapsible: false
    })
  }),
  view: new ol.View({
    center: [0, 0],
    zoom: 2,
    projection: 'EPSG:4326'
  })
});

map.getView().fit(boundingBox)
    #map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsts/1.5.0/jsts.js"></script>
<script src="https://openlayers.org/en/v4.5.0/build/ol-debug.js"></script>
<link href="https://openlayers.org/en/v4.5.0/css/ol.css" rel="stylesheet"/>

<div id="map" class="map" tabindex="0"></div>

    • 3