Question

我现在明白图像叠加是如何工作的（我是新手）并且现在将它们插入到地图中没有问题，但是我在一个页面上有4个地图（图像附加了它的外观）并且我想覆盖一个其中一个上的图像（左上角）。下面是我的代码 - 并且低于那些不起作用的代码。我需要在哪里插入addsource（）和addlayer（）才能使用？工作代码非常有用，因为我似乎无法自己找到它。我花了最后2个小时试图解决这个问题。

有效的代码:(在地图下面没有添加任何名称＆＃34; topleftmapbox＆＃34;因此代码可以正常工作）

<!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>

此代码（下面添加了代码＆＃34; topleftmapbox＆＃34;不起作用）：

<!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

在添加源和图层之前，您需要等到加载library(dplyr) get_results <- function(name) { model <- sym(paste0("cm_", name)) list(data.frame( Sensitivity = !!model$byClass["Sensitivity"], Specificity = !!model$byClass["Specificity"], Precision = !!model$byClass["Precision"], Recall = !!model$byClass["Recall"], F1 = !!model$byClass["F1"] )) } comparison <- comparison %>% group_by(model) %>% mutate(temp_obj = get_results(model))) %>% unnest()的样式。

topleftmapbox

完整代码：

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

第

1 个答案: