在多边形中添加一些区域[JavaScript :: Google Map API v3] [英] Add some area in polygon [JavaScript:: Google Map API v3]
问题描述
在 （）（ 一个选项是找到多边形的中心，然后放置点100m距离是从每个现有点的中心开始。数据库中有一些要素可以在地图上制作多边形。我正在使用 Google Map Api v 3 。现在我试图在多边形中添加一些区域，例如我想在多边形的每一边添加 100m ，并在原图上添加新的区域。我尝试过，但它没有正确。我在这里添加我的代码。
注意
100m区域仅为示例值
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。 （33.575802425924934,73.14534723758698），（33.575523088532094,73.14514607191086），（33.57521916842187,73.14516484737396），（33.575026983094006,73.14519703388214），（33.575040391386565,73.14552694559097），（33.575290679132316），（b）和（b） ，73.14581662416458），（33.57557448668024,73.14587026834488），（33.57559906839246,73.14569056034088），（33.57580466062044,73.14542233943939）:( 33.57627171070 （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
var polygonals = polyPoints.split（：）;
for（var j = 0; j
var latlng = [];
var latlng1 = [];
var leng = points.length-1; （var k = 0; k
var latslng = latslngs.replace（），）;
var ltslng = latslng.split（，）;
var latPoint = ltslng [0];
var lngPoint = ltslng [1];
latlng.push（新增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
}）;
}
}
}
}）;
<$>
// shape是原始的，父多边形
var shape = poly;
//设置填充常数为1（即全部距离为1m）
padding = 100;
var vertices = shape.getPath（）;
var polybounds = new google.maps.LatLngBounds（）; （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：{$ b $ 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）））;
}
//渲染外形
var outer = new google.maps.Polygon（{
strokeColor：'white'，
strokeOpacity：0.8，
strokeWeight：1，
fillColor：'black'，
fillOpacity：0.35，
map：map，
editable：false，
path：newPath
}）;
};
另一种选择是使用像JSTS这样的GIS库。相关问题：
您要做的事情叫做buffering， JSTS Buffer Builder a>可以做你需要的东西。
from ：
$ bGIS操作通常需要一个点，线或多边形来进行分析。
缓冲多边形数据的算法使用与线缓冲算法相同的过程，其中一个小的区别 - 多边形缓冲区仅在定义多边形的线的一侧创建。
默认方法是创建围绕多边形边界的缓冲区 - 一些GIS软件包还提供了一个选项，用于创建位于多边形边界内的缓冲区。
代码片段（来自上面的简单算法，不会为复杂多边形工作）：
var map = null; var b ounds = new google.maps.LatLngBounds（）; var drawEdgesPoly = function（poly）{// shape是原始的父多边形var shape = poly; //将填充常数设置为1（即全部距离为1m）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 = [];对于（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]）; } //渲染外部形状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。 map.MapTypeId.HYBRID; map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; google.maps.event.addListener（map，'click'，function（event）{console。日志（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 g etClubId = 0; for（var x = 0; x
＃map-canvas {height： 400像素;保证金：0;填充：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?v=3.exp&sensor=false&libraries=places,drawing,geometry\"> ;</script><div id =map-canvas>< / div> ;
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?v=3.exp&sensor=false&libraries=places,drawing,geometry"></script>
<div id="map-canvas">
</div>
这篇关于在多边形中添加一些区域[JavaScript :: Google Map API v3]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
