世界地图带孔洞的多边形（谷歌地图） [英] Polygon of world map with a hole (google maps)

问题描述

我试图绘制一个带洞的矩形多边形。我的问题是我无法创建一个覆盖整个世界的多边形。多边形是倒置的，因此只选择一条线代替整个世界。

下面是我能够做出的最大选择范例。例如，如果我尝试将0（在新行google.maps.LatLng（-85.1054596961173， 0 ））中更改为任何其他值，则会使用倒排选择。

也许我错过了一些显而易见的东西，但我似乎无法得到它的效果。

<$ p $ （
var zoomOptions = {
zoom：1，
center：new google.maps.LatLng（24.886436490787712，-70.2685546875），
mapTypeId：google.maps.MapTypeId.TERRAIN
};


var map = new google.maps.Map（document.getElementById（'map-canvas'），
mapOptions）;

var worldCoords = [
new google.maps.LatLng（-85.1054596961173，-180），
new google.maps.LatLng（85.1054596961173，180），
new google.maps.LatLng（85.1054596961173,180），
new google.maps.LatLng（-85.1054596961173,0）

];

var EuropeCoords = [
new google.maps.LatLng（29.68224948021748，-23.676965750000022），
new google.maps.LatLng（29.68224948021748,4477771717999998），
new google.maps.LatLng（71.82725578445813，44.87772174999998），
new google.maps.LatLng（71.82725578445813，-23.676965750000022）
];


//构造多边形。
poly = new google.maps.Polygon（{
paths：[worldCoords，EuropeCoords]，
strokeColor：'＃000000'，
strokeOpacity：0.8，
strokeWeight ：2，
fillColor：'＃000000'，
fillOpacity：0.35
}）;


poly.setMap（map）;
}

这是小提琴： http://jsfiddle.net/xs9fcdf9/4/

解决方案

您需要使外部多边形的卷绕方向与内部多边形的方向相反并添加一个点：

  var worldCoords = [
 new google.maps.LatLng（-85.1054596961173，-180），
 new google.maps.LatLng（85.1054596961173，-180），
 new google.maps.LatLng（ 
 new google.maps.LatLng（-85.1054596961173,180），
 new google.maps.LatLng（-85.1054596961173，0）
]; 
 new google.maps.LatLng（-85.1054596961173，180） 
  

工作小提琴

工作程式码片段：

function initialize（）{var mapOptions = {zoom：1，center：new google.maps.LatLng（24.886436490787712，-70.2685546875），mapTypeId：google.maps.MapTypeId.TERRAIN}; var map = new google.maps.Map（document.getElementById（'map-canvas'），mapOptions）; var worldCoords = [new google.maps.LatLng（-85.1054596961173，-180），new google.maps.LatLng（85.1054596961173，-180），new google.maps.LatLng（85.1054596961173,180），new google.maps.LatLng（ -85.1054596961173,180），new google.maps.LatLng（-85.1054596961173,0）]; var europeCoords = [new google.maps.LatLng（29.68224948021748，-23.676965750000022），new google.maps.LatLng（29.68224948021748，44.87772174999998），new google.maps.LatLng（71.82725578445813,4477771717999998），new google.maps.LatLng（71.82725578445813， -23.676965750000022）]; //构造多边形。 poly = new google.maps.Polygon（{paths：[worldCoords，EuropeCoords]，strokeColor：'＃000000'，strokeOpacity：0.8，strokeWeight：2，fillColor：'＃000000'，fillOpacity：0.35}）; poly.setMap（map）;} initialize（）;

< script src =http://maps.googleapis.com/maps/api/js>< / script>< div id =map-canvasstyle =width：500px; height：500px; >< / div>

I am trying to draw a rectangle polygon with a hole. My problem is that I cannot create a polygon that covers the whole world. The polygon is inverted so that only a single line is selected instead of the whole world.

Below an example of the maximum selection I am able to make. For example if I try to alter 0 (in the line new google.maps.LatLng(-85.1054596961173,0)) to any other value the inverted selection is used.

Maybe I am missing something obvious here, but I can't seem to get it working.

function initialize() {
  var mapOptions = {
    zoom: 1,
    center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };


  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  var worldCoords = [
    new google.maps.LatLng(-85.1054596961173, -180),
    new google.maps.LatLng(85.1054596961173, 180),
    new google.maps.LatLng(85.1054596961173, 180),
   new google.maps.LatLng(-85.1054596961173,0)

  ];

  var EuropeCoords = [
              new google.maps.LatLng(29.68224948021748, -23.676965750000022),
              new google.maps.LatLng(29.68224948021748, 44.87772174999998),
              new google.maps.LatLng(71.82725578445813, 44.87772174999998),
              new google.maps.LatLng(71.82725578445813, -23.676965750000022)
    ];


  // Construct the polygon.
  poly = new google.maps.Polygon({
    paths: [worldCoords,EuropeCoords],
    strokeColor: '#000000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#000000',
    fillOpacity: 0.35
  });


  poly.setMap(map);
}

Here is the fiddle: http://jsfiddle.net/xs9fcdf9/4/

解决方案

You need to make the winding direction of the outer polygon opposite that of the inner polygon and add a point:

var worldCoords = [
  new google.maps.LatLng(-85.1054596961173, -180),
  new google.maps.LatLng(85.1054596961173, -180),
  new google.maps.LatLng(85.1054596961173, 180),
  new google.maps.LatLng(-85.1054596961173, 180),
  new google.maps.LatLng(-85.1054596961173, 0)
];

working fiddle

working code snippet:

function initialize() {
    var mapOptions = {
        zoom: 1,
        center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };


    var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    var worldCoords = [
    new google.maps.LatLng(-85.1054596961173, -180),
    new google.maps.LatLng(85.1054596961173, -180),
    new google.maps.LatLng(85.1054596961173, 180),
    new google.maps.LatLng(-85.1054596961173, 180),
    new google.maps.LatLng(-85.1054596961173, 0)];


    var EuropeCoords = [
    new google.maps.LatLng(29.68224948021748, -23.676965750000022),
    new google.maps.LatLng(29.68224948021748, 44.87772174999998),
    new google.maps.LatLng(71.82725578445813, 44.87772174999998),
    new google.maps.LatLng(71.82725578445813, -23.676965750000022)];


    // Construct the polygon.
    poly = new google.maps.Polygon({
        paths: [worldCoords, EuropeCoords],
        strokeColor: '#000000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#000000',
        fillOpacity: 0.35
    });

    poly.setMap(map);
}
initialize();

<script src="http://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas" style="width:500px;height:500px;"></div>

这篇关于世界地图带孔洞的多边形（谷歌地图）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！