arcgis javascript 空间查询 arcgis javascript api

转载

mob64ca1409970a 2023-10-01 19:05:04

文章标签 WebGIS API ArcGIS html Web 文章分类 JavaScript 前端开发

一、简介

子路曰：“卫君待子而为政，子将奚先？”子曰：“必也正名乎！”

孔子认为，为政最先要做的事情是正名，名不正则言不顺。

语言是上天赋予人类的神奇能力，而“名”则是语言的基础。很多时候，我们掌握了事物的名，就掌握了利用它的能力。对未知的事物，我们要命名，而想要理解已知的事物，要先从它的名字入手。

ArcGIS API for JavaScript 简称 ArcGIS JS API。

ArcGIS 不用多说。冠上这个名字，说明它一是 ESRI 的产品，二是跟我们所熟悉的那个东西有千丝万缕的联系。

API （应用程序接口），即一些预先封装的函数，我们可以通过阅读文档方便地使用这些函数开发所需要的功能。

JavaScript 是我们用于实现业务逻辑（即功能）的语言，而 API 已经提供了大部分基础的功能，我们要做的工作主要是“整合”。前文已经提到过，JavaScript 是 Web 前端的脚本语言，但在不断的发展中逐渐成为完整的高级语言，并衍生出各种框架，这也使通过它实现更复杂的 GIS 功能成为可能。

使用 ArcGIS JS API，我们可以方便地开发浏览器上的 GIS，实现地图的显示、查询、分析等功能。目前最新的版本是 4.9，随着不断地更新，该 API 的功能想必会越来越丰富。值得一提的是，Web 开发者的社区非常活跃，相关技术更新地非常快，所以我们 GISer 要学会搭便车，不断接受新知识，把有用的东西借鉴过来。ESRI 在这方面做得很好，版本更迭很快，所以很少有人去翻译它的官方文档，这时候就需要我们有一定的英文阅读能力了。刚开始我也很头大，但只要坚持几天，熟悉一些专业词汇，就可以很轻松地阅读了，所以不要畏惧，我们学了这么多年的英语，已经有足够的水准了。

如果你已经掌握了 Web 前端开发的最基本的知识，就可以直接上手编写第一个 Web GIS 应用啦！（如果没有也不用着急，只需要花一两天时间快速过一遍前端开发的手册即可）

二、快速上手：初始 app

参考：https://developers.arcgis.com/labs/javascript/create-a-starter-app/

这里，我们要构建一个初始的、基本的、可以重复利用的应用。除去写一个网页所必须的东西，一个 GIS，最起码要能显示地图。

开发网页可以使用许多工具，大致分为 IDE（集成开发环境）和编辑器两大类（实际上现在一些自称编辑器的软件功能已经十分逼近 IDE），比较主流的有

IDE：
WebStorm/PHPStorm
VisualStudio
VSCode
编辑器：
Sublime Text
Vim

用什么工具都可以，不用管网上的争论不休，觉得不好用换一个就是了，从一个转换到另一个不费什么时间。非要我推荐的话，我觉得新手可以用 WebStorm，熟练一点的 Windows 用 Sublime Text，Linux 用 vim，调试用 Chrome 即可。我是用的 Sublime Text。

1 创建 HTML

首先我们来写一个网页的基本框架。这里比较特别的是，<body> 里只有一个填满整个区域的 <div> 元素，当然也可以加别的东西，不过谷歌地图等都是采用这种设计，也确实比较好看。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS DevLabs: 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>

2 添加引用

为了使用 ArcGIS JS API，我们需要添加两个引用，一个是 ArcGIS CSS，一个是 JS API。

之前看有的教程是把 API 下到了本地，然后需要进行手动的配置，比较复杂，刚开始就做这个没太大意义，还容易失去耐心。在联网的情况下，我们可以直接引用官网的 URL，即在 <head> 标签中添加：

<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>

3 添加 map 和 view

在 Web GIS 中，map 用来定义数据，而 view 用来显示数据。这一部分便是整个应用的核心。完整的代码如下，仍然要添加在 <head> 中：

<script>
  require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/domReady!"
    ], function(Map, MapView) {

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

    var view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.71511,34.09042],
      zoom: 10
    });
  });
</script>

我们来一步步解析

require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/domReady!"
    ], function(Map, MapView){···});

这个部分声明了需要调用的模块，从名称上我们就可以直观地看出它的作用，除了最后一个 dojo，这个是一个前端的框架，domReady 是其中的一个模块，意思是加载完网页的所有 dom，也就是除了外部图片等资源的内容后再运行 JS 代码，我们默认使用这个模块，暂时不用深入理解。

除了这个，我们声明了几个模块，就要在 function 的参数中写几个，而且顺序要严格对应。实际上我们可以在参数中使用自定义的名称，但建议与原名保持一致，方便理解代码。

接下来看 function 里的内容：

function(Map, MapView) {

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

    var view = new MapView({
      container: "viewDiv",
      map: map,
      center: [-118.71511,34.09042],
      zoom: 10
    });
  }

map 和 view 实际上是两个对象，分别使用了 Map 和 MapView 的构造函数创建。我们使用 topo-vector 作为底图，除此之外，ArcGIS 官方还提供了许多其它底图，可以根据需要选用，只需要知道底图的名字即可。（如果使用自己搭建的服务器，则需要配置 URL 等）。

view 的几个参数，container 即容器，设置成我们之前放在 <body> 里的 <div>。map 即需要显示的地图，center 是显示的中心位置，以经纬度坐标表示。zoom 为细节层次，即以什么样的程度显示地图（想想影像金字塔、瓦片地图等概念）。

这个应用的完整代码如下：

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS DevLabs: JavaScript Starter App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  
  <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
  <script src="https://js.arcgis.com/4.9/"></script>
  
  <script>  
    require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/domReady!"
    ], function(Map, MapView) {

      var map = new Map({
        basemap: "topo-vector"
      });
      
      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.71511,34.09042],
        zoom: 10
      });
      
    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

可以直接把这些代码复制到记事本中，然后更改后缀为 .html，使用浏览器打开，就可以看到效果了。（写文章的地方网络很差，图像可能还没完全渲染出来，大家不要太在意细节的差异哈）

arcgis javascript 空间查询 arcgis javascript api_ArcGIS