Как я могу сосредоточиться на определенной части GoogleMap - PullRequest
2 голосов
/ 10 июля 2019

Я работаю над деятельностью в GoogleMap.В моем onMapReady(...) я хочу сосредоточиться на определенной части карты.Я смог представить эту часть на карте, используя полигон , как показано ниже:

Polygon polygon = mMap.addPolygon(new PolygonOptions()
            .add(new LatLng(6.455770, 3.514651), new LatLng(6.455087, 3.547698), new LatLng(6.430651, 3.541926), new LatLng(6.435339, 3.513149))
            .strokeColor(Color.RED));

Приведенный выше фрагмент кода работал отлично, именно так, как я ожидал.Тем не менее, я хочу пойти на дополнительную длину.Я хочу потушить все остальные части карты (возможно, с унылым наложением) и сосредоточиться только на этом многоугольнике.« сосредоточиться только на этом многоугольнике », этот скриншот из приложения «Via» лучше всего отражает то, что я имею в виду.

enter image description here

Я хочу создать тусклую маску повсюду на карте, кроме области внутри многоугольника.Я искал документацию для методов, которые я могу использовать, чтобы достичь этого, но это было бесполезно.Любая помощь будет принята с благодарностью.

Ответы [ 2 ]

1 голос
/ 11 июля 2019

Вот пример (с использованием API Javascript).Идея была бы точно такой же в Android.

В проекции Меркатора максимальная северная широта не 90, а около 85.05113.В JavaScript вы можете сделать:

Math.atan(Math.sinh(Math.PI)) * 180 / Math.PI;

Таким образом, вы можете найти реальные северные и южные края проекции (чтобы покрыть весь мир вашим полигоном).

Тогда вам нужносоздайте как минимум 1 полигон (с отверстием в нем) для достижения желаемого эффекта.Если вам нужно, чтобы область была окрашена, вам понадобится второй полигон (см. Второй фрагмент).

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);
    
    // Find the min/max latitude
    var maxLat = Math.atan(Math.sinh(Math.PI)) * 180 / Math.PI;

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

    var EuropeCoords = [
    new google.maps.LatLng(29.7, -23.7),
    new google.maps.LatLng(29.7, 44.8),
    new google.maps.LatLng(71.8, 44.8),
    new google.maps.LatLng(71.8, -23.7)];

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

    poly.setMap(map);
}
#map-canvas {

  height: 200px;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async differ src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize"></script>
<div id="map-canvas"></div>

Второй пример с цветной областью Полигон:

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);
    
    // Find the min/max latitude
    var maxLat = Math.atan(Math.sinh(Math.PI)) * 180 / Math.PI;

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

    var EuropeCoords = [
    new google.maps.LatLng(29.7, -23.7),
    new google.maps.LatLng(29.7, 44.8),
    new google.maps.LatLng(71.8, 44.8),
    new google.maps.LatLng(71.8, -23.7)];

    // Construct the outer polygon
    var worldPoly = new google.maps.Polygon({
        paths: [worldCoords, EuropeCoords],
        strokeOpacity: 0,
        strokeWeight: 0,
        fillColor: '#000000',
        fillOpacity: 0.2,
        map: map
    });

    // Construct the inner polygon
    var europePoly = new google.maps.Polygon({
        path: EuropeCoords,
        strokeColor: 'red',
        strokeOpacity: 1,
        strokeWeight: 3,
        fillColor: 'yellow',
        fillOpacity: 0.5,
        map: map
    });
}
#map-canvas {

  height: 200px;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script async differ src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize"></script>
<div id="map-canvas"></div>

Примечание : Android SDK даже делает это проще.В документации упоминается:

Многоугольник может быть выпуклым или вогнутым, он может охватывать 180 меридианов и иметь незаполненные отверстия.

Отверстия : Отверстие - это область внутри многоугольника, которая не заполнена.Отверстие указано точно так же, как контур.Отверстие должно быть полностью заключено в контур.Можно указать несколько отверстий, однако перекрывающиеся отверстия не поддерживаются.

