ESRI Leaflet FeatureLayer渲染卡顿问题及用户提示需求

一、减少/消除卡顿的方案 #

1. 降低GeoJSON转换精度 #

通过precision参数压缩坐标点精度，直接减少arcgisToGeoJSON和convertRingstoGeoJSON的计算量：

const FLOWLINES_LAYER = L.esri.featureLayer({
    url: URL_NP21_FLOWLINES,
    onEachFeature: FLonEachFeature,
    precision: 3 // 默认值为6，数值越小精度越低、转换速度越快，可按需调整
});

2. 启用服务器端几何简化 #

让ArcGIS服务器返回简化后的几何数据，从源头减少客户端处理压力：

const FLOWLINES_LAYER = L.esri.featureLayer({
    url: URL_NP21_FLOWLINES,
    onEachFeature: FLonEachFeature,
    params: {
        simplify: true,
        tolerance: 2 // 单位与图层坐标系一致，数值越大几何简化程度越高
    }
});

3. 替换为Dynamic Map Layer（无交互需求优先） #

如果不需要对单个流线要素做交互操作（如点击、高亮），改用L.esri.dynamicMapLayer，由服务器渲染成图片返回，彻底规避客户端GeoJSON转换：

const FLOWLINES_LAYER = L.esri.dynamicMapLayer({
    url: URL_NP21_FLOWLINES,
    opacity: 0.8,
    visible: false // 初始隐藏，缩放级别>9时再开启显示
});

4. 分批处理要素转换（保留交互场景） #

若必须使用featureLayer且需要交互，可自定义加载逻辑，分批转换ArcGIS JSON到GeoJSON，避免主线程长时间阻塞：

const FLOWLINES_LAYER = L.esri.featureLayer({
    url: URL_NP21_FLOWLINES,
    autoLoad: false, // 禁用自动加载，手动处理要素
    onEachFeature: FLonEachFeature
});

FLOWLINES_LAYER.on('loading', () => {
    FLOWLINES_LAYER.query().then((response) => {
        const features = response.features;
        const batchSize = 100; // 每批处理100个要素，可按需调整
        let index = 0;

        function processBatch() {
            const batch = features.slice(index, index + batchSize);
            if (batch.length === 0) return;
            
            batch.forEach(feature => {
                const geojson = L.esri.arcgisToGeoJSON(feature);
                L.geoJSON(geojson, { onEachFeature: FLonEachFeature }).addTo(FLOWLINES_LAYER);
            });
            
            index += batchSize;
            requestIdleCallback(processBatch); // 利用空闲时段处理，不阻塞主线程
        }

        processBatch();
    });
});

二、显示等待光标，避免用户误解 #

1. 利用图层loading/load事件控制光标 #

结合CSS和图层事件，在加载/转换过程中切换光标状态：

/* 等待光标样式 */
.wait-cursor {
    cursor: wait !important;
}

const mapContainer = document.getElementById('your-map-container-id'); // 替换为你的地图容器ID

// 图层开始加载时添加等待光标
FLOWLINES_LAYER.on('loading', () => {
    mapContainer.classList.add('wait-cursor');
});

// 图层加载完成（含转换）后恢复正常光标
FLOWLINES_LAYER.on('load', () => {
    mapContainer.classList.remove('wait-cursor');
});

2. 自定义转换时的光标控制 #

如果使用了分批处理方案，可在转换前后手动控制光标状态：

function processBatch() {
    const batch = features.slice(index, index + batchSize);
    if (batch.length === 0) {
        mapContainer.classList.remove('wait-cursor');
        return;
    }
    
    mapContainer.classList.add('wait-cursor');
    batch.forEach(feature => {
        const geojson = L.esri.arcgisToGeoJSON(feature);
        L.geoJSON(geojson, { onEachFeature: FLonEachFeature }).addTo(FLOWLINES_LAYER);
    });
    
    index += batchSize;
    requestIdleCallback(processBatch);
}

内容的提问来源于stack exchange，提问作者JSC