唯杰地图 logo唯杰地图
VJMAP
EN

常见图层

更新于 2024-09-28约 47 分钟
.md
ChatGPTClaudeKimi豆包

绘图图层

let data = {
    "type": "FeatureCollection",
    "features": [
        {
            "id": "1",
            "type": "Feature",
            "properties": {
                "name": "point1",
                "color": "#00ffff",
                "icon": "icon1"
            },
            "geometry": {
                "coordinates": [
                    6971.5378667085715,
                    14385.014943907285
                ],
                "type": "Point"
            }
        },
         {
            "id": "2",
            "type": "Feature",
            "properties": {
                "name": "polyline1",
                "color": "#00ffff"
            },
            "geometry": {
                "coordinates": [
                    [
                        3006.0952985307595,
                        15198.972934052355
                    ],
                    [
                        12606.64046359223,
                        9285.59366571666
                    ],
                    [
                        4745.324495099878,
                        3720.060236694666
                    ],
                    [
                        3006.0952985307595,
                        15198.972934052355
                    ]
                ],
                "type": "LineString"
            }
        },
        {
            "id": "3",
            "type": "Feature",
            "properties": {
                "name": "polygon1",
                "color": "#ff00ff"
            },
            "geometry": {
                "coordinates": [
                    [
                        [
                            19841.833921319492,
                            13807.589576796912
                        ],
                        [
                            19841.833921319492,
                            4207.0444117340885
                        ],
                        [
                            26172.62819683108,
                            4207.0444117340885
                        ],
                        [
                            26172.62819683108,
                            13807.589576796912
                        ],
                        [
                            19841.833921319492,
                            13807.589576796912
                        ]
                    ]
                ],
                "type": "Polygon"
            }
        }
    ]
}
map.getDrawLayer().set(map.toLngLat(data));
在沙箱中运行，调用唯杰地图公共演示服务


热力图层

let heatmapLayer = new vjmap.Heatmap({
    data: geoDatas,
    // heatmapWeight：表示一个点对热力图权重的贡献，在贡献越大的地方热力图显示应该越明显
    heatmapWeight:  [
        'interpolate',
        ['linear'],
        ['get', 'value'],
        0, // 因为上面用了0,100，最小和最大值，把这两个最小和最大值归化到0,1区间
        0,
        100,
        1
    ],
    // heatmapRadius：热力图的一个点计算权重的时候计算的点的半径，单位为像素，默认为30
    heatmapRadius: [
        'interpolate',
        ['linear'],
        ['zoom'],
        0, //0级别
        10, //半径10
        9, // 9级别 (其余级别，线性插值)
        50 // 半径50
    ],
    // heatmapColor：热力图的颜色，设置在各个热力图的数值上是什么颜色
    heatmapColor: [
        'interpolate',
        ['linear'],
        ['heatmap-density'],
        0,
        'rgba(33,102,172,0)',
        0.2,
        'rgb(103,169,207)',
        0.4,
        'rgb(209,229,240)',
        0.6,
        'rgb(253,219,199)',
        0.8,
        'rgb(239,138,98)',
        1,
        'rgb(178,24,43)'
    ],
    //heatmapIntensity：热力图强度，有点类似于heatmapWeight属性，但是该属性是设置整体上热力图的强度
    heatmapIntensity: [
        'interpolate',
        ['linear'],
        ['zoom'],
        0,
        1,
        9,
        3
    ],
    //heatmapOpacity：热力图的透明度
    heatmapOpacity: [
        'interpolate',
        ['linear'],
        ['zoom'],
        7,
        1,
        9,
        0
    ]
});
heatmapLayer.addTo(map);
在沙箱中运行，调用唯杰地图公共演示服务


背景遮盖层

const background = new vjmap.BackgroundLayer({
        backgroundColor: "yellow",
        backgroundOpacity: 0.4
    }
)
background.addTo(map);
在沙箱中运行，调用唯杰地图公共演示服务


自定义水印背景层

// 注意图片大小必须为2的指数倍，如(2, 4, 8, ..., 512)
await map.loadImageEx(`testwatermark`, `https://vjmap.com/static/assets/images/testwatermark.png`);
let layers = map.getStyle().layers
const background = new vjmap.BackgroundLayer({
    backgroundPattern: "testwatermark",
    backgroundOpacity: 0.3
})
background.addTo(map);
// 把这个图层放至所有图层的最下面
map.moveLayer(background.layerId, layers[0].id)
在沙箱中运行，调用唯杰地图公共演示服务


栅格图像图层

const mapBounds = map.getGeoBounds(0.001);
const coords = map.toLngLat(mapBounds.toPointArray());
map.addImageSource("park", {
    url: "https://vjmap.com/static/assets/images/park.jpg",
    coordinates: coords
})
map.addRasterLayer("parkLayer", "park", {
    rasterOpacity: 0.8,
    minzoom: 7,
    maxzoom: 20
})
在沙箱中运行，调用唯杰地图公共演示服务


天空图层

const sky = new vjmap.SkyLayer({
        skyType: 'gradient',
        skyGradient: [
            'interpolate',
            ['linear'],
            ['sky-radial-progress'],
            0.8,
            'rgba(135, 206, 235, 1.0)',
            1,
            'rgba(0,0,0,0.1)'
        ],
        skyGradientCenter: [0, 0],
        skyGradientRadius: 90,
        skyOpacity: [
            'interpolate',
            ['exponential', 0.1],
            ['zoom'],
            0,
            0.3,
            22,
            1
        ]
    }
)
sky.addTo(map);
在沙箱中运行，调用唯杰地图公共演示服务


唯杰地图三维图层

在线示例查看

在沙箱中运行，调用唯杰地图公共演示服务


视频图层

map.addSource("butterfly_src", {
    type: 'video',
    urls: ["https://vjmap.com/static/assets/video/butterfly.mp4"],
    coordinates: map.toLngLat(mapBounds.toPointArray())
});
map.addLayer({
    'id': 'video_layer',
    'type': 'raster',
    'source': 'butterfly_src'
});
let video = map.getSource('butterfly_src');
// 播放
// video.play();
// 暂停
// video.pause();
在沙箱中运行，调用唯杰地图公共演示服务


这篇文档有帮助吗？