利用source构造featureLayer并采用classBreak渲染

最新推荐文章于 2022-09-15 16:46:59 发布

AriaGIS

最新推荐文章于 2022-09-15 16:46:59 发布

阅读量362

点赞数 1

分类专栏： ArcGIS API for JavaScript 文章标签： source featurelayer 前端构造 render classbreaks

本文链接：https://blog.csdn.net/weixin_44616652/article/details/114306660

版权

ArcGIS API for JavaScript 专栏收录该内容

28 篇文章 8 订阅

订阅专栏

参考：https://blog.csdn.net/qq_40376439/article/details/104548136

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>test</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

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

    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/GraphicsLayer",
            "esri/layers/FeatureLayer",
            "esri/Graphic",
            "esri/geometry/Point",
            "esri/symbols/TextSymbol",
            "esri/renderers/support/jsonUtils",
            "esri/layers/support/LabelClass",
            "esri/renderers/ClassBreaksRenderer",
            "dojo/domReady!"
        ], function (Map, MapView, GraphicsLayer, FeatureLayer, Graphic, Point, TextSymbol, rendererJsonUtils, LabelClass, ClassBreaksRenderer) {

            var map = new Map({
                basemap: "osm"
            });
            var view = new MapView({
                container: "viewDiv",
                map: map,
                zoom: 5,
                center: [110, 30]
            });

            var point = [
                {
                    "geometry": { "x": 117.183333333333, "y": 39.15, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "3", "type": "municipality", "name": "天津", "pop": "4100", Tooltip: "天津天津<br>天津天津天津天津天津天津天津" }
                }, {
                    "geometry": { "x": 106.533333333333, "y": 29.5333333333333, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "4", "type": "municipality", "name": "重庆", "pop": "4500", Tooltip: "重庆" }
                }, {
                    "geometry": { "x": 126.683333333333, "y": 45.75, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "5", "type": "capital", "name": "哈尔滨", "pop": "5600", Tooltip: "哈尔滨" }
                }, {
                    "geometry": { "x": 125.316666666667, "y": 43.8666666666667, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "6", "type": "capital", "name": "长春", "pop": "6700" }
                }, {
                    "geometry": { "x": 123.4, "y": 41.8333333333333, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital", "name": "沈阳", "pop": "7800" }
                }, {
                    "geometry": { "x": 111.8, "y": 40.8166666666667, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital", "name": "呼和浩特", "pop": "7800" }
                }, {
                    "geometry": { "x": 114.466666666667, "y": 38.0333333333333, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital", "name": "石家庄", "pop": "7800" }
                }, {
                    "geometry": { "x": 112.566666666667, "y": 37.8666666666667, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital", "name": "太原", "pop": "4800" }
                }, {
                    "geometry": { "x": 117, "y": 36.6333333333333, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital", "name": "济南", "pop": "5800" }
                }, {
                    "geometry": { "x": 113.7, "y": 34.8, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital", "name": "郑州", "pop": "6800" }
                }, {
                    "geometry": { "x": 108.93, "y": 34.27, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital", "name": "西安", "pop": "6800" }
                }, {
                    "geometry": { "x": 114.30, "y": 30.60, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital1", "name": "武汉", "pop": "6800" }
                }, {
                    "geometry": { "x": 115.85, "y": 28.68, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital1", "name": "南昌", "pop": "6800" }
                }, {
                    "geometry": { "x": 117.25, "y": 31.83, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital1", "name": "合肥", "pop": "6800" }
                }, {
                    "geometry": { "x": 120.15, "y": 30.28, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital1", "name": "杭州", "pop": "6800" }
                }, {
                    "geometry": { "x": 112.93, "y": 28.23, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital1", "name": "长沙", "pop": "6800" }
                }, {
                    "geometry": { "x": 110.32, "y": 20.03, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital", "name": "海南", "pop": "6800" }
                }, {
                    "geometry": { "x": 106.63, "y": 26.65, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital", "name": "贵阳", "pop": "6800" }
                }, {
                    "geometry": { "x": 102.72, "y": 25.05, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital2", "name": "昆明", "pop": "6800" }
                }, {
                    "geometry": { "x": 103.82, "y": 36.07, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital2", "name": "兰州", "pop": "6800" }
                }, {
                    "geometry": { "x": 101.78, "y": 36.62, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital2", "name": "西宁", "pop": "6800" }
                }, {
                    "geometry": { "x": 106.28, "y": 38.47, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital2", "name": "银川", "pop": "6800" }
                }, {
                    "geometry": { "x": 87.62, "y": 43.82, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital2", "name": "乌鲁木齐", "pop": "6800" }
                }, {
                    "geometry": { "x": 91.13, "y": 29.65, "spatialReference": { "wkid": 4326 } },
                    "attributes": { "ID": "7", "type": "capital2", "name": "拉萨", "pop": "6800" }
                }
            ];
            var gras = [];
            for (var i = 0; i < point.length; i++) {
                gras.push(new Graphic({
                    geometry: new Point({
                        longitude: point[i].geometry.x,
                        latitude: point[i].geometry.y
                    }),
                    attributes: point[i].attributes
                }))
            }
            var Symbol1 = {
                type: "simple-marker",
                style: "circle",
                color: [255, 163, 138, 150],
                size: "18px",
                outline: {
                    color: [255, 255, 0],
                    width: 3
                }
            };
            var Symbol2 = {
                type: "simple-marker",
                style: "circle",
                color: [255, 0, 126, 150],
                size: "18px",
                outline: {
                    color: [255, 255, 0],
                }
            };
            var renderer = {
                type: "class-breaks",
                field: "pop",
                classBreakInfos: [
                    {
                        minValue: 4000,
                        maxValue: 7000,
                        symbol: Symbol1
                    }, {
                        minValue: 7001,
                        maxValue: 10000,
                        symbol: Symbol2
                    }
                ]
            };
            var fields = [{
                name: "ObjectID",
                alias: "ObjectID",
                type: "oid"
            }];
            for (var col in gras[0]["attributes"]) {
                fields.push({
                    name: col,
                    alias: col,
                    type: "string"
                })
            }
            var layer = new FeatureLayer({
                source: gras,
                renderer: renderer,
                geometryType: "point",
                fields: fields,
                objectIdField: "ObjectID"
            });

            map.add(layer);

        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
</body>

</html>

效果

AriaGIS

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
利用source构造featureLayer并采用classBreak渲染

参考：https://blog.csdn.net/qq_40376439/article/details/104548136代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <titl
复制链接

扫一扫