折线管理

折线是地图上的线条，用于表示路径、边界或其他线性特征。

addPolyline

添加折线到地图。

/**
 * 添加折线
 * @param {string} key - 唯一标识
 * @param {thmap.PolylineOptions} options - 配置对象
 * @returns {ThMap} - 返回 this 以支持链式调用
 */
addPolyline(key, options)

参数说明

参数	类型	描述
key	string	折线的唯一标识
options	thmap.PolylineOptions	折线的配置选项

PolylineOptions 详细配置

选项	类型	默认值	必填	描述
source	thmap.SourceData		否	数据源，可以是GeoJSON数据集合或数据源ID
beforeId	string		否	在某个图层之前的图层key
defaultColor	thmap.FeatureColor	transparent	否	默认颜色，填写颜色值（如："#fff"）或feature.properties中的属性名称
hoverColor	thmap.FeatureColor	transparent	否	覆盖颜色，鼠标悬停时的线条颜色
activeColor	thmap.FeatureColor	transparent	否	点击颜色，鼠标点击时的线条颜色
lineWidth	number	2	否	线条宽度
filter	thmap.FilterSpecification		否	过滤条件
layout	thmap.LayerLayout		否	热区布局配置
onMouseEnter	function		否	鼠标移入事件处理函数，参数为事件对象
onMouseMove	function		否	鼠标移动事件处理函数，参数为事件对象
onMouseLeave	function		否	鼠标移出事件处理函数，参数为事件对象
onClick	function		否	鼠标点击事件处理函数，参数为事件对象

示例

// 添加简单折线
map.addPolyline('route-polyline', {
  source: {
    type: 'geojson',
    data: {
      type: 'Feature',
      geometry: {
        type: 'LineString',
        coordinates: [
          [116.38, 39.90],
          [116.39, 39.91],
          [116.40, 39.90],
          [116.41, 39.91]
        ]
      }
    }
  },
  defaultColor: '#ff0000',
  lineWidth: 3,
  hoverColor: '#00ff00',
  onClick: function(e) {
    console.log('点击了折线:', e);
  }
})

setPolylineData

设置折线数据。

/**
 * 设置折线数据
 * @param {string} key - 唯一标识
 * @param {thmap.SourceData} data - 折线数据
 * @returns {ThMap} - 返回 this 以支持链式调用
 */
setPolylineData(key, data)

参数说明

参数	类型	描述
key	string	折线的唯一标识
data	thmap.SourceData	折线数据，可以是GeoJSON数据或数据源ID

示例

// 更新折线数据
map.setPolylineData('route-polyline', {
  type: 'geojson',
  data: {
    type: 'Feature',
    geometry: {
      type: 'LineString',
      coordinates: [
        [116.37, 39.89],
        [116.39, 39.90],
        [116.41, 39.89],
        [116.43, 39.90]
      ]
    }
  }
})

getPolyline

获取指定的折线实例。

/**
 * 获取折线
 * @param {string} key - 唯一标识
 * @returns {PolylineLayer} - 折线实例
 */
getPolyline(key)

参数说明

参数	类型	描述
key	string	折线的唯一标识

示例

const polyline = map.getPolyline('route-polyline')
// 访问折线属性
console.log(polyline.options)

removePolyline

移除折线。

/**
 * 移除折线
 * @param {string|string[]} [key] - 唯一标识，不提供则移除所有折线
 * @returns {ThMap} - 返回 this 以支持链式调用
 */
removePolyline(key)

参数说明

参数	类型	描述
key	string | string[]	可选，折线的唯一标识，不提供则移除所有折线

示例

// 移除特定折线
map.removePolyline('route-polyline')

// 移除多个折线
map.removePolyline(['route-polyline1', 'route-polyline2'])

// 移除所有折线
map.removePolyline()

setPolylineVisibility

设置折线的显示状态。

/**
 * 设置折线显示状态
 * @param {layer.VisibilityEnum} visibility - 显示状态('visible' 或 'none')
 * @param {string|string[]} [key] - 唯一标识，不提供则设置所有折线
 * @returns {ThMap} - 返回 this 以支持链式调用
 */
setPolylineVisibility(visibility, key)

参数说明

参数	类型	描述
visibility	string	显示状态，可选值: 'visible' (显示), 'none' (隐藏)
key	string | string[]	可选，折线的唯一标识，不提供则设置所有折线

示例

// 显示特定折线
map.setPolylineVisibility('visible', 'route-polyline')

// 隐藏多个折线
map.setPolylineVisibility('none', ['route-polyline1', 'route-polyline2'])

// 隐藏所有折线
map.setPolylineVisibility('none')

折线操作示例

// 添加折线并绑定事件
map.addPolyline('route-polyline', {
  source: {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          id: 'route1',
          geometry: {
            type: 'LineString',
            coordinates: [
              [116.38, 39.90],
              [116.39, 39.91],
              [116.40, 39.90]
            ]
          },
          properties: {
            name: '路线1',
            color: '#ff0000'
          }
        },
        {
          type: 'Feature',
          id: 'route2',
          geometry: {
            type: 'LineString',
            coordinates: [
              [116.40, 39.90],
              [116.41, 39.91],
              [116.42, 39.90]
            ]
          },
          properties: {
            name: '路线2',
            color: '#00ff00'
          }
        }
      ]
    }
  },
  defaultColor: ['get', 'color'],
  lineWidth: 3,
  hoverColor: '#ffff00',
  onMouseEnter: function(e) {
    console.log('进入折线:', e.features[0].properties.name);
  },
  onClick: function(e) {
    console.log('点击折线:', e.features[0].properties.name);
  }
})

// 稍后更新折线数据
setTimeout(function() {
  map.setPolylineData('route-polyline', {
    type: 'geojson',
    data: {
      type: 'Feature',
      id: 'route3',
      geometry: {
        type: 'LineString',
        coordinates: [
          [116.39, 39.89],
          [116.40, 39.90],
          [116.41, 39.89]
        ]
      },
      properties: {
        name: '路线3',
        color: '#0000ff'
      }
    }
  })
}, 3000)

常见问题

1. 折线不显示：检查数据源是否正确，确保坐标格式符合GeoJSON规范。

2. 事件不触发：确保折线的pointer-events属性没有被设置为none，检查事件回调函数是否正确绑定。

3. 折线样式问题：可以通过调整defaultColor、hoverColor和lineWidth等参数来修改折线的外观。

4. 性能优化：对于大量折线数据，可以考虑使用矢量切片或数据简化来提高性能。