页面上有多个地图的 Mapbox GL JS 图像叠加

Question

我现在了解图像叠加层的工作原理（我是新手）并且现在将它们插入地图没有问题，但是我在一页上有 4 张地图（附有它的外观图像）我想在其中一个上叠加图像（左上角）。下面是我的有效代码——下面是无效的代码。我需要在哪里插入 addsource() 和 addlayer() 才能工作？工作代码将非常有帮助，因为我自己似乎无法找到它。我花了最后 2 个小时试图解决这个问题。

有效代码：（未在名为 "topleftmapbox" 的地图下方添加任何内容，因此代码有效）

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Quad Pane Display</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:100%; bottom:100%; left:100%,right:100%, width:100%; padding:0;}
</style>

</head>
<body background="bg.jpg">
<style>
html, body, #page, #map {
height:100%;
width:100%;
margin:0;
padding:0;
cursor: url(cursor.gif), pointer;
overflow: hidden;
}


body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}


.topleftmapclass {height : 50%; width : 50%;  bottom: 50%; right : 50%; position : absolute; z-index : 200;}
.toprightmapclass { height : 50%; width : 50%;  nottom: 50%; left : 50%; position : absolute; z-index : 200;}
.bottomleftmapclass {height : 50%; width : 50%;   top : 50%; right : 50%; position : absolute; z-index : 200;}
.bottomrightmapclass { height : 50%; width : 50%;  top : 50%; left : 50%; position : absolute; z-index : 200;}
</style>


<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' />


<div id='topleftmap' class='topleftmapclass'></div>
<div id='toprightmap' class='toprightmapclass'></div>
<div id='bottomleftmap' class='bottomleftmapclass'></div>
<div id='bottomrightmap' class='bottomrightmapclass'></div>


<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2ppanVpMTIwMDF3NDNrcjA5eHlpMjlsOSJ9._4sT3921GYQlIlsZ31EyQA';


var topleftmapbox = new mapboxgl.Map({
container: 'topleftmap',
zoom: 14,
pitch: 53,
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',   
center: [-98.028491, 29.703963]
});




var toprightmapbox = new mapboxgl.Map({
container: 'toprightmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',   
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});




var bottomleftmapbox = new mapboxgl.Map({
container: 'bottomleftmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',   
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});




var bottomrightmapbox = new mapboxgl.Map({
container: 'bottomrightmap',
style: 'mapbox://styles/formula4/cjifh68hb0lus2st8q6rz4v49',   
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});




</script>
</body>
</html>

而这段代码（下面添加的代码 "topleftmapbox" 不起作用）：

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Quad Pane Display</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:100%; bottom:100%; left:100%,right:100%, width:100%; padding:0;}
</style>

</head>
<body background="bg.jpg">
<style>
html, body, #page, #map {
height:100%;
width:100%;
margin:0;
padding:0;
cursor: url(cursor.gif), pointer;
overflow: hidden;
}


body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}


.topleftmapclass {height : 50%; width : 50%;  bottom: 50%; right : 50%; position : absolute; z-index : 200;}
.toprightmapclass { height : 50%; width : 50%;  nottom: 50%; left : 50%; position : absolute; z-index : 200;}
.bottomleftmapclass {height : 50%; width : 50%;   top : 50%; right : 50%; position : absolute; z-index : 200;}
.bottomrightmapclass { height : 50%; width : 50%;  top : 50%; left : 50%; position : absolute; z-index : 200;}
</style>


<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' />


<div id='topleftmap' class='topleftmapclass'></div>
<div id='toprightmap' class='toprightmapclass'></div>
<div id='bottomleftmap' class='bottomleftmapclass'></div>
<div id='bottomrightmap' class='bottomrightmapclass'></div>


<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2ppanVpMTIwMDF3NDNrcjA5eHlpMjlsOSJ9._4sT3921GYQlIlsZ31EyQA';


var topleftmapbox = new mapboxgl.Map({
container: 'topleftmap',
zoom: 14,
pitch: 53,
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',   
center: [-98.028491, 29.703963]
});






