ArcGIS js api 4.x手動構建FeatureLayer

原創 cjchnvs 2020-06-17 15:48

創建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>

效果

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

arcgis js api 4.15實現二維矢量和傾斜攝影完美貼合效果

这个名字值100块 2020-04-24 18:12:24

ArcGIS JS API在Tomcat Java下配置跨域

一、Tomcat啓動方式-註冊成系統服務 依賴環境：已經安裝JDK、解壓版Tomcat安裝包； 步驟： 1、進入解壓版Tomcat安裝路徑的bin目錄下，shift+右鍵啓動，點擊‘在此處打開命令窗口’（保證使用管理員身份進入）進入cmd

碰碰 2020-06-23 07:54:30

ArcGIS JavaScript API分區域渲染思路

       因爲對JavaScript API不熟悉，，所以這裏只是介紹一下思路，並沒有具體的實現代碼 一、需求         前面遇到多個同樣的需求，很簡單也很明確，就是前端配合用戶權限，如何將服務分區域進行渲染，例如成都市青羊區的

这个名字值100块 2020-06-22 15:31:22

02 【ArcGIS JS API + eCharts系列】實現二、三維遷徙圖的繪製

概述 上一篇文章通過純前端的方式實現了ArcGIS JS API和eCharts的普通二維圖表繪製，因爲這些圖表繪製其實是跟地理座標無關的，只需要設置圖表的位置即可，所以僅僅用了純前端的方式去實現。這篇文章通過參考【dGIS】大佬的文章，

X北辰北 2020-06-21 21:10:45

03 【ArcGIS JS API + eCharts系列】實現二、三維散點圖的繪製

概述 上一篇文章中我們介紹瞭如何使用ArcGIS JS API和eCharts結合，在二維和三維場景下繪製遷徙圖。這篇文章我們來介紹下如何在二維和三維場景下繪製散點圖，其實散點圖跟遷徙圖一樣，它的繪製也跟地理座標系有關，所以實現思路跟遷徙

X北辰北 2020-06-21 21:10:45

09 ArcGIS JS API 4.15渲染後臺接口返回的數據，並進行點選查詢

問題描述 出差的某一天晚上在賓館沒事幹瞎想，突然想到白天做過的項目功能的時候，有個點選查詢的功能引起了我的注意。在項目中爲了實現點選查詢，是在ArcGIS Server裏面發佈了一個要素服務，然後將其添加到地圖上渲染，並實現了鼠標的點選查

X北辰北 2020-06-16 05:40:56

ArcGIS三維中的2000系支持情況

这个名字值100块 2020-04-30 03:05:17

arcgis js api4.15加載天地圖地圖服務

这个名字值100块 2020-04-21 00:03:15

08 ArcGIS JS API 4.15實現螢火蟲效果

X北辰北 2020-04-20 04:45:38

ArcGIS JS API中的PopupTemplate功能模塊中加載圖片異常

X北辰北 2020-04-01 01:50:31

04 【ArcGIS JS API + eCharts系列】實現二、三維網絡路徑圖的繪製

X北辰北 2020-03-29 16:05:46

【測評】 使用@arcgis/cli腳手架和esri-loader方式進行ArcGIS JS API開發的測評

X北辰北 2020-03-03 07:52:44

【番外】 使用@arcgis/cli腳手架進行ArcGIS JS API開發

X北辰北 2020-03-03 07:52:44

ArcGIS JS API 勻速移動的小車

MZ_ 2019-09-03 08:52:13

dojo發佈訂閱模式

MZ_ 2019-09-03 08:52:13