mode是什么意思 sniff_你ArcGIS for JavaScript算什么东西！真香真好用-CSDN博客

本文链接：https://blog.csdn.net/weixin_42436686/article/details/112350246

感觉可以就点个赞吧，每一个赞都是支持我继续输出的动力，谢谢~

一学期的徘徊、无奈等等等等都随最后一门考试的结束烟消云散了。趁着有些时间，还是想输出点东西，一来作为总结，二则是供入门者提供一个参考，算是抛砖引玉吧。

一、什么是ArcGIS for JS?

简单说，它是一种可以让开发人员在Web业务系统中嵌入地图的方法。一般可以简称为ArcGIS JS API，由全球领先的GIS平台软件及服务提供商Esri向开发者提供。一般由两部分组成：一套JS API库，一套SDK，也是就开发帮助。包括了API接口的具体说明、样例代码以及入门级的开发指南。

这套API能实现哪些功能？比如：你可以把你的业务数据放到地图上，在这份地图上，你可以看到你的业务数据都分布在哪些区域，哪些区域数据的分布相对密一些，哪些区域数据的分布相对零散些；你还可以用不同的符号来呈现不同类别的数据，这样就可以直观的进行数据的对比。另外，你还可以定位到某个数据的具体位置，看看它周边都有哪些其他数据，帮助你判断这些数据之间是不是有关系？

插个小故事，当年欧洲发生霍乱时一个街区10天内就死了500多个人。居民怀疑瘟疫是由于地下的墓穴引起的，引起了极大的社会恐慌。当时Snow博士创建了地图，通过几周时间用大量的数据来检测推理结果发现是一个污染的水泵造成瘟疫，对其进行处理之后霍乱发生率就大大降低了。（假如当时这个博士用JS画一个瘟疫分布数据与地图叠加，可能一对比就发现规律了，不过话又说回来，他能以一种空间联系的思想来推断问题的根源与起因，挽救一场人类的灾难，确实是一件名垂青史的事情。）

总结起来说ArcGIS for JS可以帮助你实现：1.把数据放到地图上，也就是可视化；2.可以在地图上找你关注的数据，也就是空间查询；3.可以帮助你分析数据的空间分布模式、规律，也就是常说的空间分析。大体上就是这三点。可视化的方式多种多样，后面我们会讲到。要重点讲的是空间分析，因为这里的学问很大。ArcGIS的API跟其他的API很大的区别就在与它所提供的空间分析能力，缓冲分析、热力图、热点图、空间统计、路径轨迹等等。(文章封面图便是利用JS做的，当然不是我做的，而是官网上的示例，酷不酷！)

二、如何入手学习ArcGIS for JS?

首先，明确说，部署真的是一大问题！（解释一下部署的意思，就是你在你的本地环境里将包部署起来，到时候调用的时候可以以http://host:8080&&&&^的端口访问你本地的包）

有好多鲜活示例告诉我们...很多时候你在本地部署安装包会出现这样那样奇奇怪怪的问题，比如调用包里的js文件毫无反应、发布不了服务等等等等。当然能部署上最好，网上部署教程很多，可自行百度，花些时间配一下。

当然，配不了也无所谓，完全可以调用在线的端口搞事情。

比如

