ArcGIS JavaScript County API 多边形图答案

【问题标题】：ArcGIS JavaScript County API polygon plotArcGIS JavaScript County API 多边形图
【发布时间】：2018-10-08 10:00:33
【问题描述】：

我尝试根据给定的 Fips 代码使用 ArcGis java 脚本绘制县域多边形地图。

首先，我将使用 Ajx 查询从 .txt 文件中读取 Fips、颜色（RGB）和标签（HTML）

对于读取的每个 Fips，我在地图上绘制了这个县 Fips。

每个绘制的多边形上都会有 html 标签。

我也使用API服务https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3

我下面的代码会产生结果，但加载地图的时间太长。谁能帮我优化代码？

<!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>Unique Value Renderer</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">


<style>
    html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.23/"></script>
<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>

    var map;
    require([
        "esri/map", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/toolbars/draw",
        "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
        "esri/renderers/UniqueValueRenderer", "esri/Color"
    ], function (
        Map, FeatureLayer, InfoTemplate, Draw,
        SimpleLineSymbol, SimpleFillSymbol,
        UniqueValueRenderer, Color
    ) {
            map = new Map("map", {
                basemap: "topo",
                center: [-100, 40],
                zoom: 4,
                slider: false
            });
            map.on("load", gisplot);

            function gisplot() {
                var stringDataSum = $.ajax({
                    url: "./GIS.txt",
                    async: false,
                    dataType: "text"
                }).responseText;

                var allTextLines = stringDataSum.split(/\r\n|\n/);


                var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);
                defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);
                //create renderer
                var renderer = new UniqueValueRenderer(defaultSymbol, "FIPS");

                //add symbol for each possible Fips value in the GIS.txt

                for (var i = 1; i < allTextLines.length; i++) {
                    var data = allTextLines[i].split(',');
                    fip = data[0];/**Fips Need to add to map**/
                    colx = [data[3], data[4], data[5],0.7];/**Rgb Color**/
                    htm = "<table class='tables'><tr><th>Lable1:</th>" + data[1] + "</tr><tr><th>Label2:</th>" + data[2] + "</tr></table>";/**Tooltip Lable HTML**/

                    /**Add County by FIPs Polygon**/
                    renderer.addValue({
                        value: fip,
                        symbol: new SimpleFillSymbol().setColor(new Color(colx))
                    });

                    /** Add Info Template (Tooltips) for each County FIPs Polygon*/
                    var infoTemplate = new InfoTemplate("${NAME} County",htm);
                    var featureLayer = new FeatureLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {
                        mode: FeatureLayer.MODE_AUTO,
                        //outFields: ["NAME"],
                        infoTemplate: infoTemplate
                    });
                    //featureLayer.setDefinitionExpression("STATE_NAME = ''");
                    featureLayer.setRenderer(renderer);
                    map.addLayer(featureLayer);


                }


            }

            map.on("dbl-click", function () {
                var d = new Draw(map);
                d.on("draw-end", function (e) {
                    map.graphics.add(new Graphic(e.geometry, new SimpleFillSymbol(new Color([255, 255, 0, 0.25]))));
                });
                d.activate(Draw.EXTENT);
            });

        });
</script>

【问题讨论】：

您可以发布您的GIS.txt 文件的摘录吗？

标签： javascript html arcgis arcgis-js-api

【解决方案1】：

您应该使用 esri 的请求函数 https://developers.arcgis.com/javascript/3/jsapi/esri.request-amd.html，而不是 JQuery，您将受益于它的异步功能

从您的 for 循环中删除 infoTemplate 和 featureLayer 的创建，否则，您将为 GIS.txt 中的每个 fip 创建并添加一个 featureLayer

如果您真的想将文件 GIS.txt 中的数据添加到 infoWindow 中，您可以使用函数自定义 infoWindow。

var map, moar;

require([
  "esri/request",
  "esri/map", ...
], function (
  esriRequest,
  Map, ...
) {
  map = new Map("map", {
    basemap: "topo",
    center: [-100, 40],
    zoom: 4,
    slider: false
  });
  map.on("load", function() {
    var getFips = esriRequest({
      url: "./GIS.txt",
      handleAs: "text"
    });
    getFips.then(gisplot);
  });

  var fips = [];

  //function to customize the infoWindow
  moar = function(value, key, data) {
    var currentFip = function(fip) {
      return fip.id === value;
    };
    var res = fips.filter(currentFip);
    var label1 = res[0].label1;
    var label2 = res[0].label2;
    var htm = '<tr><td>'+label1+'</td><td>'+label2+'</td></tr>';
    return htm;
  };

  function gisplot(stringDataSum) {
    var allTextLines = stringDataSum.split(/\r\n|\n/);

    var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);
    defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);
    //create renderer
    var renderer = new UniqueValueRenderer(defaultSymbol, 'STATE_FIPS');

    //add symbol for each possible Fips value in the GIS.txt
    for (var i = 1; i < allTextLines.length; i++) {
      var data = allTextLines[i].split(',');
      fip = data[0];/**Fips Need to add to map**/
      colx = [data[3], data[4], data[5], 0.7];/**Rgb Color**/

      /**Add County by FIPs Polygon**/
      renderer.addValue({
        value: fip,
        symbol: new SimpleFillSymbol().setColor(new Color(colx))
      });

      //stock the data from your GIS.txt as an object in an array, used to customize the infoWindow
      fips.push({
        id: fip,
        label1: data[1],
        label2: data[2],
      });
    }

    /** Add Info Template (Tooltips) for each County FIPs Polygon*/
    var infoTemplate = new InfoTemplate();
    infoTemplate.setTitle('${STATE_NAME} County');

    //apply the function 'moar' on the attribute STATE_FIPS
    infoTemplate.setContent('<table class="tables"><tr><th>Label1</th><th>Label2</th></tr>${STATE_FIPS:moar}</table>');

    var featureLayer = new FeatureLayer('https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3', {
      mode: FeatureLayer.MODE_AUTO,
      outFields: ['STATE_NAME', 'STATE_FIPS'],
      infoTemplate: infoTemplate
    });
    featureLayer.setRenderer(renderer);
    map.addLayer(featureLayer);
  }
});

【讨论】：