GeoJSONLayer
此类用于在地图上添加 GeoJSON 数据图层,支持点、线、面等几何要素的显示和交互。
构造函数
| 构造函数 | 描述 |
|---|---|
| BMapGL.GeoJSONLayer(layerName: string, options: GeoJSONLayerOptions) | 构建GeoJSONLayer覆盖物组合图层类。layerName为图层名设置,每个覆盖物都将写入layerName属性 |
GeoJSONLayerOptions
| 属性 | 类型 | 描述 |
|---|---|---|
| dataSource | Object | GeoJSON解构数据 |
| reference | string | 来源数据的坐标系,可选择:BD09LL|BD09MC|EPSG3857|GCJ02|WGS84,默认是:BD09LL |
| markerStyle | Function | MarkerOptions | 点类型数据样式,配置项详见BMapGL.Marker的MarkerOptions配置内容 |
| polylineStyle | Function | PolylineOptions | 线类型数据样式,配置项详见BMapGL.Polyline的PolylineOptions配置内容 |
| polygonStyle | Function | PolygonOptions | 面类型数据样式,配置项详见BMapGL.Polygon的PolygonOptions配置内容 |
| minZoom | number | 最小显示层级,默认3 |
| maxZoom | number | 最大显示层级,默认21 |
| level | number | 显示层级,由于系统内部问题,GeoJSONLayer图层等级使用负数表达,负数越大层级越高,默认-99 |
| visible | boolean | 图层数据是否显示,默认true |
实例方法
| 方法 | 参数 | 返回值 | 描述 |
|---|---|---|---|
| setData | geojson: Object | 无 | 设置图层显示的数据源 |
| getData | 无 | Object | 获取覆盖物对象集合 |
| clearData | 无 | 无 | 清空地图上的覆盖物数据,以及覆盖物对象集合 |
| resetStyle | 无 | 无 | 样式重置到图层初始化状态 |
| pickOverlays | e: Event | Object | 通过事件获取当前包含当前点的覆盖物集合 |
| setLevel | z: number | 无 | 设置显示层级 |
| getLevel | 无 | number | 获取显示层级 |
| setVisible | v: boolean | 无 | 设置是否显示 |
| getVisible | 无 | boolean | 获取显示状态 |
| destroy | 无 | 无 | 清空地图上的覆盖物数据,且清空覆盖物对象集合,以及关联的map对象 |
| addEventListener | type: string, function: Function | 无 | 添加事件,回调函数function入参为Event对象,其中features属性为触发的要素实例集合 |
| removeEventListener | type: string, function: Function | 无 | 移除事件 |
示例
ts
// 创建GeoJSON图层
const layer = new BMapGL.GeoJSONLayer('myLayer', {
dataSource: geojsonData,
reference: 'WGS84',
markerStyle: {
icon: new BMapGL.Icon('marker.png', new BMapGL.Size(23, 25))
},
polylineStyle: {
strokeColor: '#ff0000',
strokeWeight: 2
},
polygonStyle: {
fillColor: '#ff0000',
strokeColor: '#000000',
strokeWeight: 2
}
});
// 添加图层到地图
map.addGeoJSONLayer(layer);
// 添加事件监听
layer.addEventListener('click', (e) => {
console.log('点击了要素:', e.features);
});
// 更新数据
layer.setData(newGeojsonData);
// 设置显示状态
layer.setVisible(false);
// 移除图层
map.removeGeoJSONLayer(layer);注意事项
图层管理:
- 图层等级使用负数表达,负数越大层级越高
- 合理设置最小和最大显示层级
- 注意图层的显示顺序
事件处理:
- 支持'click'、'mousemove'、'mouseout'事件
- 事件回调中的features包含触发的要素实例
- 及时移除不需要的事件监听
性能优化:
- 大量数据时考虑分批加载
- 合理使用clearData和destroy方法
- 注意内存占用
