03 三维地图添加切片图层

在介绍了创建二维、三维地图之后，我们接下来介绍三维地图如何添加切片图层。地图添加切片图层的最终结果如下图所示，在此过程中默认实现了将业务图层居中显示的效果：

具体操作如下所示：

1 创建HTML基本架构，创建div和引入相关的文件，然后设置div的基本样式，如下：

创建基本架构：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Inture Layer</title>
    </head>
    <body>
    </body>
</html>

创建div：

<div id="viewDiv"></div>

引入相关的开发包：

<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>

设置div的样式：

<style type="text/css">
#viewDiv{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

2 实例化地图和创建视角：

//创建地图
var map=new Map({
    basemap:"osm",
    //layers:[tileLayer01]
});

//创建视角
var view=new SceneView({
    container:"viewDiv",
    map:map
});

3 进行完上述步骤后，我们接下来要创建切片图层，此时用到“esri/layers/TileLayer”这个组件，我们用它来实例化一个切片图层，如下：

//创建切片图层

var tileLayer01=new TileLayer({             
    url:"https://xqwportal.arcgis.cn/arcgis/rest/services/ServerXzqhGloble02/MapServer",
    id:"demodata01",
    opacity:0.7
});

4 然后调用add方法将它添加至底图之上，此时我们发现实例化地图和创建视角时并没有指定视角中心点和图层缩放级别，这是因为我们在接下来要用另一种方法，实现将切片图层在页面初始化完成后居中显示的效果，如下：

//切片图层添加至底图
map.add(tileLayer01);

//视图缩放至业务图层
view.when(function () {
    tileLayer01.when(function () {
        view.goTo(tileLayer01.fullExtent);
    });
});

5 至此，所有的工作都已完成，完整代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Inture Layer</title>
        <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
        <script src="https://js.arcgis.com/4.9/"></script>
        <style type="text/css">
        #viewDiv{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        </style>
    </head>
    <body>
        <div id="viewDiv"></div>
        <script>
        require([
            "esri/Map",
            "esri/views/SceneView",
            "esri/layers/TileLayer",
        ],function (Map,SceneView,TileLayer) {
            //创建切片图层
            var tileLayer01=new TileLayer({
 url:"https://xqwportal.arcgis.cn/arcgis/rest/services/ServerXzqhGloble02/MapServer",
id:"demodata01",
opacity:0.7
});

            //创建地图
            var map=new Map({
                basemap:"osm",
                //layers:[tileLayer01]
            });

            //切片图层添加至底图
            map.add(tileLayer01);

            //创建视角
            var view=new SceneView({
                container:"viewDiv",
                map:map
            });

            //视图缩放至业务图层
            view.when(function () {
                tileLayer01.when(function () {
                    view.goTo(tileLayer01.fullExtent);
                });
           });
        });
    </script>
    </body>
</html>

三维地图中的地图操作方法和二维地图中相比有很大的不同，大家一定要记得时时刻刻查看官方文档。

附：

https://developers.arcgis.com/javascript/

03 三维地图添加切片图层

猜你喜欢