JavaScript——ArcGIS的Web開發

近日關于ArcGIS的Web開發課程給出了以下任務：

1.在Web開發的過程中調用ArcGIS本地釋出的地圖服務；

2.增添導航欄和點選事件；

3.增添放大縮小控件；

首先添加網頁的基礎代碼架構

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
    <style>
      html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

添加BootStrapt的樣式和ArcGIS的API（在

<head></head>

裡添加）

<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css" target="_blank" rel="external nofollow" >
 <script src="https://js.arcgis.com/4.11/"></script>

建立地圖和視圖（也是在

<head></head>

裡添加）

其中require是對各種子產品的調用，除了Map，MapView子產品，為了調用我們釋出的地圖服務，部落客增添了FeatureLayer子產品

<script>
    require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/FeatureLayer"
    ], function(Map, MapView,FeatureLayer) {

      var map = new Map({
        basemap: "topo-vector"  //這裡是調用底圖
      });    
      //以下的MapView就是視圖容器
      var view = new MapView({
        container: "viewDiv",
        //這裡表示容器的屬性是viewDiv
        //若想要修改整個頁面的樣式架構就可以修改這個viewDiv
        map: map,//調用我們之前定義好的map底圖
        center: [118.08 ,24.48],//地圖中心點的經緯度設定，這裡設定到了廈門
        zoom: 11//縮放級别為11級，若想修改視圖範圍可以對該值進行修改
      });

      //以下是建立一個對象來調用我們釋出的地圖服務
      //url可以在ArcGIS Server Manager中檢視
      var featureLayer = new FeatureLayer({
        url: "	你的地圖服務URL"
      });

      map.add(featureLayer);//在底圖的基礎上添加我們釋出的地圖服務
    });

效果圖如下

JavaScript——ArcGIS的Web開發

添加導航欄，首先需要調用更多的BootStrapt樣式（如上述來添加）

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

接着編寫導航欄的相關代碼（添加在

<body></body>

裡）

<button id="btnTest" type="button" class="btn btn-dark btn-sm" style="position:absolute; z-index: 1000; left:20%; top:1%; width:30px; height:30px;" onclick="doHide();">
    <i class="fas fa-angle-double-right"></i>
  </button>
  <div id="divTest" class="btn-group btn-group-justified" style="display: none; position:absolute; z-index: 9999; left:23%; top:1%; width:80px; height:30px;">
    <button type="button" class="btn btn-dark">Unused</button>
    <button type="button" class="btn btn-dark">Unused</button>
    <button type="button" class="btn btn-dark">Unused</button>
    <button type="button" class="btn btn-dark">Unused</button>
    <button type="button" class="btn btn-dark">Unused</button>
    <div class="btn-group">
      <button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown">Layers <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu" style="background:black;">
        <li>
          <div class="checkedBoxDiv">
                  <input type="checkbox" class="layer" onclick="checkboxOnclick(this)">
                  <font color="white">MapServer</font>
                </div>
              </li>
        <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >#</a></li>
      </ul>
    </div>
  </div>

效果圖如下

JavaScript——ArcGIS的Web開發

最後設定導航欄的動态事件，包括點選箭頭會對清單進行縮放，以及點選最後一欄的Layer會進行點選事件的響應。

function doHide(){
      var oDiv = document.getElementById("divTest");
      //上一行代碼是通過id來對已經定義好的按鈕組進行綁定
      var oButton = document.getElementById("btnTest")
      //上一行代碼是通過id來對已經定義好的箭頭按鈕進行綁定
      if (oDiv.style.display == "none"){
        oDiv.style.display = "";//點選箭頭，顯示按鈕組
      }else {
        oDiv.style.display = "none";//再次點選，隐藏按鈕組
      }
    }
    function checkboxOnclick(checkbox){    //設定onclick事件
      if(checkbox.checked==true){
        alert("勾選成功！");
      }
      else{
        alert("取消勾選！");
      }
    }

最終效果如下圖

JavaScript——ArcGIS的Web開發

附上最終代碼：

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

  <title>ArcGIS API for JavaScript Hello World App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css" target="_blank" rel="external nofollow" >
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="https://js.arcgis.com/4.11/"></script>

  <script>
    require([
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/FeatureLayer"
    ], function(Map, MapView,FeatureLayer) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [118.08 ,24.48],
        zoom: 11
      });

      var featureLayer = new FeatureLayer({
        url: "	http://localhost:6080/arcgis/rest/services/MyMapService/MapServer"
      });

      map.add(featureLayer);
    });
    function doHide(){
      var oDiv = document.getElementById("divTest");
      var oButton = document.getElementById("btnTest")
      if (oDiv.style.display == "none"){
        oDiv.style.display = "";
      }else {
        oDiv.style.display = "none";
      }
    }
    function checkboxOnclick(checkbox){
      if(checkbox.checked==true){
        alert("勾選成功！");
      }
      else{
        alert("取消勾選！");
      }
    }
  </script>
</head>
<body>
  <div id="viewDiv"></div>
  <button id="btnTest" type="button" class="btn btn-dark btn-sm" style="position:absolute; z-index: 1000; left:20%; top:1%; width:30px; height:30px;" onclick="doHide();">
    <i class="fas fa-angle-double-right"></i>
  </button>
  <div id="divTest" class="btn-group btn-group-justified" style="display: none; position:absolute; z-index: 9999; left:23%; top:1%; width:80px; height:30px;">
    <button type="button" class="btn btn-dark">Unused</button>
    <button type="button" class="btn btn-dark">Unused</button>
    <button type="button" class="btn btn-dark">Unused</button>
    <button type="button" class="btn btn-dark">Unused</button>
    <button type="button" class="btn btn-dark">Unused</button>
    <div class="btn-group">
      <button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown">Layers <span class="caret"></span></button>
      <ul class="dropdown-menu" role="menu" style="background:black;">
        <li>
          <div class="checkedBoxDiv">
                  <input type="checkbox" class="layer" onclick="checkboxOnclick(this)">
                  <font color="white">MapServer</font>
                </div>
              </li>
        <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >#</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

JavaScript——ArcGIS的Web開發

繼續閱讀

C#+ArcEngine代碼檢測ArcEngine Runtime是否安裝以及是否授權

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條