Fatal编程技术网
  • javascript/
  • Javascript ArcGIS JS-如何在渲染之前通过测试一个属性与另一个属性来设置多边形的样式？

Javascript ArcGIS JS-如何在渲染之前通过测试一个属性与另一个属性来设置多边形的样式？

javascript

Javascript ArcGIS JS-如何在渲染之前通过测试一个属性与另一个属性来设置多边形的样式？,javascript,arcgis,Javascript,Arcgis,我目前正在尝试使用ArcGIS JS API来显示一个简单的土地利用随时间变化的网络地图。其目的是将1996年至2018年土地使用发生变化的任何多边形涂成橙色（即：if（NAME_1996！=NAME_2018），然后…）。如果名称保持不变，则多边形将变为蓝色 数据是来自Esri托管内容服务的查询geoJSON文件 我知道在传单中，geoJSON数据可以在渲染之前在每个功能上进行处理和样式化。然而，我所能找到的与ArcGIS JS相似的是UniqueValueRenderer，它只允许测试一个字

我目前正在尝试使用ArcGIS JS API来显示一个简单的土地利用随时间变化的网络地图。其目的是将1996年至2018年土地使用发生变化的任何多边形涂成橙色（即：if（NAME_1996！=NAME_2018），然后…）。如果名称保持不变，则多边形将变为蓝色

数据是来自Esri托管内容服务的查询geoJSON文件

我知道在传单中，geoJSON数据可以在渲染之前在每个功能上进行处理和样式化。然而，我所能找到的与ArcGIS JS相似的是UniqueValueRenderer，它只允许测试一个字段。我意识到这个问题可以通过对数据进行预处理来解决，在数据集中添加一个HAS_change（true/false）列，但这似乎很简单，应该可以在运行中实现

在文档中，解释了UnqiueValueRenderer

