Arcgis api for Javascript + arcgisServer + arcSDE笔记（2）

最新推荐文章于 2024-07-27 12:21:02 发布

gyy9911

最新推荐文章于 2024-07-27 12:21:02 发布

阅读量642

点赞数

分类专栏： ArcGIS 文章标签： ArcGIS ArcGIS API for Javascript

本文链接：https://blog.csdn.net/Boss_Gao/article/details/107082253

版权

ArcGIS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

书接Arcgis api for Javascript + arcgisServer + arcSDE笔记（1）

3 Arcgis api for Javascript

Arcgis api for Javascript提供了一系列接口，可以在网页上实现地图加载、地理数据的展示与编辑、空间分析等功能。

本章仅介绍基本框架的搭建、数据的加载等，详细的开发文档在https://developers.arcgis.com/javascript/latest/guide/查阅。

3.1 api安装部署

使用arcgis api for js只需要在网页代码中写入：

（现在已经更新到4.15了）

网页会在线调取arcgis api。但如果需要离线部署，需要下载api到本地，并将其部署到服务器上。

首先从官网（https://developers.arcgis.com/javascript/latest/guide/get-api/）上下载api压缩包。

在IIS上搭建一个网站，在网站的MIME类型中注册一些条目（具体在上述网站中有介绍）。

将解压后的arcgis_js_api文件夹放入网站所在文件夹。然后，需要修改arcgis_js_api\library\4.14\init.js和arcgis_js_api\library\4.14\dojo\dojo.js两个文件

打开init.js，搜索baseUrl:”https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo”，将[HOSTNAME_AND_PATH_TO_JSAPI]内容替换为服务器路径，如：

网站地址为http://localhost/ArcHelloWorld/，则将[ ]中内容改为http://localhost/ArcHelloWorld/arcgis_js_api/library/4.14/。最终效果：baseUrl:”http://localhost/ArcHelloWorld/arcgis_js_api/library/4.14/dojo”。

对dojo.js文件做同样操作。

然后就可以引用本地部署的api了。引用代码如下：

（等价于<script src="https://js.arcgis.com/4.14/"></script>）

注意，本地api的链接必须是http或https形式的（官方推荐https），所以必须部署在服务器上。

为了界面效果，还需要引用arcgis的css文件（<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/css/main.css">），可以将其下载到本地离线使用。

3.2 hello world

以下是官方文档提供的hello world代码（只截取了<script>部分）：

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

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

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

使用到arcgis api的相关代码都是放在require(["esri/Map", "esri/views/MapView"], function(Map, MapView) {……}中的，require中填写需要引用的模块，并将模块名作为function的参数，程序逻辑写在function的函数体中。

3.3 图层加载

以下是添加地图的代码：

//require("esri/layers/MapImageLayer")

       var mylayer = new MapImageLayer({

        url: "http://localhost:6080/arcgis/rest/services/测试地图/MapServer",
      });
Map.add(mylayer);

url为之前在arcgis server上发布的地图服务的链接，“测试地图”即是服务的名称。MapImageLayer会将整张地图加载进去，包含地图内的所有图层（如下图，左侧是layerList微件）。

注：可以使用sublayers属性加载其中部分图层。

如果想要单独加载某个矢量图层，则需要使用FeatureLayer，使用方法类似。FeatureLayer的url可以从服务器中查看。例如想加载上图中的某个矢量图层，可以在浏览器中浏览http://localhost:6080/arcgis/rest/services/测试地图/MapServer，在网页中可以查看到图层列表，每个图层都对应一个编号。

“管理范围界桩位移点”的代码为0，则使用以下代码可以单独加载这个图层：

       var myFeature = new FeatureLayer({
        url: "http://localhost:6080/arcgis/rest/services/测试地图/MapServer/0",

      });

单独加载某个图层的优势在于，可以单独对图层进行配置，包括颜色、线条等符号样式，点击事件，弹出窗口等。

建议对于需要交互的矢量数据以FeatureLayer单独加载，以进行配置和编辑；对于影像、路网等底图信息以MapImageLayer加载。

注意：

如果是需要提供编辑功能的图层，则需要从FeatureServer中加载。FeatureServer即地图发布时勾选的Feature access，这种图层才能开启编辑功能。加载这种图层的方法与上文相同，将url中的MapServer改为FeatureServer即可。

3.4 使用微件（widget）

Arcgis提供了相当数量的微件，可以大幅简化开发。例如上文提到的layerList微件，它可以展示地图中的图层，并控制其开闭。此外还有导航控制条、画图工具条、搜索框、量测工具等常用功能。

具体的内容可以在https://developers.arcgis.com/javascript/latest/api-reference/中查看。

以下介绍了一些常用微件。

3.4.1 图层列表（LayerList）

自动显示图层列表，以下是显示图例的例子。

var layerList = new LayerList({

          view: view,
          listItemCreatedFunction: function (event)
          {
            const item = event.item;
            if (item.layer.type != "group")
            {
              // don't show legend twice
              item.panel = {
                content: "legend",
                open: false,//默认不展开
              };
            }
          }
        });
        view.ui.add(layerList, "bottom-left");

3.4.2 指北针和比例尺（Compass ScaleBar）

var compassWidget = new Compass({
  view: view
});

// Add the Compass widget to the top left corner of the view
view.ui.add(compassWidget, "top-left");

var scaleBar = new ScaleBar({

  view: view

});

// Add widget to the bottom left corner of the view

view.ui.add(scaleBar, {
  position: "bottom-left"

});

3.4.3 搜索框（Search）

搜索框用于搜索地图中的要素，默认数据源是arcgis自带的地理编码服务器（没什么用，可以关掉），可以针对每个图层自定义搜索数据源和搜索规则。

 var searchWidget = new Search({
        view: view,
        locationEnabled:false,//使用本地位置，没什么用
        includeDefaultSources:false,
        sources: [{
          layer: Jihua2019Layer,
          searchFields: ["OBJECTID","Layer"],
          outFields: ["*"],
          displayField: "OBJECTID",
          exactMatch: false,
          suggestionsEnabled:true,
          suggestionTemplate: "{OBJECTID}, {Layer}",  、
// 注意：只有使用10.3的 地理编码服务，才能使用suggestions，而该服务必须具有suggest capability loaded或支持分页的10.3要素图层，i.e.supportsPagination = true。
          name: "搜索2019年新城计划出让地块",
          placeholder: "ID或名称"
        }, 
        {
          layer: CunliangLayer,
          searchFields: ["汇总标"],
          displayField: "汇总标",
          exactMatch: false,
          outFields: ["汇总标", "ID", "规划用"],
          name: "搜索新城存量用地",
          placeholder: ""
        },
        {
          layer: roadLayer,
          searchFields: ["ID"],
          displayField: "ID",
          exactMatch: false,
          outFields: [ "ID"],
          name: "道路",
          placeholder: ""
        },]
      });

3.4.4 编辑工具（Editor）

可以对所有可编辑图层进行编辑，包括图形和其属性。可编辑图层需要来自FeatureServer。

        var editor = new Editor({
          view: view
        });
        view.ui.add(editor, "top-right");

3.4.5 Expand

可以把一个微件的ui收缩成一个小图标，使界面简洁，很有用。

//layerlist放进expand里
        const llExpand = new Expand({
          view: view,
          content: layerList,
          expanded: false
        });
        view.ui.add(llExpand, "bottom-left");