JavaScript——ArcGIS的Web开发

最新推荐文章于 2024-03-25 09:52:09 发布

Zisen_66

最新推荐文章于 2024-03-25 09:52:09 发布

阅读量1.1k

点赞数

分类专栏： ArcGIS的Web开发文章标签： JavaScript Arcgis

本文链接：https://blog.csdn.net/qq_41048063/article/details/89683326

版权

ArcGIS的Web开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

近日关于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">
 <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);//在底图的基础上添加我们发布的地图服务
    });

效果图如下
在这里插入图片描述
添加导航栏，首先需要调用更多的BootStrapt样式（如上述来添加）

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <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="#">#</a></li>
      </ul>
    </div>
  </div>

效果图如下
在这里插入图片描述
最后设置导航栏的动态事件，包括点击箭头会对列表进行缩放，以及点击最后一栏的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("取消勾选！");
      }
    }

最终效果如下图
在这里插入图片描述

附上最终代码：

<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" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <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="#">#</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

Zisen_66

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript——ArcGIS的Web开发

近日关于ArcGIS的Web开发课程给出了以下任务：1.在Web开发的过程中调用ArcGIS本地发布的地图服务；2.增添导航栏和点击事件；3.增添放大缩小控件；首先添加网页的基础代码框架<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="...
复制链接

扫一扫