Выделите полигон и оттенок остальной части карты с помощью Google Maps

Question

Я хотел бы отобразить выделенный многоугольник с помощью Google Maps. Идея состоит в том, что рассматриваемый многоугольник будет отображаться нормально, а остальная часть карты должна быть немного затемнена.

Итак, возможно ли это сделать с помощью Google Map API? Если да, то с какой версией (v2, v3)? Было бы легче сделать это с другими инструментами карты, такими как openlayers?

PS: У меня была одна идея - построить обратный многоугольник (в этом примере весь мир минус форму Австрии), а затем отобразить наложение черного цвета с прозрачностью, используя этот инвертированный многоугольник. Но это кажется мне довольно сложным.

Answer 1

API Карт Google v3 позволяет рисовать полигоны с отверстиями. Вот пример Google Pentagon . Это намного проще, чем пытаться инвертировать многоугольник. В основном, создайте координаты для гигантского многоугольника, который больше, чем вам когда-либо понадобится. Это всегда будет первый полигон в вашем массиве полигонов. Выделенная область всегда будет вторым многоугольником.

Вот код для изменения демо-версии Бермудского треугольника от Google для использования многоугольника с отверстием:

  var everythingElse = [
    new google.maps.LatLng(0, -90),
    new google.maps.LatLng(0, 90),
    new google.maps.LatLng(90, -90),
    new google.maps.LatLng(90, 90),
  ];



  var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)
  ];




  bermudaTriangle = new google.maps.Polygon({
    paths: [everythingElse, triangleCoords],
    strokeColor: "#000000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#000000",
    fillOpacity: 0.5
  });

  bermudaTriangle.setMap(map);

Answer 2

ИСПОЛЬЗУЯ GEOJSON

<div id="googleMap" style="width:500px;height:380px;"></div>

 // define map properties
    var mapProp = {
        center: new google.maps.LatLng(23.075984, 78.877656),
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
//create google map 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

// define geojson
    var geojson = {
        "type": "FeatureCollection",
        "features": [{
            "type": "Feature",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [0, 90],
                        [180, 90],
                        [180, -90],
                        [0, -90],
                        [-180, -90],
                        [-180, 0],
                        [-180, 90],
                        [0, 90]
                    ],
                    [
                        [79.56298828125, 25.18505888358067],
                        [76.53076171875, 21.37124437061832],
                        [83.38623046875, 21.24842223562701],
                        [79.56298828125, 25.18505888358067]
                    ]
                ]
            },
            "properties": {}
        }]
    };
//add geojson to map
    map.data.addGeoJson(geojson);

в случае использования внешнего файла geojson

map.data.loadGeoJson('url-to-geojson-file');

примечание: Google использовал .json как расширение для файла geojson, а не .geojson https://developers.google.com/maps/documentation/javascript/datalayer

создайте свой геойсон здесь
https://google -developers.appspot.com / карты / документы / Utils / GeoJSON /

рабочий пример https://jsfiddle.net/841emtey/5/

Answer 3

В отношении:

Остальная часть карты должна быть немного затемнена.

Это можно сделать с помощью Maps API v3, используя Styled Maps .

Существует даже Styled Maps Wizard , где вы можете поиграть с настройками, а затем нажать Show JSON, чтобы массив передал в качестве первого аргумента new google.maps.StyledMapType.

Чтобы получить нужный эффект, просто уменьшите Lightness для всего, в мастере вы захотите увидеть это в поле Map Style справа:

Feature type:   all
Element type:   all
Lightness:  -70

Который будет экспортировать в:

[
  {
     "stylers": [
      { "lightness": -70 }
    ]
  }
]

И выглядят так .