AI
产品服务
解决方案
文档与支持
定价
为什么选择百度地图
更新时间: 2026/03/19 17:03
GeoJSON图层
简介

地理数据多使用GeoJSON形式存储表达，百度地图JS API GL提供两种不同的方式支持开发者加载自己的GeoJSON数据： 1.提供GeoJSONParse类，满足用户将geojson数据解析为符合百度地图坐标的Overlay数据，用户可得到Overlay属性、坐标数据，进行覆盖物实例化或者其他处理。 2.提供GeoJSONLayer类，满足用户将geojson数据直接解析为覆盖物的图层，并进行交互操作。

DEMO详情
GeoJSONLayer实现图层展示
GeoJSONParse立体效果
GeoJSONParse类参考

GeoJSONParse类定义如下：
构造函数：

构造函数说明

BMapGL.GeoJSONParse(options)

构建GeoJSON解析类。输入坐标支持options的reference设置类型，输出统一为百度09经纬度。

options参数：

参数名称类型描述

reference

object

来源数据的坐标系，可选择：BD09LL｜BD09MC｜EPSG3857｜GCJ02｜WGS84，默认是：BD09LL

方法：

方法名称参数返回值说明

readFeatureFromObject(geojson_feature,options)

1.geojson_feature为GeoJSON{"type":"Feature"}数据 2.options: { reference:string,//同构造函数reference isPoints:boolean，//是否为点集合，默认为false markerStyle:Function(properties):MarkerOptions｜｜MarkerOptions,//点类型数据样式 polylineStyle:Function(properties):PolylineOptions ｜｜ PolylineOptions,//线类型数据样式 polygonStyle:Function(properties):PolygonOptions ｜｜ PolygonOptions,//面类型数据样式 样式1:Value,//覆盖物统一样式 样式2:Value,//覆盖物统一样式 ......}

1,如果isPoints为false，返回实例化的覆盖物，如果是multi几何要素，会返回多个覆盖物Object，否则返回单个覆盖物Object。2,如果isPoints为true，返回Object的points为坐标序列点 3,属性存储在Object.properties中

如果设置了options.reference，则优先使用方法的options.reference。 如果isPoints为false，且不设置样式，则使用覆盖物默认样式。 如果设置了类型样式，则优先使用类型样式，无则使用统一样式。

readFeaturesFromObject(geojson,options,callback)

1.geojson为GeoJSON{"type":"FeatureCollection"}数据 1. options: { reference:string,// 同构造函数reference isPoints:boolean, // 是否为点集合，默认为false markerStyle: Function(properties):MarkerOptions｜｜MarkerOptions, // 点类型数据样式 polylineStyle:Function(properties):PolylineOptions｜｜PolylineOptions, //线类型数据样式 polygonStyle:Function(properties):PolygonOptions｜｜PolygonOptions, // 面类型数据样式 样式1:Value, // 覆盖物统一样式 样式2:Value, // 覆盖物统一样式 ......} 3.callback:Function(Overlay or Object)

如果isPoints为false，返回实例化的覆盖物Overlay集合。 如果isPoints为true，返回Object的集合，Object.points为坐标序列点;Object.properties为属性。

如果设置了options.reference，则优先使用方法的options.reference。 如果isPoints为false，且不设置样式，则使用覆盖物默认样式。 如果设置了类型样式，则优先使用类型样式，无则使用统一样式。

GeoJSONLayer类

BMapGL.Map添加以下方法：
addGeoJSONLayer(layer:GeoJSONLayer)
removeGeoJSONLayer(layer:GeoJSONLayer)
GeoJSONLayer类定义如下：
构造函数：

构造函数说明

BMapGL.GeoJSONLayer(layerName:string,options:Object)

构建GeoJSONLayer覆盖物组合图层类。layerName为图层名设置，每个覆盖物都将写入layerName属性；options详见下表。

options参数：

参数名称类型描述

dataSource

Object

GeoJSON结构数据

reference

Object

来源数据的坐标系，可选择：BD09LL｜BD09MC｜EPSG3857｜GCJ02｜WGS84，默认是：BD09LL

markerStyle

Function(properties):MarkerOptions｜｜MarkerOptions

点类型数据样式，配置项详见BMapGL.Marker的MarkerOptions配置内容

polylineStyle

Function(properties):PolylineOptions｜｜PolylineOptions

线类型数据样式，配置项详见BMapGL.Polyline的PolylineOptions配置内容

polygonStyle

Function(properties):PolygonOptions｜｜PolygonOptions

面类型数据样式，配置项详见BMapGL.Polygon的PolygonOptions配置内容

minZoom

number

最小显示层级，默认3

maxZoom

number

最大显示层级，默认21

level

number

显示层级，由于系统内部问题，GeoJSONLayer图层等级使用负数表达，负数越大层级越高，默认-99

visible

boolean

图层数据是否显示，默认true

方法：

方法名称参数返回值说明

setData(geojson:Object)

geojson 结构数据

无

设置图层显示的数据源

getData()

无

覆盖物对象集合

获取覆盖物对象集合

clearData()

无

无

清空地图上的覆盖物数据，以及覆盖物对象集合

resetStyle()

无

无

样式重置到图层初始化状态

pickOverlays(e:Event)

e 地图事件对象

事件关联的覆盖物对象集合

通过事件获取当前包含当前点的覆盖物集合

setLevel(z:number)

z 显示层级

无

设置显示层级

getLevel()

无

number

获取显示层级

setVisible(v:boolean)

v 是否显示

无

设置是否显示

getVisible()

无

boolean

获取显示状态

destroy()

无

无

清空地图上的覆盖物数据，且清空覆盖物对象集合，以及关联的map对象。

addEventListener(type:string,function:Function)

type 事件类型，支持'click'，'mousemove'，'mouseout' function(e:Event) 为触发事件后的回调函数

无

添加事件，回调函数function入参为Event对象，其中features属性为触发的要素实例集合，默认为null。

removeEventListener(type:string,function:Function)

type 事件类型，支持'click'，'mousemove'，'mouseout' function 定义的回调函数

无

移除事件

事件
通过addEventListener方法注册事件，通过removeEventListener移除事件。

使用示例

1、GeoJSONParse覆盖物模式

var label = new BMapGL.Label();
label.setStyle({
    color: 'blue',
    borderRadius: '5px',
    borderColor: '#ccc',
    padding: '10px',
    fontSize: '16px',
    fontFamily: '微软雅黑',
    transform: 'translateX(-50%) translateY(calc(-100% - 10px))',
});
function popup(e) {
    if (e.target) {
        label.setPosition(e.latLng);
        label.setContent(`<h4 style='margin:0 0 5px 0;'>${e.target.properties.name}</h4>
<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
adcode：${e.target.properties.adcode}
</p></div>`);
        map.addOverlay(label);
    }
}
var region = {
    type: 'FeatureCollection',
    features: [
        {
            type: 'Feature',
            properties: {
                adcode: 110101,
                name: '东城区',
                join: 0,
                center: [116.418757, 39.917544],
                centroid: [116.416718, 39.912934],
                childrenNum: 0,
                level: 'district',
                parent: { adcode: 110000 },
                subFeatureIndex: 0,
                acroutes: [100000, 110000],
            },
            geometry: {
                type: 'MultiPolygon',
                coordinates: [[[[116.44364, 39.87284], [116.445648, 39.879283], [116.444059, 39.890038], [116.450939, 39.890249], [116.450876, 39.894088], [116.447154, 39.894186], [116.446819, 39.900042], [116.448722, 39.903246], [116.436488, 39.902042], [116.434983, 39.913964], [116.434314, 39.92868], [116.443682, 39.928664], [116.443703, 39.936663], [116.446338, 39.946205], [116.440566, 39.945295], [116.442239, 39.9497], [116.435422, 39.952121], [116.436698, 39.949245], [116.429483, 39.950155], [116.429002, 39.957274], [116.424861, 39.962279], [116.414196, 39.962182], [116.411415, 39.964928], [116.411101, 39.97146], [116.407504, 39.973995], [116.40788, 39.962182], [116.389498, 39.96314], [116.387658, 39.96093], [116.38678, 39.957014], [116.393346, 39.957355], [116.394266, 39.940629], [116.396169, 39.94006], [116.396692, 39.928306], [116.399474, 39.923574], [116.392175, 39.92242], [116.392259, 39.907881], [116.395563, 39.907995], [116.396086, 39.89944], [116.397612, 39.898675], [116.399097, 39.872205], [116.38059, 39.871148], [116.380632, 39.866054], [116.387888, 39.867372], [116.394956, 39.862734], [116.3955, 39.858682], [116.406856, 39.859967], [116.41246, 39.858942], [116.41589, 39.863645], [116.413652, 39.871148], [116.423209, 39.872824], [116.442574, 39.87188], [116.44364, 39.87284]]]]
            },
        },
        {
            type: 'Feature',
            properties: {
                adcode: 110102,
                name: '西城区',
                join: 4,
                center: [116.366794, 39.915309],
                centroid: [116.36567, 39.912028],
                childrenNum: 0,
                level: 'district',
                parent: { adcode: 110000 },
                subFeatureIndex: 1,
                acroutes: [100000, 110000],
            },
            geometry: {
                type: 'MultiPolygon',
                coordinates: [[[[116.325799, 39.896789], [116.32582, 39.891111], [116.320759, 39.881512], [116.321324, 39.875199], [116.326636, 39.876859], [116.335273, 39.875183], [116.341567, 39.876159], [116.344286, 39.873653], [116.349472, 39.873588], [116.35058, 39.86869], [116.38059, 39.871148], [116.399097, 39.872205], [116.397612, 39.898675], [116.396086, 39.89944], [116.395563, 39.907995], [116.392259, 39.907881], [116.392175, 39.92242], [116.399474, 39.923574], [116.396692, 39.928306], [116.396169, 39.94006], [116.394266, 39.940629], [116.393346, 39.957355], [116.38678, 39.957014], [116.387658, 39.96093], [116.390084, 39.968406], [116.394162, 39.969397], [116.394099, 39.972858], [116.380903, 39.972712], [116.380401, 39.968178], [116.370384, 39.967902], [116.371974, 39.948594], [116.356206, 39.944092], [116.352023, 39.950854], [116.352421, 39.943832], [116.341442, 39.941979], [116.332889, 39.944092], [116.327953, 39.942369], [116.333056, 39.938565], [116.334645, 39.922664], [116.335356, 39.898448], [116.337301, 39.89739], [116.325799, 39.896789]]]]
            },
        },
    ],
}; // GeoJSON数据
var colorBand = ['darkolivegreen', 'cadetblue', 'orange', 'red', 'tan'];
var gParse = new BMapGL.GeoJSONParse({ reference: 'GCJ02' });
var fs = gParse.readFeaturesFromObject(
    region,
    { fillColor: 'red' },
    function (overlay) {
        var index = overlay.properties.join || 0;
        overlay.setFillColor(colorBand[index]);
        overlay.setZIndex(-2);
        overlay.addEventListener('onclick', popup);
        map.addOverlay(overlay);
    },
);

2、GeoJSONParse点序列模式

var region = {
    type: 'FeatureCollection',
    features: [
        {
            type: 'Feature',
            properties: {
                adcode: 110101,
                name: '东城区',
                join: 0,
                center: [116.418757, 39.917544],
                centroid: [116.416718, 39.912934],
                childrenNum: 0,
                level: 'district',
                parent: { adcode: 110000 },
                subFeatureIndex: 0,
                acroutes: [100000, 110000],
            },
            geometry: {
                type: 'MultiPolygon',
                coordinates: [[[[116.44364, 39.87284], [116.445648, 39.879283], [116.444059, 39.890038], [116.450939, 39.890249], [116.450876, 39.894088], [116.447154, 39.894186], [116.446819, 39.900042], [116.448722, 39.903246], [116.436488, 39.902042], [116.434983, 39.913964], [116.434314, 39.92868], [116.443682, 39.928664], [116.443703, 39.936663], [116.446338, 39.946205], [116.440566, 39.945295], [116.442239, 39.9497], [116.435422, 39.952121], [116.436698, 39.949245], [116.429483, 39.950155], [116.429002, 39.957274], [116.424861, 39.962279], [116.414196, 39.962182], [116.411415, 39.964928], [116.411101, 39.97146], [116.407504, 39.973995], [116.40788, 39.962182], [116.389498, 39.96314], [116.387658, 39.96093], [116.38678, 39.957014], [116.393346, 39.957355], [116.394266, 39.940629], [116.396169, 39.94006], [116.396692, 39.928306], [116.399474, 39.923574], [116.392175, 39.92242], [116.392259, 39.907881], [116.395563, 39.907995], [116.396086, 39.89944], [116.397612, 39.898675], [116.399097, 39.872205], [116.38059, 39.871148], [116.380632, 39.866054], [116.387888, 39.867372], [116.394956, 39.862734], [116.3955, 39.858682], [116.406856, 39.859967], [116.41246, 39.858942], [116.41589, 39.863645], [116.413652, 39.871148], [116.423209, 39.872824], [116.442574, 39.87188], [116.44364, 39.87284]]]]
            },
        },
        {
            type: 'Feature',
            properties: {
                adcode: 110102,
                name: '西城区',
                join: 4,
                center: [116.366794, 39.915309],
                centroid: [116.36567, 39.912028],
                childrenNum: 0,
                level: 'district',
                parent: { adcode: 110000 },
                subFeatureIndex: 1,
                acroutes: [100000, 110000],
            },
            geometry: {
                type: 'MultiPolygon',
                coordinates: [[[[116.325799, 39.896789], [116.32582, 39.891111], [116.320759, 39.881512], [116.321324, 39.875199], [116.326636, 39.876859], [116.335273, 39.875183], [116.341567, 39.876159], [116.344286, 39.873653], [116.349472, 39.873588], [116.35058, 39.86869], [116.38059, 39.871148], [116.399097, 39.872205], [116.397612, 39.898675], [116.396086, 39.89944], [116.395563, 39.907995], [116.392259, 39.907881], [116.392175, 39.92242], [116.399474, 39.923574], [116.396692, 39.928306], [116.396169, 39.94006], [116.394266, 39.940629], [116.393346, 39.957355], [116.38678, 39.957014], [116.387658, 39.96093], [116.390084, 39.968406], [116.394162, 39.969397], [116.394099, 39.972858], [116.380903, 39.972712], [116.380401, 39.968178], [116.370384, 39.967902], [116.371974, 39.948594], [116.356206, 39.944092], [116.352023, 39.950854], [116.352421, 39.943832], [116.341442, 39.941979], [116.332889, 39.944092], [116.327953, 39.942369], [116.333056, 39.938565], [116.334645, 39.922664], [116.335356, 39.898448], [116.337301, 39.89739], [116.325799, 39.896789]]]]
            },
        },
    ],
}; // GeoJSON数据


var colorBand = ['darkolivegreen', 'cadetblue', 'orange', 'red', 'tan'];


var gParse = new BMapGL.GeoJSONParse({ reference: 'GCJ02' });


gParse.readFeaturesFromObject(region, { isPoints: true }, function (overlay) {
    var index = overlay.properties.join || 0;
    var prism = new BMapGL.Prism(overlay.points, 3000, {
        topFillColor: colorBand[index],
        topFillOpacity: 0.9,
        sideFillColor: colorBand[index],
        sideFillOpacity: 0.9,
    });
    prism.properties = overlay.properties;
    prism.setZIndex(-1);
    prism.addEventListener('onclick', popup);
    map.addOverlay(prism);
});

3、GeoJSONLayer示例

// 样例数据
var region = {
    type: 'FeatureCollection',
    features: [
        {
            type: 'Feature',
            properties: {
                adcode: 110101,
                name: '东城区',
                join: 0,
                center: [116.418757, 39.917544],
                centroid: [116.416718, 39.912934],
                childrenNum: 0,
                level: 'district',
                parent: { adcode: 110000 },
                subFeatureIndex: 0,
                acroutes: [100000, 110000],
            },
            geometry: {
                type: 'MultiPolygon',
                coordinates: [[[[116.44364, 39.87284], [116.445648, 39.879283], [116.444059, 39.890038], [116.450939, 39.890249], [116.450876, 39.894088], [116.447154, 39.894186], [116.446819, 39.900042], [116.448722, 39.903246], [116.436488, 39.902042], [116.434983, 39.913964], [116.434314, 39.92868], [116.443682, 39.928664], [116.443703, 39.936663], [116.446338, 39.946205], [116.440566, 39.945295], [116.442239, 39.9497], [116.435422, 39.952121], [116.436698, 39.949245], [116.429483, 39.950155], [116.429002, 39.957274], [116.424861, 39.962279], [116.414196, 39.962182], [116.411415, 39.964928], [116.411101, 39.97146], [116.407504, 39.973995], [116.40788, 39.962182], [116.389498, 39.96314], [116.387658, 39.96093], [116.38678, 39.957014], [116.393346, 39.957355], [116.394266, 39.940629], [116.396169, 39.94006], [116.396692, 39.928306], [116.399474, 39.923574], [116.392175, 39.92242], [116.392259, 39.907881], [116.395563, 39.907995], [116.396086, 39.89944], [116.397612, 39.898675], [116.399097, 39.872205], [116.38059, 39.871148], [116.380632, 39.866054], [116.387888, 39.867372], [116.394956, 39.862734], [116.3955, 39.858682], [116.406856, 39.859967], [116.41246, 39.858942], [116.41589, 39.863645], [116.413652, 39.871148], [116.423209, 39.872824], [116.442574, 39.87188], [116.44364, 39.87284]]]]
            },
        },
        {
            type: 'Feature',
            properties: {
                adcode: 110102,
                name: '西城区',
                join: 4,
                center: [116.366794, 39.915309],
                centroid: [116.36567, 39.912028],
                childrenNum: 0,
                level: 'district',
                parent: { adcode: 110000 },
                subFeatureIndex: 1,
                acroutes: [100000, 110000],
            },
            geometry: {
                type: 'MultiPolygon',
                coordinates: [[[[116.325799, 39.896789], [116.32582, 39.891111], [116.320759, 39.881512], [116.321324, 39.875199], [116.326636, 39.876859], [116.335273, 39.875183], [116.341567, 39.876159], [116.344286, 39.873653], [116.349472, 39.873588], [116.35058, 39.86869], [116.38059, 39.871148], [116.399097, 39.872205], [116.397612, 39.898675], [116.396086, 39.89944], [116.395563, 39.907995], [116.392259, 39.907881], [116.392175, 39.92242], [116.399474, 39.923574], [116.396692, 39.928306], [116.396169, 39.94006], [116.394266, 39.940629], [116.393346, 39.957355], [116.38678, 39.957014], [116.387658, 39.96093], [116.390084, 39.968406], [116.394162, 39.969397], [116.394099, 39.972858], [116.380903, 39.972712], [116.380401, 39.968178], [116.370384, 39.967902], [116.371974, 39.948594], [116.356206, 39.944092], [116.352023, 39.950854], [116.352421, 39.943832], [116.341442, 39.941979], [116.332889, 39.944092], [116.327953, 39.942369], [116.333056, 39.938565], [116.334645, 39.922664], [116.335356, 39.898448], [116.337301, 39.89739], [116.325799, 39.896789]]]]
            },
        },
    ],
}; // GeoJSON数据


// 颜色表
var colorBand = ['darkolivegreen', 'cadetblue', 'orange', 'red', 'tan'];


var label = new BMapGL.Label();
label.setStyle({
    color: 'blue',
    borderRadius: '5px',
    borderColor: '#ccc',
    padding: '10px',
    fontSize: '16px',
    fontFamily: '微软雅黑',
    transform: 'translateX(-50%) translateY(calc(-100% - 10px))',
});


function popup(e) {
    if (e.features && e.features.length > 0) {
        var overlay = e.features[0];
        if (overlay.layerName === 'bj-child') {
            // 重置数据的样式
            resetGeoLayer();
            if (overlay.toString() === 'Polygon') {
                overlay.setFillColor('yellow');
            }
            if (overlay.toString() === 'Polyline') {
                overlay.setStrokeColor('yellow');
            }


            label.setPosition(e.latLng);
            label.setContent(`<h4 style='margin:0 0 5px 0;'>${overlay.properties.name}</h4>
    <p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>
    adcode：${overlay.properties.adcode}
    </p></div>`);
            map.addOverlay(label);
        }
    }
}


var bjRegionLayer = new BMapGL.GeoJSONLayer('bj-child', {
    reference: 'GCJ02',
    dataSource: region,
    level: -10,
    polygonStyle: function (properties) {
        var index = properties.join || 0;
        return {
            fillColor: colorBand[index],
        };
    },
    polylineStyle: function (properties) {
        return {
            strokeColor: 'blue',
        };
    },
    markerStyle: function (properties) {
        return {};
    },
});
bjRegionLayer.addEventListener('click', function (e) {
    if (e.features) {
        popup(e);
    } else {
        resetGeoLayer();
        map.removeOverlay(label);
    }
});
map.addGeoJSONLayer(bjRegionLayer);
function resetGeoLayer() {
    bjRegionLayer && bjRegionLayer.resetStyle();
}

4、添加addOverlay(Array<Overlay | GeoJSON> | Overlay | GeoJSON)、removeOverlay(Array<Overlay> | Overlay)方法

bjRegionLayer.addOverlay(marker1);
bjRegionLayer.addOverlay([polyline,polygon]);
    
bjRegionLayer.addOverlay(marker1.toGeoJSON());
bjRegionLayer.addOverlay([polyline.toGeoJSON(),polygon.toGeoJSON()]);
    
bjRegionLayer.removeOverlay(marker1);
bjRegionLayer.removeOverlay([polyline,polygon]);

上一篇

交通流量图层

下一篇

MVT标准图层
本篇文章对您是否有帮助？