在多边形中添加一些区域[JavaScript :: Google Map API v3]

Question

我在database中有一些点可以在地图上创建多边形。我正在使用Google Map Api v 3。现在我试图在多边形中添加一些区域，例如我想在多边形的每一侧添加100m，并在地图上与原始区域一起创建新的区域。我尝试过，但它没有正确。我在这里添加我的代码。 注意 100米区域只是示例值

代码

$(function() {
    mapOptions = new Object();
    mapOptions.zoom=19;
    mapOptions.center = new google.maps.LatLng(33.575802425924934, 73.14534723758698);
    mapOptions.mapTypeId=google.maps.MapTypeId.HYBRID;
    var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
    google.maps.event.addListener(map, 'click', function(event) {
        console.log(event.latLng);
    });
    var polypoints = "(33.575802425924934, 73.14534723758698),(33.575523088532094, 73.14514607191086),(33.57521916842187, 73.14516484737396),(33.575026983094006, 73.14519703388214),(33.575040391386565, 73.14552694559097),(33.575290679132316, 73.14581662416458),(33.57557448668024, 73.14587026834488),(33.57559906839246, 73.14569056034088),(33.57580466062044, 73.14542233943939):(33.57627171070981, 73.14412951469421),(33.575270566751, 73.14402222633362),(33.575413588027466, 73.14471960067749),(33.576504117468154, 73.14465522766113):";
    var totalBoundary = 1;
    var isGetPoly = false;
    var getClubId = 0;
    for(var x = 0; x<totalBoundary; x++) {
        var polyPoints = polypoints;
        var polygonals=polyPoints.split(":");
        for(var j = 0;j < polygonals.length;j++) {
            var points=polygonals[j].split("),");
            var latlng = [];
            var latlng1 = [];
            var leng=points.length-1;
            if(points.length>0) {
                for(var k = 0;k < points.length;k++) {
                    var latslngs=points[k].replace("(","");
                    var latslng=latslngs.replace(")","");
                    var ltslng=latslng.split(",");
                    var latPoint = ltslng[0];
                    var lngPoint = ltslng[1];
                    latlng.push(new google.maps.LatLng(latPoint,lngPoint));
                    latPoint = parseFloat(latPoint)+0.0001;
                    lngPoint = parseFloat(lngPoint)+0.0001;
                    latlng1.push(new google.maps.LatLng(latPoint,lngPoint));
                }
                var bermudaTriangle = new google.maps.Polygon({
                    paths : latlng,
                    strokeColor : "#FF0000",
                    strokeOpacity : 0.8,
                    id:"polygon_"+(j+1),
                    editable : true,
                    strokeWeight : 2,
                    fillColor : "#FF0000",
                    fillOpacity : 0.35,
                    map:map
                });
                var bermudaTriangle1 = new google.maps.Polygon({
                    paths : latlng1,
                    strokeColor : "#FFFFFF",
                    strokeOpacity : 0.8,
                    id:"polygon_"+(j+1),
                    editable : true,
                    strokeWeight : 2,
                    fillColor : "#FF0000",
                    fillOpacity : 0.35,
                    map:map
                });
            }
        }
    }
});

Demo

Answer 1

一个选项是找到多边形的中心，然后从每个现有点的中心放置距离中心100米（或任何距离）。

代码（从this question修改）：

function drawEdgesPoly(poly) {
  // shape is the original, parent polygon

  var shape = poly;
  // set padding constant to 1 (i.e. 1m distance all around) 
  padding = 100;

  var vertices = shape.getPath();
  var polybounds = new google.maps.LatLngBounds();
  for (var i = 0; i < vertices.getLength(); i++) {
    polybounds.extend(vertices.getAt(i));
  }
  var center = polybounds.getCenter();
  var centerMarker = new google.maps.Marker({
    position: center,
    map: map,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(4, 4)
    }
  });
  var polylines = [];
  var newPath = [];
  for (var i = 0; i < vertices.getLength(); i++) {
    polylines.push(new google.maps.Polyline({
      path: [center, vertices.getAt(i)],
      map: map,
      strokeWidth: 2,
      strokeColor: 'red'
    }));
    newPath[i] = google.maps.geometry.spherical.computeOffset(center,
      padding+google.maps.geometry.spherical.computeDistanceBetween(center,vertices.getAt(i)),
      google.maps.geometry.spherical.computeHeading(center,vertices.getAt(i)));
  }
  // render outer shape
  var outer = new google.maps.Polygon({
    strokeColor: 'white',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: 'black',
    fillOpacity: 0.35,
    map: map,
    editable: false,
    path: newPath
  });
};

working fiddle

另一种选择是使用像JSTS这样的GIS库。相关问题：

• How to calculate intersection area in Google Maps API with JSTS Library?
• Google Maps Polygons self intersecting detection

您想要做的是"buffering"，JSTS Buffer Builder可以做您需要的。

来自Buffering Polygons：

缓冲多边形数据

