arcgis api for js 从客户端建立FeatureLayer_arcgis api js featurelayer-优快云博客

本文链接：https://blog.youkuaiyun.com/xaishujin/article/details/124594596
<!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/views/SceneView",
            "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",
            "esri/widgets/Legend",
            "dojo/domReady!"
        ], function (Map, MapView,SceneView, GraphicsLayer, FeatureLayer, Graphic, Point, TextSymbol, rendererJsonUtils, LabelClass, ClassBreaksRenderer,Legend) {
 
            var map = new Map({
                basemap: "osm"
            });
            var view = new SceneView({
                container: "viewDiv",
                map: map,
                zoom: 5,
                center: [110, 30]
            });

 
            var point = [
                {
                    "geometry": { "x": 117.183333333333, "y": 39.15, "spatialReference": { "wkid": 4326 } },
                    "attributes": {"OBJECTID":1,"PRESSURE":1007,"TIME":"18:00:00","WINDSPEED":25}
                }, {
                    "geometry": { "x": 106.533333333333, "y": 29.5333333333333, "spatialReference": { "wkid": 4326 } },
                    "attributes": {"OBJECTID":2,"PRESSURE":1005,"TIME":"00:00:00","WINDSPEED":30}
                }, {
                    "geometry": { "x": 126.683333333333, "y": 45.75, "spatialReference": { "wkid": 4326 } },
                    "attributes": {"OBJECTID":3,"PRESSURE":1004,"TIME":"06:00:00","WINDSPEED":35}
                }, {
                    "geometry": { "x": 125.316666666667, "y": 43.8666666666667, "spatialReference": { "wkid": 4326 } },
                    "attributes": {"OBJECTID":4,"PRESSURE":1003,"TIME":"12:00:00","WINDSPEED":35}
                }, {
                    "geometry": { "x": 123.4, "y": 41.8333333333333, "spatialReference": { "wkid": 4326 } },
                    "attributes": {"OBJECTID":5,"PRESSURE":1002,"TIME":"18:00:00","WINDSPEED":40}
                }, {
                    "geometry": { "x": 111.8, "y": 40.8166666666667, "spatialReference": { "wkid": 4326 } },
                    "attributes": {"OBJECTID":6,"PRESSURE":101,"TIME":"00:00:00","WINDSPEED":40}
                }
            ];
            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
                }))
            }
            
            const renderer = {
              type: "simple", // autocasts as new SimpleRenderer()
              symbol: {
                type: "point-3d", // autocasts as new PointSymbol3D()
                symbolLayers: [
                  {
                    type: "object", // autocasts as new ObjectSymbol3DLayer()
                    resource: {
                      primitive: "cone"
                    },
                    width: 50000 // width of the symbol in meters
                  }
                ]
              },
              label: "hurricane location",
              visualVariables: [
                {
                  type: "color",
                  field: "PRESSURE",
                  stops: [
                    {
                      value: 950,
                      color: "red"
                    },
                    {
                      value: 1020,
                      color: "blue"
                    }
                  ]
                },
                {
                  type: "size",
                  field: "WINDSPEED",
                  stops: [
                    {
                      value: 20,
                      size: 600000
                    },
                    {
                      value: 150,
                      size: 5000000
                    }
                  ],
                  axis: "height"
                },
                {
                  type: "size",
                  axis: "width-and-depth",
                  useSymbolValue: true // uses the width value defined in the symbol layer (50,000)
                }
              ]
            };
            const fields = [
                {"name":"OBJECTID","type":"oid","alias":"OBJECTID"},
                {"name":"PRESSURE","type":"double","alias":"PRESSURE"},
                {"name":"TIME","type":"string","alias":"TIME","length":9},
                {"name":"WINDSPEED","type":"double","alias":"WINDSPEED"}
            ]
            var layer = new FeatureLayer({
                source: gras,
                renderer: renderer,
                displayFieldName: "TIME",
                geometryType: "point",
                fields: fields,
                objectIdField: "ObjectID"
            });
 
            map.add(layer);
            const legend = new Legend({
              view: view
            });

            view.ui.add(legend, "bottom-left");
 
        });
    </script>
</head>
 
<body>
    <div id="viewDiv"></div>
</body>
 
</html>
效果图：