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

У меня есть многоугольник и карта Москвы. Этот многоугольник не полностью покрывает карту. Пытаюсь получить многоугольник, который полностью находится в Москве (т.е. из четырехугольного многоугольника нужно вырезать кусок, который выходит за пределы Москвы). Я нашел 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.info('mapit', mapit);
console.info('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.info('mypolygon',mypolygon);
console.info("total " + keys.length + " keys: " + keys);
console.info('multipolygon', multiPoly);
//var result = martinez.diff(mypolygon.geometry.coordinates,mapit.dater.coordinates);
//console.info('result',result);

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

console.info('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>

Вы указываете координаты в следующем формате: [55.68623,37.45507]. В json-файле, который вы загружаете, они представлены в этом формате (то есть наоборот): [ 37.8430436, 55.8143651 ] - это может быть как-то связано с этим.

duncan 29.10.2018 12:28

@duncan, спасибо за ответ. Это была причина

Marat Idrisov 29.10.2018 20:03
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
467
0

Другие вопросы по теме