如何找到折线的重叠以便在谷歌地图上绘制公共线段 [英] How to find the overlap of polylines in order to draw the common segment as shaded on google maps

查看：17
本文介绍了如何找到折线的重叠以便在谷歌地图上绘制公共线段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在开展一个小型项目，以根据路线段的重叠显示路线效率低下.

例如，我在这里放了一个

代码片段:

var map;var方向服务；var bounds = new google.maps.LatLngBounds();var polyline1 = 新的 google.maps.Polyline({小路: []，strokeColor: "#DD71D8",行程重量:1});var polyline2 = 新的 google.maps.Polyline({小路: []，strokeColor: "#0000ff",行程重量:1});var polyline3 = 新的 google.maps.Polyline({小路: []，strokeColor: "#ff0000",行程重量:8});函数加载路由1(){变种请求 = {来源:新 google.maps.LatLng(30.244517, -97.892271),目的地:新的 google.maps.LatLng(30.244517, -97.892271),航路点:[{位置:新 google.maps.LatLng(30.241532, -97.894202)}, {位置:新 google.maps.LatLng(30.240374, -97.891633)}, {位置:新 google.maps.LatLng(30.244220, -97.890442)}],travelMode:google.maps.TravelMode.DRIVING};方向Service.route(请求，功能(结果，状态){如果(状态 == google.maps.DirectionsStatus.OK){结果.draggable = true;var renderer = new google.maps.DirectionsRenderer({draggable: false,//true,折线选项:{strokeColor: "#DD71D8",行程重量:1},地图:地图});var path = result.routes[0].overview_path;var 腿 = 结果.routes[0].legs;for (i = 0; i <legs.length; i++) {var 步数 = 腿 [i].steps;对于 (j = 0; j < 步长; j++) {var nextSegment = 步骤[j].path;for (k = 0; k < nextSegment.length; k++) {折线1.getPath().push(nextSegment[k]);bounds.extend(nextSegment[k]);}}}//polyline1.setMap(map);if (polyline2.getPath().getLength() > 1) {getPolylineIntersection();}渲染器.setDirections(结果)；}});}函数加载路由2(){变种请求 = {来源:新 google.maps.LatLng(30.244220, -97.890426),目的地:新的 google.maps.LatLng(30.244220, -97.890426),航路点:[{位置:新 google.maps.LatLng(30.243312, -97.890877)}, {位置:新 google.maps.LatLng(30.242431, -97.891601)}, {位置:新 google.maps.LatLng(30.243145, -97.893156)}, {位置:新 google.maps.LatLng(30.242357, -97.893811)}, {位置:新 google.maps.LatLng(30.241671, -97.891783)}],travelMode:google.maps.TravelMode.DRIVING};方向Service.route(请求，功能(结果，状态){如果(状态 == google.maps.DirectionsStatus.OK){结果.draggable = true;var renderer = new google.maps.DirectionsRenderer({draggable: false,//true,折线选项:{strokeColor: "#0000ff",行程重量:1},地图:地图});var path = result.routes[0].overview_path;var 腿 = 结果.routes[0].legs;for (i = 0; i <legs.length; i++) {var 步数 = 腿 [i].steps;对于 (j = 0; j < 步长; j++) {var nextSegment = 步骤[j].path;for (k = 0; k < nextSegment.length; k++) {polyline2.getPath().push(nextSegment[k]);bounds.extend(nextSegment[k]);}}}//polyline2.setMap(map);if (polyline1.getPath().getLength() > 1) {getPolylineIntersection();}渲染器.setDirections(结果)；}});}函数 getPolylineIntersection() {var commonPts = [];for (var i = 0; i < polyline1.getPath().getLength(); i++) {for (var j = 0; j < polyline2.getPath().getLength(); j++) {if (polyline1.getPath().getAt(i).equals(polyline2.getPath().getAt(j))) {commonPts.push({纬度:折线1.getPath().getAt(i).lat()，lng:折线1.getPath().getAt(i).lng()，route1idx:我});}}}变量路径 = [];var prevIdx = commonPts[0].route1idx;for (var i = 0; i < commonPts.length; i++) {if (commonPts[i].route1idx <= prevIdx + 1) {path.push(commonPts[i]);prevIdx = commonPts[i].route1idx;} 别的 {var polyline = new google.maps.Polyline({地图:地图，路径:路径，行程重量:8，中风颜色:#ff0000"});路径 = [];prevIdx = commonPts[i].route1idx;}}var polyline = new google.maps.Polyline({地图:地图，路径:路径，行程重量:8，中风颜色:#ff0000"});}函数初始化(){var mapOptions = {缩放:16，可拖动:真，中央: {纬度:30.241532，液化天然气:-97.894202}};map = new google.maps.Map(document.getElementById('map'), mapOptions);方向服务 = 新的 google.maps.DirectionsService();loadRoute1();loadRoute2();}初始化();

#map {宽度:500px；高度:500px；}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></脚本><div id="map"></div>

I am working on a small project to show inefficiency of routes based on overlap of route segments.

So for example, I put together a JSFIDDLE here showing a pink and blue line overlapping between D and E. How can I determine that this stretch of road has an overlap in their routes?

Routes would be drawn by a user manually, this example just provides an example of an overlap I am trying to detect:

var map;
var directionsService;


function loadRoute1() {
var request = {
    origin: new google.maps.LatLng(30.244517, -97.892271),
    destination: new google.maps.LatLng(30.244517, -97.892271),
    waypoints: [
        { location: new google.maps.LatLng(30.241532, -97.894202) },
        { location: new google.maps.LatLng(30.239549, -97.894567) }
    ],
    travelMode: google.maps.TravelMode.DRIVING
};

directionsService.route(request, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        result.draggable = true;
        var renderer = new google.maps.DirectionsRenderer({
            draggable: true,
            polylineOptions: { strokeColor: "#DD71D8" },
            map: map
        });
        renderer.setDirections(result);

    }
});
}

function loadRoute2() {
var request = {
    origin: new google.maps.LatLng(30.244220, -97.890426),
    destination: new google.maps.LatLng(30.244220, -97.890426),
    waypoints: [
        { location: new google.maps.LatLng(30.243312, -97.890877) },
        { location: new google.maps.LatLng(30.242431, -97.891601 ) },
        { location: new google.maps.LatLng(30.243145, -97.893156) },
        { location: new google.maps.LatLng(30.242357, -97.893811) },
        { location: new google.maps.LatLng(30.241671, -97.891783) }
    ],
    travelMode: google.maps.TravelMode.DRIVING
};


directionsService.route(request, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        result.draggable = true;
        var renderer = new google.maps.DirectionsRenderer({
            draggable: true,
            polylineOptions: { strokeColor: "#0000ff" },
            map: map
        });
        renderer.setDirections(result);
    }
});
}

function initialize() {

var mapOptions = {
    zoom: 16,
    draggable: true,
    center: { lat: 30.241532, lng: -97.894202 } 
};

map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsService = new google.maps.DirectionsService();

loadRoute1();
loadRoute2();

}

initialize();

Just as a display, a separate polyline should be created with striping of the colors for the routes that overlap. 

<html> 
    <body> 
        <div id="map" style="height:500px;width:500px"></div> 
    </body>
</html>

I would like to display the overlapping segments of the routes as striped similar to how this map is doing it.

解决方案

To determine the points in common:

  1. get all the points from the directions result returned
  2. process through both polylines looking for common points

proof of concept fiddle

updated proof of concept with multiple overlaps

code snippet:

var map;
var directionsService;
var bounds = new google.maps.LatLngBounds();

var polyline1 = new google.maps.Polyline({
  path: [],
  strokeColor: "#DD71D8",
  strokeWeight: 1
});
var polyline2 = new google.maps.Polyline({
  path: [],
  strokeColor: "#0000ff",
  strokeWeight: 1
});
var polyline3 = new google.maps.Polyline({
  path: [],
  strokeColor: "#ff0000",
  strokeWeight: 8
});


function loadRoute1() {
  var request = {
    origin: new google.maps.LatLng(30.244517, -97.892271),
    destination: new google.maps.LatLng(30.244517, -97.892271),
    waypoints: [{
      location: new google.maps.LatLng(30.241532, -97.894202)
    }, {
      location: new google.maps.LatLng(30.240374, -97.891633)
    }, {
      location: new google.maps.LatLng(30.244220, -97.890442)
    }],
    travelMode: google.maps.TravelMode.DRIVING
  };

  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      result.draggable = true;
      var renderer = new google.maps.DirectionsRenderer({
        draggable: false, // true,
        polylineOptions: {
          strokeColor: "#DD71D8",
          strokeWeight: 1
        },
        map: map
      });
      var path = result.routes[0].overview_path;
      var legs = result.routes[0].legs;
      for (i = 0; i < legs.length; i++) {
        var steps = legs[i].steps;
        for (j = 0; j < steps.length; j++) {
          var nextSegment = steps[j].path;
          for (k = 0; k < nextSegment.length; k++) {
            polyline1.getPath().push(nextSegment[k]);
            bounds.extend(nextSegment[k]);
          }
        }
      }
      // polyline1.setMap(map);
      if (polyline2.getPath().getLength() > 1) {
        getPolylineIntersection();
      }
      renderer.setDirections(result);
    }
  });
}

