Mapbox GL图层出现问题 [英] Having trouble with mapbox GL layers

问题描述

因此，我正在尝试从Mapbox GL中已加载的样式表中获取样式层，但它会不断返回未定义的元素.我无能为力.

So, I'm trying to get a style layer from the loaded stylemap in mapbox GL but it keeps returning undefined elements. I'm at the end of my wits.

我正在尝试将底层水层存储在layers变量中，以便更改其属性.例如，它的可见性.

I'm trying to get the underlaying water layer to store in the layers variable so I can alter its properties. For instance, its visibility.

代码如下:

var layers=map.getLayer('water');
changeinnerHTML(featuresWindow, JSON.stringify(layers, null, 1));

PS-几年后，我将恢复编码.我只是再次刷了我的js.

PS - I'm returning to coding after years. I just brushed upon my js again.

PPS:如果需要的话，这是完整的代码:

PPS: Here's the whole code if you care:

<script>
      //Mapbox Access Token
      mapboxgl.accessToken = 'pk.eyJ1IjoiYWtzaGF5a2h1cmFuYSIsImEiOiJjaWY3dXdkN3MxMzZ3czZsempwbWc0MnRoIn0.y7jHQWK5lONsJ_6u3EJSTg';
      // Select html objects that constantly change into javascript variables. Henceforth known as elementVar
      var featuresWindow = document.getElementById('features');
      // GLOBAL FUNCTIONS : Functions that are used repeatedly
      // Function to change inner HTML of div, span etc elements
      function changeinnerHTML(elementVar, newvalue) {
            elementVar.innerHTML = newvalue;
            return null;
         }
         // Function to change colours.
      function switchColor(myColor, layer) {
            map.setPaintProperty(layer, 'fill-color', myColor);
         }
         // Intialise map
      if (!mapboxgl.supported()) {
         alert('Your browser does not support Mapbox GL!');
      } else {
         var map = new mapboxgl.Map({
            container: 'map', // container id
            style: 'mapbox://styles/akshaykhurana/cihlwytjz001kb4kqu0b62xq7', //stylesheet location
            minZoom: 9, //minimum zoom value
            maxZoom: 16, //maximum zoom value
            interactive: true
         });
      }
      // Get some layers man.
      var layers=map.getLayer();
      changeinnerHTML(featuresWindow, JSON.stringify(layers, null, 1));
      // Push information to sidebar on mouse hover
      map.on('click', function(e) {
         map.featuresAt(e.point, {
            radius: 5
         }, function(err, features) {
            if (err) throw err;
            changeinnerHTML(featuresWindow1, JSON.stringify(features, null, 2));
         });
      });

   </script>

推荐答案

不确定您是否已解决此问题，但基本上，您只需要删除"map.getLayer('water')"部分即可.

Not sure if you have figured this out yet but basically you just need to get rid of the "map.getLayer('water')" section.

var layers = 'water';
map.setLayoutProperty(layers, 'visibility', 'none');

我不确定您将其用作什么，因为您可以在Mapbox Studio编辑器中将样式设置为不可见，但是当我更改布局属性时，可以使用.click(function)这样的样式所以:

I'm not sure what you are using this for, as you can set the style to be invisible right in the Mapbox studio editor, but when I change a Layout Property, I do it with a .click(function) like so:

$('.className').click(function(e) {
    e.preventDefault(); 
    var layers = 'water';
    map.setLayoutProperty(layers, 'visibility', 'none');
});

然后您要做的就是在类中添加一个带有"className"类的按钮或任何其他项，并且每当单击它时，水层将变得不可见.

Then all you have to do is add a button or any other item to your HTML with the class "className" and whenever it is clicked, the water layer will become invisible.

这篇关于Mapbox GL图层出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！