MAPTALKS加载I3S
I3S是什么？
i3s标准是一种用树结构来组织大体积量三维数据的数据格式标准，比如在位图界的jpg格式一样，只不过i3s是“标准”，目前由slpk格式的文件实现,内部采用json文件来描述数据，使用二进制文件（格式为.bin）来存储三维地理数据。
MapTalks介绍
MapTalks是由国人独立研发的WebGL三维地图。优点：独立的底层实现保证了拥有更多的性能优化手段;基于PBR的材质系统，让三维地图的呈现效果拥有了无限的可能; MapTalks是基于开放数据格式构建的，不会让用户受限于特定的数据格式或服务。
Nginx 配置
代理设置，主要是代理出模型文件，操作还是比较简单(花了不少时间去找配置)
location / {
root D:/work/dev/My_SLPK_Server/Node_SLPK_server/slpk/;
index index.html index.htm;
gzip_static on;
}
完整代码
<!DOCTYPE html>
<html>
<head>
<title>i3s viewer</title>
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/@maptalks/gl/dist/maptalksgl.js"></script>
<script type="text/javascript" src="https://unpkg.com/@maptalks/transcoders.draco/dist/transcoders.draco.js"></script>
<script type="text/javascript" src="https://unpkg.com/@maptalks/3dtiles/dist/maptalks.3dtiles.js"></script>
<style>
html,
body,#map { padding: 0;
margin: 0;
height: 100%;
width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = new maptalks.Map("map", {
center: [118.54752303277894, 24.803158033469316],
zoom: 15,
baseLayer: new maptalks.TileLayer('base', {
maxAvailableZoom : 20,
urlTemplate: 'http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png',
subdomains: ['a','b','c','d'],
attribution: '© <a href="http://osm.org">OpenStreetMap</a> contributors, © <a href="https://carto.com/">CARTO</a>'
})
});
const layer = new maptalks.Geo3DTilesLayer('3dtiles', {
maxGPUMemory: 512, //最大缓存数，单位 M bytes
services : [
{
url : 'http://localhost/C_Pipitea_North_v17.eslpk/3dSceneLayer.json',
maximumScreenSpaceError: 3.0,
//heightOffset: -40,
// 环境光照值，倾斜摄影可以设为[1.0, 1.0, 1.0]获得最清晰的效果，非倾斜摄影可以适当降低，例如设为 [0.2, 0.2, 0.2]
// 如果不设置，则采用地图上的默认光照值
ambientLight: [1, 1, 1],
},
]
});
const sceneConfig = {
//阴影设置
shadow : {
type : 'esm',
// type : 'stencil',
enable : false,
quality : 'high',
opacity : 1,
color : [0, 0, 0]
},
//开启后处理
postProcess: {
enable: true,
//开启outline后处理
antialias: {
enable: true
},
outline: {
enable: true
}
},
ground: {
enable: true,
renderPlugin: {
type: 'fill'
},
symbol: {
polygonFill: [0.4, 0.4, 0.4, 0]
}
}
};
//光照设置
const lights = {
//环境光
ambient: {
color: [0.2, 0.2, 0.2],
exposure: 1.5
},
//有向光
directional: {
color : [1, 1, 1],
direction : [1, 1, -1],
}
};
map.setLights(lights);
const groupLayer = new maptalks.GroupGLLayer('group', [layer], { sceneConfig });
groupLayer.addTo(map);
layer.once('loadtileset', e => {
const extent = layer.getExtent(e.index);
map.fitExtent(extent, 2, { animation: false });
});
</script>
</body>
</html>
使用体验
可以看到使用还是很方便，如果是slpk解压的文件，把url指向3dSceneLayer.json就行了，而如果使用arcgis发布的三维把地址贴上就行，例如
https://tiles.arcgis.com/tiles/z2tnIkrLQ2BRzr6P/arcgis/rest/services/SanFrancisco_Bldgs/SceneServer/layers/0
Maptalks呈现效果和arcgis的差不多，不过目前主要是支持3DObjectscenelayer,Integratedmeshscenelayer这两种类型模型
参考资料
https://link.juejin.cn/?target=https%3A%2F%2Fwww.cnblogs.com%2Fonsummer%2Fp%2F12082584.html
https://juejin.cn/post/7083802140740681765
