ArcGIS JS API 将符号用于点矢量切片-解网

问：

使用 ESRI JS API 很难将图片或符号用于 S3 上托管的点矢量切片。

我正在使用 PictureMarkerSymbol 并尝试将其加载为点的符号......没有错误，我看到磁贴在网络选项卡中正确加载。如果我将类型改回圆圈，则所有点都会正确显示。

我不想在 AGOL 上托管这些磁贴，因为与 S3 相比，性能有所下降。

这是我的完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Display a map</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.27/"></script>
    <style>
        html, body, #viewDiv {
            margin: 0;
            padding: 0;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="viewDiv"></div>
<script>
    require([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/VectorTileLayer",
        "esri/symbols/PictureMarkerSymbol"
    ], function (Map, MapView, VectorTileLayer, PictureMarkerSymbol) {
        const map = new Map({
            basemap: "gray-vector"
        });

        const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-85, 30],
            zoom: 6
        });

        const symbol = new PictureMarkerSymbol({
            url: "https://img.icons8.com/ios-filled/50/arrow.png",
            width: "24px",  // Adjust width and height as needed
            height: "24px"
        });

        const vLayer = new VectorTileLayer({
            style: {
                id: 'customStyle',
                version: 8,
                sources: {
                    b: {
                        type: 'vector',
                        tiles: [my url]
                    }
                },
                layers: [
                    {
                        id: 'test2',
                        /*
                        "type": "circle",
                        "paint": {
                            "circle-color": "black",
                            "circle-radius": 5
                        },
                        */
                        "type": "symbol",
                        "layout": {
                            "icon-image": "custom-image",
                            "icon-size": 0.5,
                            "icon-allow-overlap": true
                        },
                        source: 'b',
                        'source-layer': 'cafptsfgb',
                    }
                ]
            },
            images: {
                "custom-image": symbol
            }
        });

        map.add(vLayer);
    });
</script>
</body>
</html>

Esri ArcGIS JS-API 矢量切片

ArcGIS JS API 将符号用于点矢量切片

ArcGIS JS API use symbols for point vector tiles

评论