jspopularGL

GeoJSON图层

更新时间：2022年8月23日

简介

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

GeoJSONLayer实现图层展示

GeoJSONParse立体效果

DEMO详情

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，返回实例化的覆盖物，如果是muti几何要素，会返回多个覆盖物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]);

文档全面上新