跳到主要内容
版本:9.2.0

三维场景锐化设置

可以设置场景的锐化强度。

show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锐化</title>
<style>
body {
margin: 0;
padding: 0;
}

#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
<script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.2.0/mapmost-webgl-min.js"></script>
<script src='./dat.gui.js'></script>
</head>
<body>
<div id='map'></div>
<script>
var gui = new dat.GUI();
var map = new mapmost.Map({
style: "<your style url>",
container: 'map',
center: [120.67617982483154, 31.317070971395978],
zoom: 16.011081413474614,
bearing: -128.8049986576308,
pitch: 82,
userId: '***', // 授权码
});

map.on("load", function () {
let models_obj = [
"<your model url>"
].map(item => ({
type: 'glb',
url: item,
}));
let options_obj = {
id: 'model_id',
type: 'model',
models: models_obj,
center: [120.7461498, 31.3307914, 0.2],
project: "3857",
callback: function (group, layer) {

// 锐化
let sharpenPost = mapmost.PostProcessStageLibrary.initSharpen(map);
// 添加至场景
map.addPostProcess(sharpenPost);

let sharpen = {
"sharpNum": 0.12,
"enabled": true,
}

let guiSharp = gui.addFolder('锐化');

// 锐化度
guiSharp.add(sharpen, "sharpNum").min(-10).max(10).step(0.1).onChange(function (value) {
sharpenPost.sharpNum = value;
});

// 开启/关闭锐化
guiSharp.add(sharpen, "enabled").onChange(function (value) {
sharpenPost.enabled = value;
});
}
};
map.addLayer(options_obj);
});
</script>
</body>
</html>