ArcGIS API for javascript Bookmarks（書簽）示例2

阿新 • • 發佈：2019-01-23

style gin spa -s java lin 事件 viewport cal

1、運行效果圖

技術分享圖片

說明：這篇博文介紹的書簽位於地圖之上

有關博文中引用的API文件怎麽iis上部署，請參考我前面的博文

2、HTML代碼

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" 
/>
<title>Bookmark Widget (Editable)</title>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.3/jsapi/js/dojo/dijit/themes/nihilo/nihilo.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.3/jsapi/js/esri/css/esri.css" /> 

     <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .bookmark-container {
        position: absolute;
        top: 100px;
        left: 15px;
        padding: 1rem;
        background: #ffffff;
        border-radius: 4px;
        border 
: 1px solid #eeeeee;
      }
    </style>
       <script>
           var dojoConfig = {
               parseOnLoad: true     // 解析
           };
    </script>
       <script type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.3/jsapi/init.js"></script>
      <script>
          // 導入包
          dojo.require("dijit.layout.BorderContainer");
          dojo.require("dijit.layout.ContentPane");
          dojo.require("dijit.form.DropDownButton");
          dojo.require("esri.map");
          dojo.require("esri.dijit.Bookmarks");
          var map, bookmarks;
          function init() {
           
              map = new esri.Map("map", { center: [-100, 40], zoom: 4 });
              MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer
              ("http://localhost/arcgis/rest/services/DZDT2012/MapServer");
              map.addLayer(MyTiledMapServiceLayer);

              // 書簽可以被指定為一個數組對象結構:
              // { extent: <esri.geometry.Extent>, name: <some string> }
              var bookmarks_list = [
                 ];
              // 創建書簽組件
              bookmarks = new esri.dijit.Bookmarks({
                  map: map,
                  editable: true,    // 可允許編輯。默認false則只讀模式
                  bookmarks: bookmarks_list        // Array / JSON
              }, dojo.byId(‘bookmarks‘));

      
              // Add bookmarks to the widget
              Object.keys(bookmarks_list).forEach(function (bookmark) {
                  bookmarks.addBookmark(bookmarkJSON[bookmark]);    
              });
              // 綁定移除標簽事件
              dojo.connect(bookmarks, "onRemove", function () {
                  alert(‘刪除成功‘);
              });
          }
          // 加載時顯示
          dojo.ready(init);
    </script>
</head>
  <body class="nihilo">
    <div id="map"></div>
    <div class="bookmark-container">
      <div id="bookmarks"></div>
    </div>
  </body>
</html>

其中的代碼

 map = new esri.Map("map", { center: [-100, 40], zoom: 4 });
              MyTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer
              ("http://localhost/arcgis/rest/services/DZDT2012/MapServer");
              map.addLayer(MyTiledMapServiceLayer);

還可以替換為下面的形式：

map = new esri.Map("map", {
basemap: "topo",
center: [-100, 40],
zoom: 4
});

ArcGIS API for javascript Bookmarks（書簽）示例2

style gin spa -s java lin 事件 viewport cal 1、運行效果圖說明：這篇博文介紹的書簽位於地圖之上有關博文中引用的API文件怎麽iis上部署，請參考我前面的博文 2、HTML代碼 <!DO

ArcGIS API for JavaScript學習（1）：第一個地圖

樣式表參數資源 charset 底層 arcgis 順序 api navi 1.簡介 ArcGIS API for JavaScript跟隨ArcGIS 9.3同時發布，是ESRI根據JavaScript技術實現的調用ArcGIS Server REST API接口的一

WebGIS 之 ArcGIS API for JavaScript 總結（一）

幾天時間過完了一本《WebGIS 從基礎到開發實踐》如今閱讀技術書籍也同讀小說一樣，風裡來雨裡去，恢巨集鉅著，從洪荒原始到當今現代。由於是媳婦在圖書館給借的書，在這裡將這本書做一個總結和筆記。一、為什麼要讀這本書。美國的esri公司，全稱美國環境系統研究所公司

ArcGIS API For JavaScript（六）InfoWindow

ArcGIS API For JavaScript（六）InfoWindow <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"&n

ArcGIS API For JavaScript（五）呼叫GP服務--簡單網路路徑分析

ArcGIS API For JavaScript（五）呼叫GP服務--簡單網路路徑分析 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

ArcGIS API For JavaScript（四）呼叫GP服務--簡單緩衝區分析

ArcGIS API For JavaScript（四）呼叫GP服務--簡單緩衝區分析 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g

ArcGIS API For JavaScript（三）QueryTask&IdentifyTask實現空間查詢