function loadRoute2() {
  var request = {
    origin: new google.maps.LatLng(30.244220, -97.890426),
    destination: new google.maps.LatLng(30.244220, -97.890426),
    waypoints: [{
      location: new google.maps.LatLng(30.243312, -97.890877)
    }, {
      location: new google.maps.LatLng(30.242431, -97.891601)
    }, {
      location: new google.maps.LatLng(30.243145, -97.893156)
    }, {
      location: new google.maps.LatLng(30.242357, -97.893811)
    }, {
      location: new google.maps.LatLng(30.241671, -97.891783)
    }],
    travelMode: google.maps.TravelMode.DRIVING
  };


  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      result.draggable = true;
      var renderer = new google.maps.DirectionsRenderer({
        draggable: false, // true,
        polylineOptions: {
          strokeColor: "#0000ff",
          strokeWeight: 1
        },
        map: map
      });
      var path = result.routes[0].overview_path;
      var legs = result.routes[0].legs;
      for (i = 0; i < legs.length; i++) {
        var steps = legs[i].steps;
        for (j = 0; j < steps.length; j++) {
          var nextSegment = steps[j].path;
          for (k = 0; k < nextSegment.length; k++) {
            polyline2.getPath().push(nextSegment[k]);
            bounds.extend(nextSegment[k]);
          }
        }
      }
      // polyline2.setMap(map);
      if (polyline1.getPath().getLength() > 1) {
        getPolylineIntersection();
      }
      renderer.setDirections(result);
    }
  });
}

