使用Google地图在多边形内绘制较小的多边形 [英] Draw a smaller Polygon inside a Polygon using Google Maps

问题描述

我正在尝试在Google地图上渲染形状（使用API​​的V3），其中包含相同的形状，内部更小。基本上是一个框内的框或多边形内的多边形。

对于矩形，我有以下代码，它有效：

  var drawEdgesRectangle = function（shape）{
 // shape是原始的父矩形
 
 var NE，SW，childNE， childSW，填充，对角线，内部; 
 
 //将填充常量设置为1（即全程1m距离）
 padding = 1; 
 
 //从角落获得对角线距离
 diagonal = Math.sqrt（2）* padding; 
 
 //获取父级的NE 
 NE = shape.bounds.getNorthEast（）; 
 
 //获取父级的SW 
 SW = shape.bounds.getSouthWest（）; 
 
 //获取子NE，SW 
 childNE = google.maps.geometry.spherical.computeOffset（NE，diagonal，225）; 
 childSW = google.maps.geometry.spherical.computeOffset（SW，diagonal，45）; 
 
 //渲染内部形状
 inner = new google.maps.Rectangle（{
 strokeColor：'white'，
 strokeOpacity：0.8，
 strokeWeight ：1，
 fillColor：'black'，
 fillOpacity：0.35，
 map：map，
 bounds：new google.maps.LatLngBounds（
 childSW，
 childNE 
）
}）; 
} 
  

当然，对多边形这样做是一个不同的鱼。我知道我可以使用 getPaths（）来获取每一行的属性，但要弄清楚如何放置内部行，并确实找出内部的位置是证明在概念上对我来说很难。

我想知道在Google API的基础上我想实现的目标是什么。

解决方案

如果你的多边形是简单的（中心是多边形的内部并且没有凹面），那么一个选项就是做类似于你对矩形做的事情（这是符合这些条件的四边形多边形）：

使用

  var map; var infoWindow; var poly; var inner; var polylines = []; var centerMarker; var paths = [[new google.maps.LatLng（38.872886，-77.054720），new google.maps.LatLng（38.872602， - 77.058046），new google.maps.LatLng（38.870080，-77.058604），new google.maps.LatLng（38.868894，-77.055664），new google.maps.LatLng（38.870598，-77.053346）]]; function initialize（）{var mapOptions = {center：new google.maps.LatLng（38.8714，-77.0556），zoom：15}; map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; poly = new google.maps.Polygon（{paths：paths，strokeWeight：3，fillColor：'＃55FF55'，fillOpacity：0.5，editable：true}）; poly.setMap（地图）; drawEdgesPoly（）; google.maps.event.addListener（poly.getPath（），'insert_at'，drawEdgesPoly）; google.maps.event.addListener（poly.getPath（），'remove_at'，drawEdgesPoly）; google.maps.event.addListener（poly.getPath（），'set_at'，drawEdgesPoly）; //在地图上定义信息窗口。 infoWindow = new google.maps.InfoWindow（）;} google.maps.event.addDomListener（window，'load'，initialize）; var drawEdgesPoly = function（）{// shape是原始的父多边形var shape = poly; //将填充常量设置为1（即全程1m距离）padding = 50; 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（）; if（centerMarker&& centerMarker.setMap）{centerMarker.setMap（null）; } 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）}}）; if（polylines&&（polylines.length> 0））{for（var i = 0; i< polylines.length; i ++）{polylines [i] .setMap（null）; 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（vertices.getAt（i），padding，google.maps.geometry.spherical.computeHeading（vertices.getAt（i），center））; } if（inner&& inner.setMap）inner.setMap（null）; //渲染内部形状inner = new google.maps.Polygon（{strokeColor：'white'，strokeOpacity：0.8，strokeWeight：1，fillColor：'black'，fillOpacity：0.35，map：map，editable：false，path：newPath }）;};  

  html，body，＃map-帆布{身高：100％; width：100％;}  

 < script src = https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry\"></script><div id =map-canvasstyle =height：100％; width ：100％;>< / div>  

I am trying to render shapes on Google Maps (using V3 of the API), which contain the same shape, just smaller inside. Basically a box within a box or a polygon within a polygon.

For the rectangle I have the following code, which works:

var drawEdgesRectangle = function (shape) {
  // shape is the original, parent rectangle

  var NE, SW, childNE, childSW, padding, diagonal, inner;

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

  // get diagonal distance from corner
  diagonal = Math.sqrt(2) * padding;

  // get NE of parent
  NE = shape.bounds.getNorthEast();

  // get SW of parent
  SW = shape.bounds.getSouthWest();

  // get child NE, SW
  childNE = google.maps.geometry.spherical.computeOffset(NE, diagonal, 225);
  childSW = google.maps.geometry.spherical.computeOffset(SW, diagonal, 45);

  // render inner shape
  inner = new google.maps.Rectangle({
    strokeColor: 'white',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: 'black',
    fillOpacity: 0.35,
    map: map,
    bounds: new google.maps.LatLngBounds(
      childSW,
      childNE
    )
  });
}

Of course, doing this for a polygon is a different kettle of fish. I know I can use getPaths() to get the attributes of each line, but working out how to place the inner lines, and indeed, work out where 'inside' is is proving to be conceptually quite difficult for me.

I would like to know if what I want to achieve is possible given the Google API.

解决方案

One option if you polygons are "simple" (the center is "inside" the polygon and there are no concave sides), would be to do something similar to what you did with the rectangle (which is a four sided polygon that meets those criteria):

Using the geometry library:

To include it:

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>

Code (assumes global "poly" and others):

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

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

  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();
  if (centerMarker && centerMarker.setMap) {
    centerMarker.setMap(null);
  }
  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)
    }
  });
  if (polylines && (polylines.length > 0)) {
    for (var i = 0; i < polylines.length; i++) {
      polylines[i].setMap(null);
    }
  }
  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(vertices.getAt(i),
      padding,
      google.maps.geometry.spherical.computeHeading(vertices.getAt(i), center));
  }
  if (inner && inner.setMap)
    inner.setMap(null);
  // render inner shape
  inner = new google.maps.Polygon({
    strokeColor: 'white',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: 'black',
    fillOpacity: 0.35,
    map: map,
    editable: false,
    path: newPath
  });
};

