mapbox利用geojson数据来渲染点线面

原创

于 2019-09-27 17:58:38 发布

· 8.6k 阅读

12 ·

版权

文章标签：

#小程序

本文介绍如何在Mapbox中利用GeoJSON数据来渲染地图上的点、线和面，阐述了在小程序中集成Mapbox并展示GeoJSON数据的详细步骤，帮助读者掌握地图可视化技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//针对的是mapbox加载geojson的数据格式去渲染点线面

首先说说source的类型有哪些：

source的类型有：

1.type: "geojson" （点（circle）线（line）面（fill）图标（symbol））【map.getSource('geojson').setData(geojson)给数据源赋值】

2.type: "image"  （图片）【map.getSource("radar").updateImage({ url: getPath() });】

3.type: 'canvas', 

4.type: "raster",  （瓦片WMS 服务加载）

下面的代码着重写的是geojson格式的数据源渲染点线面，代码如下：

//申明一个变量
    var geojson = {
        "type": "FeatureCollection",
        "features": []
    };

//加载source数据源
    map.addSource('geojson', {
        "type": "geojson",
        "data": geojson
    });

//点

map.addLayer({
        id: 'measure-points',
        type: 'circle',
        source: 'geojson',
        paint: {
        'circle-radius': 5,

最低0.47元/天解锁文章