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

标签 javascript google-maps google-maps-api-3 polygon area

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

代码

$(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

最佳答案

一种选择是找到多边形的中心，然后将点放置在距每个现有点中心 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 库。相关问题:

你想做的叫做 "buffering" ，JSTS Buffer Builder 可能会做你需要的。

来自 Buffering Polygons :

缓冲多边形数据

GIS 操作通常需要“缓冲”点、线或多边形以进行分析。

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

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

jsfiddle with buffered polygons using JSTS

代码片段(来自上面的简单算法，不适用于复杂的多边形):

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;
    }
  }
});
#map-canvas {
  height: 400px;
  margin: 0;
  padding: 0;
  width: 100%;
}
<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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places,drawing,geometry"></script>
<div id="map-canvas">
</div>

关于javascript - 在多边形中添加一些区域 [JavaScript::Google Map API v3]，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27089944/

上一篇：按提交按钮后连接字符的javascript函数

下一篇：javascript - 加载javascript文件运行时

相关文章：

javascript - 能否在 TDD 方法中淘汰和删除冗余测试？

javascript - 我的 C++ 代码比 JavaScript 代码慢很多

javascript - 如何在 D3 map 上添加线条箭头(标记)？

android - 在谷歌地图中绘制多边形线的 key 生成错误

javascript - 如何在一个文本字段中显示 2 个坐标(Google map API)？

javascript - 如何在街景全​​景中动态更新链接？

javascript - 如何使用网络音频 api 获取原始 pcm 音频？

javascript - Chrome 框架时间轴上的白条是什么意思？

google-maps - 解码谷歌地图嵌入参数

google-maps - 将邮政编码作为值传递给地址参数时，Google Maps API 地理编码不返回结果

©2024 IT工具网  联系我们