topleftmapbox.addSource("dopplerimage", {"type": "image",
"url": "KEWX_L2_Z.gif",
"coordinates": [
[-98.0387, 29.7125], 
[-98.0182, 29.7125],  
[-98.0387, 29.6927], 
[-98.0387, 29.6920]  
]})



topleftmapbox.addLayer({
"id": "overlay",
"source": "dopplerimage",
"type": "raster",
"paint": {"raster-opacity": 0.85}
})



var toprightmapbox = new mapboxgl.Map({
container: 'toprightmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',   
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});




var bottomleftmapbox = new mapboxgl.Map({
container: 'bottomleftmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',   
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});




var bottomrightmapbox = new mapboxgl.Map({
container: 'bottomrightmap',
style: 'mapbox://styles/formula4/cjifh68hb0lus2st8q6rz4v49',   
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});




</script>
</body>
</html>

Answer 1

您需要等到 topleftmapbox 的样式加载完毕后再添加源和图层。

topleftmapbox.on('load', function() {
...
});

完整代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title>Quad Pane Display</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 100%;
      bottom: 100%;
      left: 100%, right:100%, width:100%;
      padding: 0;
    }
  </style>

</head>

<body background="bg.jpg">
  <style>
    html,
    body,
    #page,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      cursor: url(cursor.gif), pointer;
      overflow: hidden;
    }


    body * {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }


    .topleftmapclass {
      height: 50%;
      width: 50%;
      bottom: 50%;
      right: 50%;
      position: absolute;
      z-index: 200;
    }

    .toprightmapclass {
      height: 50%;
      width: 50%;
      nottom: 50%;
      left: 50%;
      position: absolute;
      z-index: 200;
    }

    .bottomleftmapclass {
      height: 50%;
      width: 50%;
      top: 50%;
      right: 50%;
      position: absolute;
      z-index: 200;
    }

    .bottomrightmapclass {
      height: 50%;
      width: 50%;
      top: 50%;
      left: 50%;
      position: absolute;
      z-index: 200;
    }
  </style>


  <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
  <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' />


  <div id='topleftmap' class='topleftmapclass'></div>
  <div id='toprightmap' class='toprightmapclass'></div>
  <div id='bottomleftmap' class='bottomleftmapclass'></div>
  <div id='bottomrightmap' class='bottomrightmapclass'></div>


  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2ppanVpMTIwMDF3NDNrcjA5eHlpMjlsOSJ9._4sT3921GYQlIlsZ31EyQA';


    var topleftmapbox = new mapboxgl.Map({
      container: 'topleftmap',
      zoom: 14,
      pitch: 53,
      style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
      center: [-98.028491, 29.703963]
    });





    topleftmapbox.on('load', function() {
      topleftmapbox.addSource("dopplerimage", {
        "type": "image",
        "url": "KEWX_L2_Z.gif",
        "coordinates": [
          [-98.0387, 29.7125],
          [-98.0182, 29.7125],
          [-98.0387, 29.6927],
          [-98.0387, 29.6920]
        ]
      })



      topleftmapbox.addLayer({
        "id": "overlay",
        "source": "dopplerimage",
        "type": "raster",
        "paint": {
          "raster-opacity": 0.85
        }
      })
    });


    var toprightmapbox = new mapboxgl.Map({
      container: 'toprightmap',
      style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
      center: [-98.028491, 29.703963],
      zoom: 7,
      attributionControl: false
    });




    var bottomleftmapbox = new mapboxgl.Map({
      container: 'bottomleftmap',
      style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
      center: [-98.028491, 29.703963],
      zoom: 7,
      attributionControl: false
    });




    var bottomrightmapbox = new mapboxgl.Map({
      container: 'bottomrightmap',
      style: 'mapbox://styles/formula4/cjifh68hb0lus2st8q6rz4v49',
      center: [-98.028491, 29.703963],
      zoom: 7,
      attributionControl: false
    });
  </script>
</body>

</html>

页面上有多个地图的 Mapbox GL JS 图像叠加

Mapbox GL JS image overlay with multiple maps on page

overlay

geospatial

mapbox

mapbox-gl-js