ArcGIS API For JavaScript（三）QueryTask&IdentifyTask實現空間查詢 1、通過QueryTask（）實現空間查詢在地圖上畫一個多邊形，將和多邊形相交的要素找出並高亮顯示，之後動態新增表格，將要素的名稱依次顯示在表格中 <

ArcGIS API for JavaScript 4.9學習筆記一（建立2D/3D地圖）

ArcGIS API for JavaScript 4.9學習筆記一（建立2D/3D地圖） 2D：程式碼： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

ArcGIS API for JavaScript 3.26本地部署（不使用iis）

首先大家可以將3.26下載到本地，隨便找一個資料夾進行存放。 1、以下是我的存放目錄： me.html則是我寫程式碼的地方。 2、接下來看我在wbstrom中的工作引用資料夾這裡我引用的是sublime資料夾，所以相對應我開啟me.html的時候，網站

ArcGIS API For Javascript GP工具 Printing Tools匯出地圖或者列印地圖（二）：GP 服務Printing Tools

ArcGIS API For Js 出圖按照上一篇寫的，用Printing Tools匯出或者列印地圖原始碼奉上，裡面需要注意跨域問題，要設定代理 //打印出圖 function initPrintMap() { require(['dojo/_bas

ArcGIS API For Javascript GP工具 Printing Tools匯出地圖或者列印地圖（一）：GP 服務Printing Tools

ArcGIS API For Js 出圖在Arcgisserver 10.X版本里面，安裝ArcServer之後自帶列印模板，不需要自己再單獨釋出；如果安裝之後沒用也是可以自己通過ArcToolBox裡面帶的工具自己再發布，本篇先說一下這個Printing Tools GP服務。為

【十】ArcGIS API for Javascript之專題圖的製作（四）熱力圖渲染（上）

一、熱力圖定義熱力圖（heat map）也稱熱圖，是以特殊顏色高亮區域的形式表示密度、溫度、氣壓、頻率等分佈的不易理解和表達的資料。二、HeatmapRenderer esri/renderers/HeatmapRenderer類用來快速繪製熱力圖，將要

ArcGIS API for JavaScript 4.10（2018年12月）的新增功能

原網址https://www.esri.com/arcgis-blog/products/js-api-arcgis/announcements/whats-new-in-arcgis-api-for-javascript-4-10-december-2018/ 4.10版引入了大量新功能和改進

ArcGIS API for JavaScript 實戰與解析（一）：簡介與快速上手

在這篇文章之前廢話幾句。自從過完十一假期，每天都在奔波和加班中度過，直到今天才真正能夠休息。隱約記得去年是同樣的情形，但並不是相同的事由，希望明年十月對我好一點。從二月到十月的八個月裡，我幾乎每天都堅持學習，從程式語言、軟體開發到機器學習、WebGIS，還有

ArcGIS API For JavaScript官方文件（四）之事件處理

ArcGIS API For JavaScript是事件驅動的API。事件發生在您與JavaScript應用程式互動時，載入頁面、單擊滑鼠、執行任務和許多其他操作都會觸發事件。您可以通過監聽事件並編寫響應事件的程式碼使應用程式具有互動性，這就是所謂的“處理”事

（十三）ArcGIS API For Javascript之網路分析

require(["esri/map", "dojo/on", "dojo/dom", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tas

（三）ArcGIS API For Javascript之呼叫動態地圖服務

1.引言在本篇部落格中主要記錄一下在ArcGIS API如何呼叫自己釋出的動態地圖服務,利用動態地圖服務我們可以完成哪一些需求等等。注：（如何利用ArcGIS Server釋出動態地圖服務請看部落格ArcGIS Server釋出動

（十九）ArcGIS API For Javascript之專案真實部署

1.引言(友情提示：新手勿看) 在先前的部落格當中我們已經說了，ArcGIS API在本地如何部署，但是在先前的本地部署過程中存在什麼問題呢？現在我們來看一下先前的部署當中哪一些不合適的地方。先前我們的js檔案引入方式為:

ArcGIS API for JavaScript 4.x中的3D部分（3）

（3）基於cityengine建模，ArcGIS Portal釋出Web服務本篇文章主要針對自行生產、釋出、使用3D圖形服務資料。若沒有這類特別需求，可直接使用esri官網API中提供的服務，簡單

ArcGIS API For JavaScript——空間查詢（QueryTask）

ArcGIS API For JavaScript提供了兩個工具類用於查詢任務 IdentifyTask：利用該工具類可以對多個圖層進行查詢，主要利用IdentifyParameters物件來規

ArcGIS API for javascript Bookmarks（書簽）示例2

相關推薦