03 三維地圖新增切片圖層
阿新 • • 發佈：2019-01-09
在介紹了建立二維、三維地圖之後，我們接下來介紹三維地圖如何新增切片圖層。地圖新增切片圖層的最終結果如下圖所示，在此過程中預設實現了將業務圖層居中顯示的效果：
具體操作如下所示：
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>三維地圖中的地圖操作方法和二維地圖中相比有很大的不同，大家一定要記得時時刻刻檢視官方文件。
附：