GIS操作通常需要点，线或多边形来缓冲＆＃39;用于分析目的。

缓冲多边形数据的算法使用与线缓冲算法相同的过程，只有一个小区别 - 多边形缓冲区仅在定义多边形的线的一侧创建。

默认方法是创建一个围绕多边形边界的缓冲区 - 一些GIS软件包还提供了一个创建位于多边形边界内的缓冲区的选项。

jsfiddle with buffered polygons using JSTS

代码段（来自上面的简单算法，赢得了复杂多边形的工作）：

＆＃13;

＆＃13;

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

var drawEdgesPoly = function(poly) {
  // shape is the original, parent polygon

  var shape = poly;
  // set padding constant to 1 (i.e. 1m distance all around) 
  padding = 100;

  var vertices = shape.getPath();
  var polybounds = new google.maps.LatLngBounds();
  for (var i = 0; i < vertices.getLength(); i++) {
    polybounds.extend(vertices.getAt(i));
  }
  var center = polybounds.getCenter();
  var centerMarker = new google.maps.Marker({
    position: center,
    map: map,
    icon: {
      url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(4, 4)
    }
  });
  var polylines = [];
  var newPath = [];
  for (var i = 0; i < vertices.getLength(); i++) {
    polylines.push(new google.maps.Polyline({
      path: [center, vertices.getAt(i)],
      map: map,
      strokeWidth: 2,
      strokeColor: 'red'
    }));
    newPath[i] = google.maps.geometry.spherical.computeOffset(center,
      padding + google.maps.geometry.spherical.computeDistanceBetween(center, vertices.getAt(i)),
      google.maps.geometry.spherical.computeHeading(center, vertices.getAt(i)));
    bounds.extend(newPath[i]);
  }
  // render outer shape
  var outer = new google.maps.Polygon({
    strokeColor: 'white',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: 'black',
    fillOpacity: 0.35,
    map: map,
    editable: false,
    path: newPath
  });
  map.fitBounds(bounds);
};

$(function() {
  mapOptions = new Object();
  mapOptions.zoom = 19;
  mapOptions.center = new google.maps.LatLng(33.575802425924934, 73.14534723758698);
  mapOptions.mapTypeId = google.maps.MapTypeId.HYBRID;
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  google.maps.event.addListener(map, 'click', function(event) {
    console.log(event.latLng);
  });
  var polypoints = "(33.575802425924934, 73.14534723758698),(33.575523088532094, 73.14514607191086),(33.57521916842187, 73.14516484737396),(33.575026983094006, 73.14519703388214),(33.575040391386565, 73.14552694559097),(33.575290679132316, 73.14581662416458),(33.57557448668024, 73.14587026834488),(33.57559906839246, 73.14569056034088),(33.57580466062044, 73.14542233943939):(33.57627171070981, 73.14412951469421),(33.575270566751, 73.14402222633362),(33.575413588027466, 73.14471960067749),(33.576504117468154, 73.14465522766113)";
  var totalBoundary = 1;
  var isGetPoly = false;
  var getClubId = 0;
  for (var x = 0; x < totalBoundary; x++) {
    var polyPoints = polypoints;
    var polygonals = polyPoints.split(":");
    for (var j = 0; j < polygonals.length; j++) {
      var points = polygonals[j].split("),");
      var latlng = [];
      var latlng1 = [];
      var leng = points.length - 1;
      if (points.length > 0) {
        for (var k = 0; k < points.length; k++) {
          var latslngs = points[k].replace("(", "");
          var latslng = latslngs.replace(")", "");
          var ltslng = latslng.split(",");
          var latPoint = ltslng[0];
          var lngPoint = ltslng[1];
          latlng.push(new google.maps.LatLng(latPoint, lngPoint));
          latPoint = parseFloat(latPoint) + 0.0001;
          lngPoint = parseFloat(lngPoint) + 0.0001;
          latlng1.push(new google.maps.LatLng(latPoint, lngPoint));
        }
        var bermudaTriangle = new google.maps.Polygon({
          paths: latlng,
          strokeColor: "#FF0000",
          strokeOpacity: 0.8,
          id: "polygon_" + (j + 1),
          editable: true,
          strokeWeight: 2,
          fillColor: "#FF0000",
          fillOpacity: 0.35,
          map: map
        });
        drawEdgesPoly(bermudaTriangle);

        console.log(google.maps.geometry.spherical.computeArea(bermudaTriangle.getPath()));

        //console.log(latlng);
        //console.log(latlng1);
        /*if (bermudaTriangle!=null && bermudaTriangle.Contains(Mappy.standingPosition)) {
            //getClubId = data.data[x].id;
            isGetPoly = true;
            break;
        }*/
      }
    }
    if (isGetPoly === true) {
      break;
    }
  }
});

＆＃13;

#map-canvas {
  height: 400px;
  margin: 0;
  padding: 0;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places,drawing,geometry"></script>
<div id="map-canvas">
</div>

＆＃13;

＆＃13;

＆＃13;