浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。
GeoJSON图层
更新时间:2022年8月23日
简介
地理数据多使用GeoJSON形式存储表达,百度地图JS API GL提供两种不同的方式支持开发者加载自己的GeoJSON数据:
1.提供GeoJSONParse类,满足用户将geojson数据解析为符合百度地图坐标的Overlay数据,用户可得到Overlay属性、坐标数据,进行覆盖物实例化或者其他处理。
2.提供GeoJSONLayer类,满足用户将geojson数据直接解析为覆盖物的图层,并进行交互操作。
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();
}
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消