proof of concept fiddle Play with the polygon in the code snippet or the jsfiddle to see the constraints.

var map;
var infoWindow;
var poly;
var inner;
var polylines = [];
var centerMarker;

var paths = [
  [
    new google.maps.LatLng(38.872886, -77.054720),
    new google.maps.LatLng(38.872602, -77.058046),
    new google.maps.LatLng(38.870080, -77.058604),
    new google.maps.LatLng(38.868894, -77.055664),
    new google.maps.LatLng(38.870598, -77.053346)
  ]
];

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(38.8714, -77.0556),
    zoom: 15
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  poly = new google.maps.Polygon({
    paths: paths,
    strokeWeight: 3,
    fillColor: '#55FF55',
    fillOpacity: 0.5,
    editable: true
  });

  poly.setMap(map);
  drawEdgesPoly();

  google.maps.event.addListener(poly.getPath(), 'insert_at', drawEdgesPoly);
  google.maps.event.addListener(poly.getPath(), 'remove_at', drawEdgesPoly);
  google.maps.event.addListener(poly.getPath(), 'set_at', drawEdgesPoly);

  // Define an info window on the map.
  infoWindow = new google.maps.InfoWindow();
}

google.maps.event.addDomListener(window, 'load', initialize);

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

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

  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();
  if (centerMarker && centerMarker.setMap) {
    centerMarker.setMap(null);
  }
  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)
    }
  });
  if (polylines && (polylines.length > 0)) {
    for (var i = 0; i < polylines.length; i++) {
      polylines[i].setMap(null);
    }
  }
  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(vertices.getAt(i),
      padding,
      google.maps.geometry.spherical.computeHeading(vertices.getAt(i), center));
  }
  if (inner && inner.setMap)
    inner.setMap(null);
  // render inner shape
  inner = new google.maps.Polygon({
    strokeColor: 'white',
    strokeOpacity: 0.8,
    strokeWeight: 1,
    fillColor: 'black',
    fillOpacity: 0.35,
    map: map,
    editable: false,
    path: newPath
  });
};

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
<div id="map-canvas" style="height:100%; width:100%;"></div>

这篇关于使用Google地图在多边形内绘制较小的多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！