ArcGIS js api 4.x手动构建FeatureLayer

最新推荐文章于 2024-06-07 09:38:08 发布

比海更深chill

最新推荐文章于 2024-06-07 09:38:08 发布

阅读量1.8k

点赞数 3

分类专栏： ArcGIS js api

本文链接：https://blog.csdn.net/qq_22267353/article/details/99403843

版权

ArcGIS js api 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

创建map

var map = new Map({
    basemap: "dark-gray"
});

创建mapView

var view = new MapView({
    center: [-41.647, 36.41],
    zoom: 3,
    map: map,
    container: "viewDiv",
    popup: {
        defaultPopupTemplateEnabled: true
    }
});

创建符号样式symbol

var symbol = {
    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
    style: "square",
    color: "blue",
    size: "8px", // pixels
    outline: { // autocasts as new SimpleLineSymbol()
        color: [255, 255, 0],
        width: 3 // points
    }
};

构建字段列表fields

var fields = [{
        name: "ObjectID",
        alias: "ObjectID",
        type: "oid"
    },
    {
        name: "type",
        alias: "Type",
        type: "string"
    },
    {
        name: "name",
        alias: "Name",
        type: "string"
    }
]

构建图形数组Graphic

var graphics = points.map((point, index) => {
    return new Graphic({
        geometry: point,
        symbol: symbol,
        attributes: {
            ObjectID: index,
            type: "景点",
            name: "旅游景点" + index
        }
    });
});

创建FeatureLayer

const layer = new FeatureLayer({
    fields: fields,
    objectIdField: "ObjectID",
    geometryType: "point",
    spatialReference: { wkid: 3857 },
    source: graphics,
});

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>手动构建FeatureLayer</title>
    <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/config",
        "esri/Map",
        "esri/views/MapView",
        "esri/widgets/Expand",
        "esri/geometry/Extent",
        "esri/request",
        "esri/layers/FeatureLayer",
        "esri/layers/support/Field",
        "esri/views/draw/Draw",
        "esri/Graphic"
    ], function(
        esriConfig,
        Map,
        MapView,
        Expand,
        Extent,
        request,
        FeatureLayer,
        Field,
        Draw,
        Graphic
    ) {
        var portalUrl = "https://www.arcgis.com";
        var map = new Map({
            basemap: "dark-gray"
        });

        var view = new MapView({
            map: map,
            container: "viewDiv",
            popup: {
                defaultPopupTemplateEnabled: true
            }
        });

        // 缩放视角到此范围
        var extent = new Extent({
            spatialReference: { latestWkid: 3857, wkid: 102100 },
            xmax: 12969378.614158977,
            xmin: 12944001.520768333,
            ymax: 4865114.227141439,
            ymin: 4841418.748373066
        });
        view.goTo(extent);

        // 构建FeatureLayer 
        var points = [
            { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12948813.101750404, "y": 4856154.103975072, "type": "point" },
            { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12956991.863776907, "y": 4856765.6002013525, "type": "point" },
            { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12963336.137124568, "y": 4856689.163173067, "type": "point" },
            { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12963794.759294279, "y": 4852332.252560818, "type": "point" },
            { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12962189.581700291, "y": 4847210.971665719, "type": "point" },
            { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12954393.004815213, "y": 4847822.467891999, "type": "point" },
            { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12950036.094202965, "y": 4851185.697136542, "type": "point" },
            { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12944838.37627958, "y": 4849656.95657084, "type": "point" },
            { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12945449.87250586, "y": 4856306.978031642, "type": "point" },
            { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12949653.90906154, "y": 4858217.903738769, "type": "point" },
            { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12951182.64962724, "y": 4854013.867183089, "type": "point" },
            { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12953475.760475794, "y": 4855848.355861931, "type": "point" },
            { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12953322.886419224, "y": 4852332.252560818, "type": "point" },
            { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12957603.360003186, "y": 4853249.496900239, "type": "point" },
            { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12956074.619437486, "y": 4858294.340767054, "type": "point" },
            { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12954163.693730358, "y": 4856765.6002013525, "type": "point" },
            { "spatialReference": { "latestWkid": 3857, "wkid": 102100 }, "x": 12950724.027457532, "y": 4856306.978031642, "type": "point" }
        ];

        var symbol = {
            type: "simple-marker", //样式类型为简单标注
            style: "square",
            color: "blue",
            size: "8px", 
            outline: { 
                color: [255, 255, 0],
                width: 3 // points
            }
        };
        var graphics = points.map((point, index) => {
            return new Graphic({
                geometry: point,
                symbol: symbol,
                attributes: {
                    ObjectID: index,
                    type: "景点",
                    name: "旅游景点" + index
                }
            });
        });
        var fields = [{
                name: "ObjectID",
                alias: "ObjectID",
                type: "oid"
            },
            {
                name: "type",
                alias: "Type",
                type: "string"
            },
            {
                name: "name",
                alias: "Name",
                type: "string"
            }
        ];

        const layer = new FeatureLayer({
            fields: fields,
            objectIdField: "ObjectID",
            geometryType: "point",
            spatialReference: { wkid: 3857 },
            source: graphics,
        });
        map.add(layer);

    });
    </script>
</head>

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

</html>

效果

在这里插入图片描述

比海更深chill

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
ArcGIS js api 4.x手动构建FeatureLayer

创建mapvar map = new Map({ basemap: "dark-gray"});创建mapViewvar view = new MapView({ center: [-41.647, 36.41], zoom: 3, map: map, container: "viewDiv", popup: { defau...
复制链接

扫一扫

专栏目录