文章目錄
- Save a web map
- 一、基礎知識
- 二、代碼
-
- 1、HTML代碼
- 2、CSS代碼
- 3、JS代碼
- 二、小白總結
Save a web map
代碼全部都是4.23的API哦 用的是Chrome浏覽器 使用之前記得使用link和script标簽引入
位置：Sample Code -> Mapping and views -> MapView(2D) -> Save a web map
網址： https://developers.arcgis.com/javascript/latest/sample-code/webmap-save/
提示：涉及到具體的API Reference小夥伴可以自行查找呦，這裡就不過多啰嗦啦，或者可以私信與我一起交流嘿嘿
一、基礎知識
二、代碼
1、HTML代碼
<body>
<div id="viewDiv"></div>
<div id="sidebar">
<h4>Save WebMap Title</h4>
<label for="inpTitle">Title</label><br/>
<input id="inpTitle" type="text" class="esri-print__input-text" placeholder="Please input title" required><br/><br/>
<input id="saveBtn" type="button" class="esri-button" value="Save" disabled>
</div>
<div id="popModel">
<div id="content">
<h4>Save WebMap Result</h4>
<div id="message"></div><br />
<button id="ok" class="esri-button">OK</button>
</div>
</div>
</body>
// 這裡面用的class主要就是引用一下arcgis api提供的input樣式
// 也可以不用自己寫
2、CSS代碼
*, *::before, *::after {
box-sizing: border-box;
}
html, body, #viewDiv {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#sidebar {
position: absolute;
top: 10px;
right: 20px;
width: 25%;
padding: 10px;
background-color: aliceblue;
font-size: 1rem;
}
#sidebar > input {
font-size: 1rem;
}
#saveBtn {
text-align: center;
}
#popModel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.379);
text-align: center;
visibility: hidden;
}
#content {
position: absolute;
top: 50%;
left: 50%;
background-color: azure;
transform: translate(-50%, -50%);
padding: 10px 20px;
border-radius: 2px;
visibility: hidden;
}
input:disabled {
transition: none;
background-color: black;
}
// 基本的CSS樣式設定
3、JS代碼
require([
"esri/WebMap",
"esri/views/MapView",
"esri/widgets/Expand",
"esri/widgets/Legend",
"esri/widgets/LayerList",
"esri/widgets/BasemapGallery",
], (
WebMap,
MapView,
Expand,
Legend,
LayerList,
BasemapGallery
) => {
// 檢測目前網址是否含有portal項目的ID
let mapId = "06ca49d0ddb447e7817cfc343ca30df9";
if(window.location.href.indexOf("?id=") > 0) {
mapId = window.location.href.split("?id=")[1];
}
// 初始化地圖與地圖容器
let map = new WebMap({
portalItem:{
id: "06ca49d0ddb447e7817cfc343ca30df9"
}
});
let view = new MapView({
map: map,
container: "viewDiv"
});
// 添加一系列折疊元件
// 其中group屬性實作 位于同一組的Expand元件隻能展開一個 當另一個展開時 上一個會自動折疊
view.ui.add([
new Expand({
view: view,
content: new Legend({view: view}),
group: "top-left"
}),
new Expand({
view: view,
content: new LayerList({view: view}),
group: "top-left"
}),
new Expand({
view: view,
content: new BasemapGallery({view: view}),
group: "top-left"
}),
], "top-left");
// when()方法 實作當view執行個體被建立時 傳回Promise 所有的邏輯都在view執行個體建立之後
view.when()
.then(() => {
// 擷取DOM對象
const mapTitle = document.querySelector("#inpTitle");
const saveBtn = document.querySelector("#saveBtn");
const model = document.querySelector("#popModel");
const message = document.querySelector("#message");
const content = document.querySelector("#content");
const ok = document.querySelector("#ok");
// 監聽input是否有value
mapTitle.addEventListener("input", pressBtn);
// 監聽ok
ok.addEventListener("click", closeModel);
// 監聽value是否有值 也就是準備儲存的Webmap是否有标題
// 如果存在 則disabled解除 儲存按鈕可以點選
function pressBtn(event) {
if(event.target.value) {
saveBtn.disabled = false;
// 點選之後 savePortal處理儲存邏輯
saveBtn.addEventListener("click", savePortal);
} else {
saveBtn.disabled = true;
}
}
// 儲存webmap至新的portalItem
// 這裡儲存之前 esri會讓你先登入 否則不知道儲存到誰的賬戶
// 儲存過程需要幾秒鐘時間 要耐心等待十幾秒 才會彈出消息
function savePortal() {
model.style.visibility = "visible";
// saveAs需顯示指定title或description
// 建立新portalItem
const myItem = {
title: mapTitle.value
};
// updateFrom儲存目前view的畫面至Webmap
// saveAs儲存至上面建立的myItem
map.updateFrom(view)
.then(() => map.saveAs(myItem))
.then((portalItem) => {
// 設定建立的myItem的網址 儲存成功後可以點選
const url = `${portalItem.portal.url}/home/item.html?id=${portalItem.id}`;
const link = `<a href="${url}">${portalItem.title}</a>`;
message.innerHTML = `你成功建立了${link}項目`;
// 這裡為了不讓使用者先看見空白 等添加成功再顯示整個content
content.style.visibility = "visible";
})
.catch((error) => {
// 如果儲存失敗 比如使用者取消登入 則列印消息
message.innerHTML = `你沒有建立任何項目`;
content.style.visibility = "visible";
})
}
function closeModel() {
model.style.visibility = "hidden";
content.style.visibility = "hidden";
}
})
})
二、小白總結
剛開始的示例難度還是比較低的，主要掌握一下JS的邏輯以及涉及到的相關方法(updateFrom(), saveAs())的使用。
小白一枚 寫的不好多多指教