天地图(Tianditu) GeoJSON 折线覆盖物库,基于Canvas实现的高性能折线绘制组件
npm install tdt-line-geojson#### 主要类型定义:
- LngLat: 经纬度坐标类型 [number, number]
- Pixel: 像素坐标对象接口 {x: number, y: number}
- LineItem: 单条折线数据结构,包含坐标、样式和属性
- LineGeoJsonOverlayOptions: 折线覆盖物配置选项
- GeoJsonObject: 标准GeoJSON数据结构约束
- LineClickResult: 折线点击事件返回结果
- LineGeoJsonOverlay: 折线覆盖物实例接口
#### 核心函数:
- CreateLineOverlay(): 工厂函数,返回折线覆盖物构造函数
bash
npm install tdt-line-geojson
`
$3
`bash
yarn add tdt-line-geojson
`
$3
`javascript
// ES6模块导入
import CreateLineOverlay from 'tdt-line-geojson';
`
$3
`javascript
// 1. 创建折线覆盖物构造函数
const LineGeoJsonOverlay = CreateLineOverlay();
// 2. 准备GeoJSON数据
const geoJsonData = {
type: 'LineString' || 'MultiLineString' || 'Feature' || 'FeatureCollection',
properties: {
color: '#3388ff', // 可在数据中动态设置颜色
weight: 3, // 可在数据中动态设置宽度
opacity: 0.8 // 可在数据中动态设置透明度
},
coordinates: [[116.403874, 39.914885], [116.406315, 39.921988]]
};
// 3. 创建折线覆盖物实例
const lineOverlay = new LineGeoJsonOverlay(geoJsonData, {
color: '#3388ff',
weight: 3,
opacity: 0.8
});
// 4. 添加到地图
// map 是天地图地图实例
map.addOverlay(lineOverlay);
`
配置选项
| 选项 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| color | string | '#3388ff' | 折线颜色 |
| weight | number | 3 | 折线宽度 |
| opacity | number | 1 | 透明度 |
| lineStyle | string | 'solid' | 线条样式:solid/dashed |
| dashArray | string | '5,5' | 虚线样式 |
| smooth | boolean | true | 是否平滑曲线 |
| minZoom | number | 1 | 最小显示层级 |
| maxZoom | number | 18 | 最大显示层级 |
| visible | boolean | true | 是否可见 |
事件处理
$3
`javascript
lineOverlay.bindClickEvent((event, result) => {
console.log('点击了折线:', {
像素坐标: result.pixel,
经纬度: result.lnglat,
属性: result.properties,
折线数据: result.lineData
});
});
`
数据格式
$3
- LineString: 单条折线
- MultiLineString: 多条折线
- Feature: 单个要素
- FeatureCollection: 要素集合
$3
`javascript
// 标准经纬度坐标
[116.403874, 39.914885]
`
性能特性
- Canvas渲染: 高性能的Canvas绘制,支持大量折线数据
- 内存管理: 自动清理资源,防止内存泄漏
- 层级控制: 支持按地图层级显示/隐藏
- 平滑曲线: 支持贝塞尔曲线平滑效果
注意事项
1. 使用前需要确保已加载天地图JavaScript库
2. 折线数据必须是有效的GeoJSON格式
3. Canvas元素设置了pointer-events: none`,不影响地图原生交互