function getPolylineIntersection() {
  var commonPts = [];
  for (var i = 0; i < polyline1.getPath().getLength(); i++) {
    for (var j = 0; j < polyline2.getPath().getLength(); j++) {
      if (polyline1.getPath().getAt(i).equals(polyline2.getPath().getAt(j))) {
        commonPts.push({
          lat: polyline1.getPath().getAt(i).lat(),
          lng: polyline1.getPath().getAt(i).lng(),
          route1idx: i
        });
      }
    }
  }
  var path = [];
  var prevIdx = commonPts[0].route1idx;
  for (var i = 0; i < commonPts.length; i++) {
    if (commonPts[i].route1idx <= prevIdx + 1) {
      path.push(commonPts[i]);
      prevIdx = commonPts[i].route1idx;
    } else {
      var polyline = new google.maps.Polyline({
        map: map,
        path: path,
        strokeWeight: 8,
        strokeColor: "#ff0000"
      });
      path = [];
      prevIdx = commonPts[i].route1idx;
    }
  }
  var polyline = new google.maps.Polyline({
    map: map,
    path: path,
    strokeWeight: 8,
    strokeColor: "#ff0000"
  });

}

function initialize() {

  var mapOptions = {
    zoom: 16,
    draggable: true,
    center: {
      lat: 30.241532,
      lng: -97.894202
    }
  };

  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsService = new google.maps.DirectionsService();

  loadRoute1();
  loadRoute2();

}

initialize();

#map {
  width: 500px;
  height: 500px;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map"></div>

这篇关于如何找到折线的重叠以便在谷歌地图上绘制公共线段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