示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Load a basic WebMap - 4.12</title>

    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.12/"></script>
    <script>
        require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/TileLayer",
        "esri/layers/FeatureLayer",
        "esri/renderers/SimpleRenderer",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/config"
        ], function(Map, MapView, TileLayer, FeatureLayer, SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol, Query, esriConfig) {

        esriConfig.apiKey = KEY_GOES_HERE

        const map = new Map({
            basemap: "satellite" // Basemap layer service
        });

        function returnRenderer(name_1996, name_2018) {
            if (name_1996 != name_2018) {
                renderer = {
                    type: "simple",
                    symbol: {
                        type: "simple-fill",
                        size: 6,
                        color: "orange",
                        outline: {
                        width: 0.5,
                        color: "white"
                        }
                    }
                };
            } else {
                renderer = {
                    type: "simple",
                    symbol: {
                        type: "simple-fill",
                        size: 6,
                        color: "blue",
                        outline: {
                        width: 0.5,
                        color: "white"
                        }
                    }
                };
            }
            return renderer
        }

        var view = new MapView({
            container: "viewDiv",
            map: map,
            center: [176.13567895574866, -37.71157953908512],
            zoom: 15
        });

        
        popup_landcover = {
            "title":"{NAME_2018} (2018)",
            "content":"Landcover type in 1996: {NAME_1996}<br>Landcover type in 2018: {NAME_2018}"
        }
        
        var layer_landcover = new FeatureLayer({
            url: "https://services.arcgis.com/PyaTLAnbSEVNXOpB/arcgis/rest/services/iris_Landcover_NZ_v5/FeatureServer",
            outFields: ["NAME_2018", "NAME_1996"],
            popupTemplate: popup_landcover,
            renderer: returnRenderer( ???? )
        })
        
        map.add(layer_landcover);
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>


加载基本网络地图-4.12
html，
身体，
#视窗{
填充：0；
保证金：0；
身高：100%；
宽度：100%；
}
要求([
“esri/Map”，
“esri/views/MapView”，
“esri/layers/Tillelayer”，
“esri/图层/功能图层”，
“esri/渲染器/简单渲染器”，
“esri/symbols/SimpleFillSymbol”，
“esri/symbols/SimpleLineSymbol”，
“esri/config”
]，函数（地图，地图视图，TileLayer，FeatureLayer，SimpleRenderer，SimpleFillSymbol，SimpleLineSymbol，查询，esriConfig）{
esriConfig.apiKey=KEY\u转到这里
常量映射=新映射({
basemap：“卫星”//basemap层服务
});
函数返回器（name_1996，name_2018）{
如果（name_1996！=name_2018）{
渲染器={
类型：“简单”，
符号：{
类型：“简单填充”，
尺码：6，
颜色：“橙色”，
大纲：{
宽度：0.5，
颜色：“白色”
}
}
};
}否则{
渲染器={
类型：“简单”，
符号：{
类型：“简单填充”，
尺码：6，
颜色：“蓝色”，
大纲：{
宽度：0.5，
颜色：“白色”
}
}
};
}
返回渲染器
}
var view=新的地图视图({
容器：“viewDiv”，
地图：地图，
中间：[176.13567895574866，-37.71157953908512]，
缩放：15
});
土地覆盖率={
“标题”：“{NAME_2018}（2018年）”，
“内容”：“1996年土地覆盖类型：{NAME_1996}
2018年土地覆盖类型：{NAME_2018}”
}
可变层\土地覆盖=新特征层({
url:“https://services.arcgis.com/PyaTLAnbSEVNXOpB/arcgis/rest/services/iris_Landcover_NZ_v5/FeatureServer",
外场：[“2018年名称”、“1996年名称”]，
popupTemplate:popup_土地覆盖，
渲染器：返回渲染器（？？）
})
添加地图（土地覆盖层）；
数据处理：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Load a basic WebMap - 4.12</title>

    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.12/"></script>
    <script>
        require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/TileLayer",
        "esri/layers/FeatureLayer",
        "esri/renderers/SimpleRenderer",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/config"
        ], function(Map, MapView, TileLayer, FeatureLayer, SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol, Query, esriConfig) {

        esriConfig.apiKey = KEY_GOES_HERE

        const map = new Map({
            basemap: "satellite" // Basemap layer service
        });

        function returnRenderer(name_1996, name_2018) {
            if (name_1996 != name_2018) {
                renderer = {
                    type: "simple",
                    symbol: {
                        type: "simple-fill",
                        size: 6,
                        color: "orange",
                        outline: {
                        width: 0.5,
                        color: "white"
                        }
                    }
                };
            } else {
                renderer = {
                    type: "simple",
                    symbol: {
                        type: "simple-fill",
                        size: 6,
                        color: "blue",
                        outline: {
                        width: 0.5,
                        color: "white"
                        }
                    }
                };
            }
            return renderer
        }

        var view = new MapView({
            container: "viewDiv",
            map: map,
            center: [176.13567895574866, -37.71157953908512],
            zoom: 15
        });

        
        popup_landcover = {
            "title":"{NAME_2018} (2018)",
            "content":"Landcover type in 1996: {NAME_1996}<br>Landcover type in 2018: {NAME_2018}"
        }
        
        var layer_landcover = new FeatureLayer({
            url: "https://services.arcgis.com/PyaTLAnbSEVNXOpB/arcgis/rest/services/iris_Landcover_NZ_v5/FeatureServer",
            outFields: ["NAME_2018", "NAME_1996"],
            popupTemplate: popup_landcover,
            renderer: returnRenderer( ???? )
        })
        
        map.add(layer_landcover);
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>
好的，这需要一点变通和数据的预处理。最终我创建了一个名为“Changed”的新字段，其中存储了一个二进制值：0表示false（土地使用没有随时间变化），1表示true（土地使用随时间变化）

关于在ArcGIS Online中创建新字段的注意事项：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Load a basic WebMap - 4.12</title>

    <!-- jquery -->
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.12/"></script>
    <script>
        require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/TileLayer",
        "esri/layers/FeatureLayer",
        "esri/renderers/SimpleRenderer",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/config"
        ], function(Map, MapView, TileLayer, FeatureLayer, SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol, Query, esriConfig) {

        esriConfig.apiKey = KEY_GOES_HERE

        const map = new Map({
            basemap: "satellite" // Basemap layer service
        });

        function returnRenderer(name_1996, name_2018) {
            if (name_1996 != name_2018) {
                renderer = {
                    type: "simple",
                    symbol: {
                        type: "simple-fill",
                        size: 6,
                        color: "orange",
                        outline: {
                        width: 0.5,
                        color: "white"
                        }
                    }
                };
            } else {
                renderer = {
                    type: "simple",
                    symbol: {
                        type: "simple-fill",
                        size: 6,
                        color: "blue",
                        outline: {
                        width: 0.5,
                        color: "white"
                        }
                    }
                };
            }
            return renderer
        }

        var view = new MapView({
            container: "viewDiv",
            map: map,
            center: [176.13567895574866, -37.71157953908512],
            zoom: 15
        });

        
        popup_landcover = {
            "title":"{NAME_2018} (2018)",
            "content":"Landcover type in 1996: {NAME_1996}<br>Landcover type in 2018: {NAME_2018}"
        }
        
        var layer_landcover = new FeatureLayer({
            url: "https://services.arcgis.com/PyaTLAnbSEVNXOpB/arcgis/rest/services/iris_Landcover_NZ_v5/FeatureServer",
            outFields: ["NAME_2018", "NAME_1996"],
            popupTemplate: popup_landcover,
            renderer: returnRenderer( ???? )
        })
        
        map.add(layer_landcover);
    </script>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>
无论是使用Arcade还是SQL查询，计算字段值都不起作用。这可以通过使用QGIS解决。