arcgis for js 4.x FeatureLayer

1.renderer 常用

2.加载热力图

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
        <title>天地图加载</title>
        <style>
            html,
            body,
            #viewDiv {
                padding: 0;
                margin: 0;
                height: 800px;
                width: 800px;
                overflow: hidden;
            }
        </style>
        <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/css/main.css" />
        <script src="https://js.arcgis.com/4.23/init.js"></script>
        <script>
            require(["esri/Map",
                "esri/views/MapView",
                "esri/layers/GraphicsLayer",
                "esri/Graphic",
                "esri/PopupTemplate",
                "esri/widgets/Popup",
                "esri/layers/MapImageLayer",
                "esri/widgets/Legend",
                "esri/layers/WebTileLayer",
                "esri/layers/WMTSLayer",
                "esri/widgets/BasemapGallery/support/LocalBasemapsSource",
                "esri/widgets/BasemapGallery",
                "esri/Basemap",
                "esri/layers/FeatureLayer",
                "esri/renderers",
                "esri/layers/support/Field",
                "esri/geometry/Extent",
                "esri/geometry/SpatialReference",
                'esri/config',
                '../4326.js',
                '../4490.js',
                'esri/layers/support/TileInfo',
                "../MyCustomTileLayer.js",
                "esri/layers/TileLayer",
            ], function(
                Map,
                MapView,
                GraphicsLayer,
                Graphic,
                PopupTemplate,
                Popup,
                MapImageLayer,
                Legend,
                WebTileLayer,
                WMTSLayer,
                LocalBasemapsSource,
                BasemapGallery,
                Basemap,
                FeatureLayer,
                renderers,
                Field,
                Extent,
                SpatialReference,
                esriConfig,
                epsg4326,
                epsg4490,
                TileInfo,
                MyCustomTileLayer,
                TileLayer
            ) {
                var tileInfo = epsg4326.tileInfo;
                var key = "天地图key"
                key = "6a92e00bdfafade25568c053a5ba6de4"
                var tiledLayer = new MyCustomTileLayer({
                    urlTemplate: "http://t0.tianditu.gov.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" +
                        key,
                    tileInfo: tileInfo,
                    id: '影像',
                    listMode: 'hide' //这个属性设置是为了在layerlist不显示出来
                });
                var tiledLayer_poi = new MyCustomTileLayer({
                    urlTemplate: "http://t0.tianditu.gov.cn/cia_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" +
                        key,
                    tileInfo: tileInfo,
                    id: '影像标记',
                    listMode: 'hide'
                });
                var tiledLayer1 = new MyCustomTileLayer({
                    urlTemplate: "http://t0.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" +
                        key,
                    tileInfo: tileInfo,
                    id: '矢量',
                    visible: false,
                    listMode: 'hide'
                });
                var tiledLayer_poi1 = new MyCustomTileLayer({
                    urlTemplate: "http://t0.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TileMatrix={level}&TileCol={col}&TileRow={row}&tk=" +
                        key,
                    tileInfo: tileInfo,
                    id: '矢量标记',
                    visible: false,
                    listMode: 'hide'
                });


                var basemap = new Basemap({
                    baseLayers: [tiledLayer, tiledLayer_poi, tiledLayer1, tiledLayer_poi1],
                })
                var map = new Map({
                    basemap: basemap
                });


                var view = new MapView({
                    container: "viewDiv",
                    map: map,
                    spatialReference: {
                        wkid: 4326
                    },
                    scale: tileInfo.lods[7],
                    //center: [113.754645, 23.198923], //113.27434372047993,22.722786885699826
                    linked: false,
                    zoom: 7,
                    constraints: {
                        lods: tileInfo.lods,
                        minScale: tileInfo.lods[0].scale,
                        maxScale: tileInfo.lods[19].scale
                    },
                });

                view.extent = new Extent({
                    xmin: 113.36595023855007,
                    ymin: 23.671927965183833,
                    xmax: 114.5628763484501,
                    ymax: 22.7009907263257,
                    spatialReference: {
                        wkid: 4326
                    }
                });

                var heatmapRenderer1 = { //设置热力渲染器
                    type: "heatmap",
                 colorStops: [{
                         color: "rgba(0, 255, 0, 0)",
                            ratio: 0
                     },
                        {
                            color: "rgba(0, 255, 0, 1)",
                            ratio: 0.4
                        },
                        {
                            color: "rgba(255, 140, 0, 1)",
                            ratio: 0.75
                        },
                        {
                            color: "rgba(255, 0,   0, 1)",
                            ratio: 0.9
                        },
                        {
                            color: "rgba(255, 255,   0, 1)",
                            ratio: 1,
                        },
                    ],
                    maxPixelIntensity: 10,
                    minPixelIntensity: 0
                };


                var fhrenderer = {
                    type: "unique-value",
                    field: "类别",
                    uniqueValueInfos: [{
                        value: '0',
                        symbol: {
                            type: "simple-marker",
                            color: [255, 0, 255, 0.8],
                            size: 8
                        }
                    }, {
                        value: '1',
                        symbol: {
                            type: "simple-marker",
                            color: [255, 0, 0, 0.8],
                            size: 8
                        }
                    }, {
                        value: '2',
                        symbol: {
                            type: "simple-marker",
                            color: [115, 255, 0, 0.8],
                            size: 8
                        }
                    }]
                }

                var features = [];
                var heatData = [{
                    lng: 113.22,
                    lat: 23.22
                }, {
                    lng: 113.32,
                    lat: 23.42
                }, {
                    lng: 113.52,
                    lat: 23.22
                }, {
                    lng: 113.52,
                    lat: 23.23
                }]
                for (var i = 0; i < heatData.length; i++) {
                    var x = heatData[i].lng;
                    var y = heatData[i].lat;
                    features.push({
                        geometry: {
                            type: "point",
                            x: x,
                            y: y
                        },
                        attributes: {
                            'ObjectID': i, //重要！！！
                            '类别': i
                        }
                    });
                }
                console.log(features)
                const hfields = [
                    new Field({
                        name: "ObjectID",
                        alias: "ObjectID",
                        type: "oid"
                    }), new Field({
                        name: "dz_rank",
                        alias: "dz_rank",
                        type: "string"
                    }), new Field({
                        name: "类别",
                        alias: "类别",
                        type: "string"
                    })
                ];

                const layer = new FeatureLayer({
                    fields: hfields,
                    source: features, //点数据集
                    title: "热力图",
                    objectIdField: "ObjectID", //重要！！！
                    renderer: heatmapRenderer1, //热力渲染器
                    // renderer: fhrenderer, //类型渲染器
                    popupTemplate: {
                        title: "feature",
                        content: "{ObjectID}{类别}"
                    },
                    // renderer: renderer
                });
                map.add(layer)


            });
        </script>
    </head>

    <body class="calcite">
        <div id="viewDiv"></div>
    </body>
</html>