显示点位

point

/**
 * 加载坐标点位到地图中并且显示
 * @param points
 * @param customMarker
 * @param isCluster 是否聚合点位
 */
renderMarkers(points, customMarker, isCluster = true) {
    try {
        //清除图层
        this.removeMarker();
        this.removeOverlay();
        this.map.addSource("camera", {
            type: "geojson",
            data: getFeature(points, customMarker),
            cluster: isCluster, //是否聚合图层
            clusterMaxZoom: 15, // Max zoom to cluster points on
            clusterRadius: 50, // Radius of each cluster when clustering points (defaults to 50)
        });

        this.map.addLayer({
            id: "clusters",
            type: "symbol",
            source: "camera",
            filter: ["has", "point_count"],
            metadata: {group: null},
            layout: {
                "icon-image": "map-cluster",
            },
        });

        this.map.addLayer({
            id: "cluster-count",
            type: "symbol",
            source: "camera",
            filter: ["has", "point_count"],
            metadata: {group: null},
            layout: {
                "icon-image": "map-cluster",
                "text-field": "{point_count_abbreviated}",
                "text-size": 12,
                "icon-size": 0.6,
                "text-offset": [0, -0.2],
            },
            paint: {
                "text-color": "#ffffff",
            },
        });

        this.map.addLayer({
            id: "unclustered-point",
            type: "symbol",
            metadata: {group: null},
            source: "camera",
            filter: ["!has", "point_count"],
            layout: {
                "icon-image": ["coalesce", ["get", "iconImage"]],
            },
        });
    } catch (e) {
        console.log(e);
    }
}
上次更新:
贡献者: QiaoJiazhou