0 голосов
/ 12 июля 2019

@ Ответ MrUpsideDown работает на 100%, но я решил добавить реализацию Android того, как мне удалось решить эту проблему, поскольку контекст вопроса - Android.

Общая идея заключается в том, чтобы охватить вся карта с полигоном.Этот многоугольник будет иметь fillColor (который может быть скучным цветом).Чтобы выделить места, на которые вы хотите сфокусироваться, вы можете просто добавить отверстия в многоугольник.

Мы можем разбить это на три простых шага:

  1. Получить координаты всех мест, на которых вы хотите сосредоточиться.Каждое из мест, на которых вы хотите сосредоточиться, должно быть списком LatLngs.Вот пример:

        public List<List<LatLng>> allMyHoles(){
    
            // list to hold all holes
            List<List<LatLng>> holes = new ArrayList<>();
    
            // location one
            List<LatLng> hole1 = new ArrayList<>();
            hole1.add(new LatLng(51.509959, -0.181208));
            hole1.add(new LatLng(51.511288, -0.158354));
            hole1.add(new LatLng(51.506520, -0.152773));
            hole1.add(new LatLng(51.512158, -0.174572));
            hole1.add(new LatLng(51.522434, -0.197979));
    
            holes.add(hole1);
    
            // location 2
            List<LatLng> hole2 = new ArrayList<>();
            hole2.add(new LatLng(51.500216, -0.166685));
            hole2.add(new LatLng(51.544934, -0.152737));
            hole2.add(new LatLng(51.547666, -0.152949));
            hole2.add(new LatLng(51.544964, -0.156916));
            hole2.add(new LatLng(51.535335, -0.14565));
            hole2.add(new LatLng(51.533599, -0.156538));
    
            holes.add(hole2);
    
            return holes;
    
        }
    

На этом этапе все отверстия, которые вы хотите создать, находятся в списке списков, называемых отверстиями.2. Покройте всю землю многоугольником и придайте ей тусклый цвет: чтобы достичь этого, нам нужно получить границы земли.Не беспокойтесь о реализации, вот метод, который возвращает LatLng всей земли:

    private List<LatLng> getEarthlyBound() {
        final float delta = 0.01f;

        return new ArrayList<LatLng>() {{
            add(new LatLng(90 - delta, -180 + delta));
            add(new LatLng(0, -180 + delta));
            add(new LatLng(-90 + delta, -180 + delta));
            add(new LatLng(-90 + delta, 0));
            add(new LatLng(-90 + delta, 180 - delta));
            add(new LatLng(0, 180 - delta));
            add(new LatLng(90 - delta, 180 - delta));
            add(new LatLng(90 - delta, 0));
            add(new LatLng(90 - delta, -180 + delta));
        }};
    }

3. Последний шаг - создать объект PolygonOptions и добавить его на карту.Поскольку у нас уже есть доступ к размерам LatLng Земли, а также к отверстиям, которые мы хотим в ней создать, мы можем приступить к созданию нашего объекта PolyOptions, следуя приведенной ниже функции:

private PolygonOptions createPolygonWithHoles(List<List<LatLng>> holes) {

    PolygonOptions polyOptions = new PolygonOptions()
            .fillColor(0x33000000) /*sample fill color*/
            .addAll(getEarthlyBound()) /*the bounds of the earth*/
            .strokeColor(0xFF000000) /*sample stroke color*/
            .strokeWidth(5); /*sample stroke width*/

    for (List<LatLng> hole : holes) {
        polyOptions.addHole(hole);
    }

    return polyOptions;
}

Сразу после этогоТеперь мы можем добавить наш объект PolyOptions на карту следующим образом:

mMap.addPolygon(createPolygonWithHoles(allMyHoles()));

Надеюсь, это кому-нибудь поможет.Веселого кодирования!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...