Длина буфера вокруг полилинии

Question

Я не очень хорош в математике, поэтому у меня возникла проблема. У меня есть маршрут от одного до другого района. Некоторое время я пытался нанести цветной участок вокруг маршрута фиксированной длины. Но я не могу получить хорошие закругленные углы, и отсутствие математики делает меня очень хитрым.

Теперь я получил это

И код

        var r = [];
        var bla = result.routes[0].overview_path;
        for(i in result.routes[0].overview_path) {
            r.push(new google.maps.LatLng(bla[i].lat()+z, bla[i].lng()-z));
        }
        bla.reverse();
        for(x in bla) {
            r.push(new google.maps.LatLng(bla[x].lat()-z, bla[x].lng()+z));
        }

        var kelias = new google.maps.Polyline({
            path: result.routes[0].overview_path,
            strokeColor: "#00000",
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

        kelias.setMap(MAP);

        fonas = new google.maps.Polygon({
            paths: r,
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF0000",
            fillOpacity: 0.35
        });

        fonas.setMap(MAP);

Я просто хочу попросить некоторые информационные указания ИЛИ может быть, некоторые из вас уже выполнили эту функцию и имеют некоторые функции

Рабочая демо здесь . Каким-то образом мне нужно получить тот же результат рисования, что.

SOLUTIONS

• Буферизованная ломаная с использованием библиотеки JSTS.
• Серверное решение ArcGIS

Answer 1

Я нашел этот стек в SO Алгоритм обводки пути (преобразование в треугольники / квадраты) или другие предложения , где есть аналогичный вопрос, только для C ++.

Ответ - алгоритм в этом PDF на стр. 3 (алгоритм CONVOLVE).

Если бы вы могли создать рабочий пример в JSFiddle , мы могли бы там запрограммировать решение.

- редактировать

После некоторого времени анализа скрипта по ссылке, предоставленной вами для демонстрации life , я обнаружил, что ломаная не рассчитывается в javascript, но вычисляется на сервере и возвращается с помощью вызова AJAX. в какую-нибудь программу на Perl.

Answer 2

Разве вы не можете просто нарисовать еще одну ломаную линию на том же пути, что и первая, с большим ходом? Он не дает точно таких же результатов, то есть многоугольник с цветом границы, отличным от цвета заливки, но общий эффект очень похож.

// first, black line
var kelias = new google.maps.Polyline({
            path: result.routes[0].overview_path,
            strokeColor: "#000000",
            strokeOpacity: 1.0,
            strokeWeight: 2
        });

// second, translucent red line
var kelias2 = new google.maps.Polyline({
            path: result.routes[0].overview_path,
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 40,
            map: MAP
        });

Обновление: Вы добавляете и вычитаете z из широты и долготы точек на вашем пути. Учитывая, что широта колеблется от +90 до -90, а долгота - от +180 до -180, я думаю, вам, возможно, понадобятся разные значения для каждого.