MAPTALKS加载I3S

2022-04-28 本文已影响0人 polong

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: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <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>

5eeb5735295e48938ae9b918a415ba0a_tplv-k3u1fbpfcp-watermark.png

5952e02ba347477f953509d4dcddf054_tplv-k3u1fbpfcp-watermark.png

71ba6db7701a48ccaeba1ee0ef0d3297_tplv-k3u1fbpfcp-watermark.png

使用体验

可以看到使用还是很方便，如果是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