Карты Google устанавливают видимость слоя данных на разных уровнях масштабирования. - PullRequest
Новая
       24

Карты Google устанавливают видимость слоя данных на разных уровнях масштабирования.

0 голосов
/ 19 апреля 2020

У меня есть 3 слоя данных (в гео JSON), которые я добавил на свою карту. Я хочу, чтобы некоторые функции отображались только при более высоком уровне масштабирования. То, как я сейчас это сделаю, - это стилизация функций: 

function showHideFeatures() {
    google.maps.event.addListener(map, 'zoom_changed', function(event) {
        zoomLevel = map.getZoom();
        console.log(zoomLevel);

        map.data.setStyle(function(feature) {

            let categ = feature.getProperty("Category");

            if (categ === "Hazard" && zoomLevel < 20) {
                v = false
                console.log('found hazard while zooming')
            } else {
                v = true;
            }
            return ({
                visibility: v
            })
        });

    });
}

, однако это не работает. Любая идея, что я сделал не так, пожалуйста, или что еще я могу сделать, чтобы это работало? Заранее спасибо :)

Редактировать: у меня есть geo JSON, хранящийся в переменной JS, поэтому он локально загружен

как: 

var VallettaStreets = {
    "type": "FeatureCollection",
    "features": [{
            "type": "Feature",
            "geometry": {
                "type": "LineString",
                "coordinates": [
                    [
                        14.508251,
                        35.8953806,
                        0
                    ],
                    [
                        14.5082812,
                        35.8951877,
                        0
                    ],
                    [
                        14.5082979,
                        35.8951361,
                        0
                    ]
.
.
.

А затем добавили к базовой карте здесь: 


    map.data.addGeoJson(gjson);
    map.data.addGeoJson(hazards1);
    map.data.addGeoJson(VallettaStreets);

1 Ответ

0 голосов
/ 20 апреля 2020

Согласно документации , код, который вы используете, должен работать:

Доступно для всех геометрий
visible: если true , функция видна.

Однако, похоже, это не работает, как описано ( fiddle ).

Если я также установил opacity (и strokeOpacity и fillOpacity) до 0; тогда и Маркеры, и Полигоны, и Полилинии все работают как положено ( Непрозрачность работает для Маркеров, однако это не задокументировано):

Доступно для геометрии линий
strokeOpacity: непрозрачность хода от 0,0 до 1,0.

Доступно для многоугольников
fillOpacity: непрозрачность заливки от 0,0 до 1,0.strokeOpacity: ход непрозрачность между 0,0 и 1,0. strokeWeight: ширина штриха в пикселях.

подтверждение концепции скрипта

исходная карта screenshot of initial map

карта после смены масштаба screenshot of map after changing zoom

var map;

function showHideFeatures() {
  google.maps.event.addListener(map, 'zoom_changed', function(event) {
    let zoomLevel = map.getZoom();
    console.log("zoom=" + zoomLevel);
    document.getElementById('info').innerHTML = map.getZoom();

    map.data.setStyle(function(feature) {

      let categ = feature.getProperty("Category");
      var v;
      var o;
      if (categ === "Hazard" && zoomLevel < 10) {
        v = false;
        o = 0;
        console.log('found hazard while zooming')
      } else {
        v = true;
        o = 0.45;
      }
      console.log("featureid=" + feature.getProperty("id") + " zoom=" + map.getZoom() + " category=" + categ + " visibility=" + v)
      return ({
        visibility: v,
        opacity: o,
        fillOpacity: o,
        strokeOpacity: o
      })
    });

  });
}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: -28,
      lng: 137
    }
  });

  // Load GeoJSON.
  map.data.addGeoJson(geoJson);
  map.data.addListener('click', function(evt) {
    console.log(evt.latLng.toUrlValue());
  })
  showHideFeatures();
}

var geoJson = {
  "type": "FeatureCollection",
  "features": [{
      "type": "Feature",
      "properties": {
        "id": "0",
        "Category": "Hazard"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          128.013184, -29.100117
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "id": "1",
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71",
        "Category": "none"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14],
            [122.38, -21.73],
            [121.06, -21.69],
            [119.66, -22.22],
            [119.00, -23.40],
            [118.65, -24.76],
            [118.43, -26.07],
            [118.78, -27.56],
            [119.22, -28.57],
            [120.23, -29.49],
            [121.77, -29.87],
            [123.57, -29.64],
            [124.45, -29.03],
            [124.71, -27.95],
            [124.80, -26.70],
            [124.80, -25.60],
            [123.61, -25.64],
            [122.56, -25.64],
            [121.72, -25.72],
            [121.81, -26.62],
            [121.86, -26.98],
            [122.60, -26.90],
            [123.57, -27.05],
            [123.57, -27.68],
            [123.35, -28.18],
            [122.51, -28.38],
            [121.77, -28.26],
            [121.02, -27.91],
            [120.49, -27.21],
            [120.14, -26.50],
            [120.10, -25.64],
            [120.27, -24.52],
            [120.67, -23.68],
            [121.72, -23.32],
            [122.43, -23.48],
            [123.04, -24.04],
            [124.54, -24.28],
            [124.58, -23.20],
            [123.61, -22.14]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "id": "2",
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111",
        "Category": "Hazard"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76],
            [128.18, -25.60],
            [127.96, -25.52],
            [127.88, -25.52],
            [127.70, -25.60],
            [127.26, -25.79],
            [126.60, -26.11],
            [126.16, -26.78],
            [126.12, -27.68],
            [126.21, -28.42],
            [126.69, -29.49],
            [127.74, -29.80],
            [128.80, -29.72],
            [129.41, -29.03],
            [129.72, -27.95],
            [129.68, -27.21],
            [129.33, -26.23],
            [128.84, -25.76]
          ],
          [
            [128.45, -27.44],
            [128.32, -26.94],
            [127.70, -26.82],
            [127.35, -27.05],
            [127.17, -27.80],
            [127.57, -28.22],
            [128.10, -28.42],
            [128.49, -27.80],
            [128.45, -27.44]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "id": "3",
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111",
        "Category": "Hazard"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [131.87, -25.76],
            [131.35, -26.07],
            [130.95, -26.78],
            [130.82, -27.64],
            [130.86, -28.53],
            [131.26, -29.22],
            [131.92, -29.76],
            [132.45, -29.87],
            [133.06, -29.76],
            [133.72, -29.34],
            [134.07, -28.80],
            [134.20, -27.91],
            [134.07, -27.21],
            [133.81, -26.31],
            [133.37, -25.83],
            [132.71, -25.64],
            [131.87, -25.76]
          ],
          [
            [133.15, -27.17],
            [132.71, -26.86],
            [132.09, -26.90],
            [131.74, -27.56],
            [131.79, -28.26],
            [132.36, -28.45],
            [132.93, -28.34],
            [133.15, -27.76],
            [133.15, -27.17]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "id": "4",
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103",
        "Category": "none"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.12, -25.04],
            [136.84, -25.16],
            [135.96, -25.36],
            [135.26, -25.99],
            [135, -26.90],
            [135.04, -27.91],
            [135.26, -28.88],
            [136.05, -29.45],
            [137.02, -29.49],
            [137.81, -29.49],
            [137.94, -29.99],
            [137.90, -31.20],
            [137.85, -32.24],
            [136.88, -32.69],
            [136.45, -32.36],
            [136.27, -31.80],
            [134.95, -31.84],
            [135.17, -32.99],
            [135.52, -33.43],
            [136.14, -33.76],
            [137.06, -33.83],
            [138.12, -33.65],
            [138.86, -33.21],
            [139.30, -32.28],
            [139.30, -31.24],
            [139.30, -30.14],
            [139.21, -28.96],
            [139.17, -28.22],
            [139.08, -27.41],
            [139.08, -26.47],
            [138.99, -25.40],
            [138.73, -25.00],
            [138.12, -25.04]
          ],
          [
            [137.50, -26.54],
            [136.97, -26.47],
            [136.49, -26.58],
            [136.31, -27.13],
            [136.31, -27.72],
            [136.58, -27.99],
            [137.50, -28.03],
            [137.68, -27.68],
            [137.59, -26.78],
            [137.50, -26.54]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "id": "5",
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108",
        "Category": "none"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [140.14, -21.04],
            [140.31, -29.42],
            [141.67, -29.49],
            [141.59, -20.92],
            [140.14, -21.04]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "id": "6",
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101",
        "Category": "Hazard"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [144.14, -27.41],
            [145.67, -27.52],
            [146.86, -27.09],
            [146.82, -25.64],
            [146.25, -25.04],
            [145.45, -24.68],
            [144.66, -24.60],
            [144.09, -24.76],
            [143.43, -25.08],
            [142.99, -25.40],
            [142.64, -26.03],
            [142.64, -27.05],
            [142.64, -28.26],
            [143.30, -29.11],
            [144.18, -29.57],
            [145.41, -29.64],
            [146.46, -29.19],
            [146.64, -28.72],
            [146.82, -28.14],
            [144.84, -28.42],
            [144.31, -28.26],
            [144.14, -27.41]
          ],
          [
            [144.18, -26.39],
            [144.53, -26.58],
            [145.19, -26.62],
            [145.72, -26.35],
            [145.81, -25.91],
            [145.41, -25.68],
            [144.97, -25.68],
            [144.49, -25.64],
            [144, -25.99],
            [144.18, -26.39]
          ]
        ]
      }
    }
  ]
}
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 90%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="info"></div>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
...