<!DOCTYPE html>
<html>
<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>FeatureTable Formatting</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.21/"></script>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

    <style>
        html, body, #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .claro .dijitSplitContainer-child, .claro .dijitBorderContainer-child {
            border: 0 #b5bcc7 solid;
        }

        }
    </style>
    <script>
        require([
          "esri/layers/FeatureLayer",
          "esri/dijit/FeatureTable",
          "esri/geometry/Extent",
          "esri/symbols/SimpleMarkerSymbol",
          "esri/symbols/SimpleLineSymbol",
          "esri/Color",
          "esri/map",
          "dojo/dom-construct",
          "dojo/dom",
          "dojo/number",
          "dojo/parser",
          "dojo/ready",
          "dojo/on",
          "dojo/_base/lang",
          "dijit/registry",
          "dijit/form/Button",
          "dijit/layout/ContentPane",

          "dijit/layout/BorderContainer",
          "dijit/form/TextBox"
        ], function (
          FeatureLayer, FeatureTable, Extent, SimpleMarkerSymbol, SimpleLineSymbol, Color, Map,
          domConstruct, dom, dojoNum, parser, ready, on, lang,
          registry, Button, ContentPane, BorderContainer, TextBox
        ) {
            var selectionSymbol;
            parser.parse();
            var symbol = new esri.symbol.SimpleMarkerSymbol();
            symbol.setSize(35);
            symbol.setColor(new dojo.Color([250, 128, 114, 0.3]));

            ready(function () {

                var sr = new esri.SpatialReference({
                    wkid: 4326
                });
                var startExtent = new esri.geometry.Extent(-88.27, 17.47, -88.16, 17.54, sr);
                map = new esri.Map("map", {
                    logo: false,
                    center: [83.75, 33.75],
                    zoom: 3
                    //                sliderPosition:"top-right"
                });
                map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://map.geoq.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer"));

                map.on("load", loadTable);
                var myFeatureLayer; var myFeatureTable;
                function loadTable() {
                    myFeatureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/%E6%9C%80%E5%90%8E%E7%9A%84%E5%9B%BE%E5%B1%82/%E4%B8%9D%E7%BB%B8%E4%B9%8B%E8%B7%AF/FeatureServer/0", {
                        mode: FeatureLayer.MODE_ONDEMAND,
                        outFields: ["*"],
                        visible: true,
                        id: "fLayer"
                    });
                    myFeatureLayer.setSelectionSymbol(symbol);

                    map.addLayer(myFeatureLayer);


                    myFeatureTable = new FeatureTable({
                        featureLayer: myFeatureLayer,
                        map: map,
                        showAttachments: true,

                        zoomToSelection: true,
                        gridOptions: {
                            allowSelectAll: true,
                            allowTextSelection: true,
                        },
                        editable: true,
                        outFields: ["name", "description", "grp2015"],
                        fieldInfos: [
                          {
                              name: 'name',
                              alias: '城市名字',
                              editable: false
                          },
                          {
                              name: 'description',
                              alias: '描述',
                          },
                          {
                              name: 'grp2015',
                              alias: '经济'
                          },
                        ],
                    }, 'myTableNode');

                    myFeatureTable.startup();

                    // listen to show-attachments event
                    myFeatureTable.on("show-attachments", function (evt) {
                        console.log("show-attachments event - ", evt);
                    });

                }
                on(dom.byId("sqlque"), "click", function (e) {
                    if ($('#bot').is(":hidden")) { $('#bot').show(); }
                    else { $('#bot').hide(); }
                    map.removeLayer(myFeatureLayer);
                    var sql_r;
                    var submin = dom.byId("submin").value;//序号最小值
                    var submax = dom.byId("submax").value;//最大值
                    //判断输入是否在范围内
                    if (submin < 0 || submin > 40000) { alert("请输入最小值"); } //最小值
                    if (submax < 0 || submax > 40000) { alert("请输入最大值"); } //最大值
                    var sql_gdp = "grp2015 >=" + submin + "and grp2015<=" + submax;  //序号SQL查询字符串
                    var name = dom.byId("name_test").value;//name的值
                    var sql_name = "name Like '%" + name + "%'";
                    if (submin == "" || submax == "") {
                        sql_r = sql_name;
                    }
                    else if (name == "") {
                        sql_r = sql_gdp;

                    }
                    else {
                        sql_r = sql_gdp + "and " + sql_name;
                    }
                    myFeatureLayer.setDefinitionExpression(sql_r);
                    myFeatureLayer.setSelectionSymbol(symbol);
                    myFeatureLayer.on("click", function (evt) {
                        var idProperty = myFeatureLayer.objectIdField;
                        var feature, featureId, query1;
                        if (evt.graphic && evt.graphic.attributes && evt.graphic.attributes[idProperty]) {
                            feature = evt.graphic; //获取要素形状
                            featureId = feature.attributes[objectid]; //获取要素ID
                            //实例化查询参数
                            query1 = new Query();
                            query1.returnGeometry = true;
                            query1.objectIds = [featureId];
                            query1.where = "1=1";  //取查询中的全部数据
                            myFeatureLayer.selectFeatures(query1, FeatureLayer.SELECTION_NEW);
                        }
                    });
                    map.addLayer(myFeatureLayer); //添加要素查询结果图层

                    myFeatureTable.refresh(); //更新要素表格
                });

            });
        });
    </script>
</head>
<body class="claro esri">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'"
         style="width: 100%; height: 100%;">
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height: 40px;">
            GDP：<input id="submin" />to
            <input id="submax" /><br>
            name：
            <input id="name_test" />
            <button id="sqlque">
                查询
            </button>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true"
             style="height: 60%">
            <div id="map">
            </div>
        </div>
        <div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true"
             style="height: 40%">
            <div id="myTableNode">
            </div>
        </div>
    </div>
</body>
</html>

出来的效果是这样的：

其中这种（类似下面这个网址），就是在线调用的，就是说不管在哪个电脑上，配没配置js，只要有网，你点一下，就能打开。

https://js.arcgis.com/3.21/dijit/themes/claro/claro.cssjs.arcgis.com

至于如何进一步学习，可以从小部分搞起来，比如，如何调用来在我写的地图上实现一个鹰眼图？如何在地图上加标题？如何加比例尺？如何加图例？等等等等，这种我不一一列举了，完全可以百度，网上教程多的很，或许代码没法直接运行，但将不能直接运行的代码搞定，一样可以做到提高。具体也可以去官网，看示例，官网上的示例是最全的，简单地说就是，其他所有的样式都是从官网上直接摘下来，或是在此基础上改动的。

附4.6版本链接：

ArcGIS API for JavaScriptdevelopers.arcgis.com

三、作业展示

当时就是一心想做做俺莱芜的，就简单搞了搞，中间部署出了问题，亏了 @小斌斌斌斌建议，改用在线调用才搞定。流程大致是：

1.找底图和POI数据，然后发布服务

2.建网页，构建框架，引用ArcGIS for JS，同时与先前发布的服务衔接。

3.在这其中，我加了鹰眼图、比例尺、图例、加了个搜索功能...当然，布局丑的一匹...

最后效果大致是：