Разница двух полигонов JS - PullRequest
Новая
       38

Разница двух полигонов JS

0 голосов
/ 29 октября 2018

У меня есть многоугольник и карта Москвы. Этот многоугольник не полностью покрывает карту. Я пытаюсь получить многоугольник, который полностью расположен в Москве (то есть из многоугольника четырехугольника нужно вырезать кусок, который выходит за пределы Москвы). Я нашел 2 решения (http://turfjs.org/docs/#difference и https://github.com/w8r/martinez, пример: https://codepen.io/w8r/pen/rrBkER),, но в итоге я получаю свалку, которая находится в совершенно другой стране. Скажите мне, что не так в моем код и где я могу узнать больше об этом? 

let prefix =  'https://cors-anywhere.herokuapp.com/'
// The origin of the catchment.
let lng = 37.4306983;
  lat = 55.6347171;



// Center map on the origin.
let map = L.map('map', {
  center: [lat, lng],
  zoom: 20
});




map.createPane('labels');
map.getPane('labels').style.zIndex = 550;
map.getPane('labels').style.pointerEvents = 'none';

L.tileLayer(`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`).addTo(map);



var mapit = {};

    mapit.area_loaded = function(data) {
        var area = new L.GeoJSON(data,{
    // symbolize features
    style: function(feature) {
      return {
        color: '#210499',

      }
    }});
        mapit.areas.addLayer(area);

        map.fitBounds(mapit.areas.getBounds());
    };


    let xhr = new XMLHttpRequest();
mapit.areas = L.featureGroup();
    xhr.open('GET', prefix + `https://raw.githubusercontent.com/alphavector/json/master/959173.json`,false);
    xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
    xhr.setRequestHeader('Access-Control-Headers', 'X-Requested-With');
    xhr.onload = () => {
      let polygone = JSON.parse(xhr.responseText);
      mapit.dater = polygone;
      mapit.area_loaded( polygone );}

      xhr.send();



let multiPoly = mapit.dater;
mapit.areas.addTo(map);


console.log('mapit', mapit);
console.log('mapit.dater', mapit.dater);

var keys = [];
for(var k in mapit) keys.push(k);
let polcord = [[[55.68623,37.45507], [55.6584,37.53927], [55.60622,37.41147], [55.64954,37.3459],[55.68623,37.45507] ]];
var mypolygon = turf.polygon(polcord);
L.polygon(polcord).addTo(map);
console.log('mypolygon',mypolygon);
console.log("total " + keys.length + " keys: " + keys);
console.log('multipolygon', multiPoly);
//var result = martinez.diff(mypolygon.geometry.coordinates,mapit.dater.coordinates);
//console.log('result',result);

    //new L.GeoJSON(mp).addTo(map);
//var diff = turf.difference(mapit.dater, mypolygon);
//L.geoJSON(diff).addTo(map);
//console.log('diff',diff);
for (var i=0;i<multiPoly.coordinates.length;i++){ 

console.log('multiPoly.coordinates[i]',multiPoly.coordinates[i]);
var mp = {
  "type": "Feature",
  "geometry": {
    "type": "Polygon",
    "coordinates": multiPoly.coordinates[i]}};

var result = martinez.diff(polcord,mp.geometry.coordinates);
var mpr = {
  "type": "Feature",
  "geometry": {
    "type": "MultiPolygon",
    "coordinates": result}};

   new L.geoJson(mpr).addTo(map);

};

CSS: 

html,
body {
  height: 100%;
  width: 100%;
  position: fixed;
  padding: 0;
  margin: 0;
  border: 0;
}

.map {
  height: 70%;
  width: 100%;
}

HTML 

<div id="map" class="map"></div>
...