地图框GL图层出现问题

Having trouble with mapbox GL layers

本文关键字：问题 图层 GL 地图      更新时间：2023-09-26

因此，我试图从mapbox GL中加载的样式图中获取一个样式层，但它一直返回未定义的元素。我已经无计可施了。

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

这是代码：

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

PS-多年后我将重返编码领域。我只是又刷了一下我的睡衣。

PPS：如果你介意的话，这是整个代码：

<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'）"部分。

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

我不确定你用这个做什么，因为你可以在Mapbox studio编辑器中将样式设置为不可见，但当我更改布局属性时，我会用.click（函数）这样做：

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

然后你所要做的就是用类"className"在HTML中添加一个按钮或任何其他项目，只要点击它，水层就会变得不可见。

相关文章：