在多边形中添加一些区域 [JavaScript:: Google Map API v3] [英] Add some area in polygon [JavaScript:: Google Map API v3]
本文介绍了在多边形中添加一些区域 [JavaScript:: Google Map API v3]的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在 database 中有一些点可以在地图上制作多边形.我正在使用 Google Map Api v 3.现在我正在尝试在多边形中添加一些区域，例如我想在多边形的每一侧添加 100m 并在地图上与原始区域一起创建新区域.我试过了，但它没有正确制作.我在这里添加我的代码.注意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; x0) {for(var k = 0;k 解决方案
一种选择是找到多边形的中心，然后将点放置在距每个现有点中心 100m(或任何距离)更远的地方.
代码(修改自这个问题):
function drawEdgesPoly(poly) {//形状是原始的父多边形var 形状 = 聚；//将填充常量设置为 1(即周围 1m 的距离)填充 = 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({位置:中心，地图:地图，图标: {网址:https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png"，大小:新的 google.maps.Size(7, 7)，锚点:新 google.maps.Point(4, 4)}});var 折线 = [];var newPath = [];for (var i = 0; i < vertices.getLength(); i++) {polylines.push(new google.maps.Polyline({路径:[中心，vertices.getAt(i)]，地图:地图，笔画宽度:2，strokeColor: '红色'}));newPath[i] = google.maps.geometry.sphereal.computeOffset(center,padding+google.maps.geometry.sphereal.computeDistanceBetween(center,vertices.getAt(i)),google.maps.geometry.sphereal.computeHeading(center,vertices.getAt(i)));}//渲染外部形状var 外 = 新的 google.maps.Polygon({strokeColor: '白色',中风不透明度:0.8，行程重量:1，填充颜色:'黑色'，填充不透明度:0.35，地图:地图，可假，路径:新路径});};另一种选择是使用像 JSTS 这样的 GIS 库.相关问题:
您想要做的称为<a href="http://wiki.gis.com/wiki/index.php/Buffering" rel="nofollow noreferrer">缓冲"，JSTS Buffer Builder 可以做什么你需要.
来自缓冲多边形:
缓冲多边形数据
GIS 操作通常需要对点、线或多边形进行缓冲"以进行分析.
缓冲多边形数据的算法使用与线缓冲算法相同的过程，只有一个小区别 - 多边形缓冲区仅在定义多边形的线的一侧创建.
默认方法是创建一个围绕多边形边界的缓冲区 - 一些 GIS 软件包还提供了创建位于多边形边界内的缓冲区的选项.
代码片段(来自上面的简单算法，不适用于复杂的多边形):
var map = null;var bounds = new google.maps.LatLngBounds();var drawEdgesPoly = 函数(多边形){//形状是原始的父多边形var 形状 = 聚；//将填充常量设置为 1(即周围 1m 的距离)填充 = 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({位置:中心，地图:地图，图标: {url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",大小:新的 google.maps.Size(7, 7)，锚点:新 google.maps.Point(4, 4)}});var 折线 = [];var newPath = [];for (var i = 0; i < vertices.getLength(); i++) {polylines.push(new google.maps.Polyline({路径:[中心，vertices.getAt(i)]，地图:地图，笔画宽度:2，strokeColor: '红色'}));newPath[i] = google.maps.geometry.sphereal.computeOffset(center,填充 + google.maps.geometry.sphereal.computeDistanceBetween(center, vertices.getAt(i)),google.maps.geometry.sphereal.computeHeading(center, vertices.getAt(i)));bounds.extend(newPath[i]);}//渲染外部形状var 外 = 新的 google.maps.Polygon({strokeColor: '白色',中风不透明度:0.8，行程重量:1，填充颜色:'黑色'，填充不透明度:0.35，地图:地图，可假，路径:新路径});map.fitBounds(bounds);};$(函数(){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 = 多边形；var 多边形 = polyPoints.split(":");for (var j = 0; j 0) {for (var k = 0; k #map-canvas {高度:400px；边距:0；填充:0；宽度: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">I have some points in database that make polygon on map. i am using Google Map Api v 3. Now I am trying to add some area in polygon such as I would like to add 100m in every side of polygon and make new one on map along with the original. I tried that but it not make correctly. i add up my code here.
Note
100m area is just example value
Code
$(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
});
}
}
}
});
解决方案
One option would be to find the center of the polygon, then place points 100m (or whatever the distance is) further from the center from each existing point.
Code (modified from 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
});
};
Another option would be to use a GIS library like JSTS. Related questions:
- How to calculate intersection area in Google Maps API with JSTS Library?
- Google Maps Polygons self intersecting detection
What you want to do is called "buffering", the JSTS Buffer Builder may do what you need.
from Buffering Polygons:
Buffering Polygon Data
GIS operations often require a point, line or polygon to be 'buffered' for analysis purposes.
The algorithm for buffering polygon data uses the same process as the line buffering algorithm, with one small difference - the polygon buffer is created on only one side of the line which defines the polygon.
The default method is to create a buffer which surrounds the polygon boundary - some GIS software packages also give an option to create a buffer that lies inside the polygon boundary.
jsfiddle with buffered polygons using JSTS
Code snippet (from the simple algorithm above, won't work for complex polygons):
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:: Google Map API v3]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
