绘制工具

绘制工具允许用户在地图上绘制点、线、面等几何图形，并支持编辑和管理这些图形。

addDraw

添加绘制工具到地图。

/**
 * 添加绘制工具
 * @param {thmap.DrawOptions} [options] - 配置对象
 * @returns {ThMap} - 返回 this 以支持链式调用
 */
addDraw(options)

参数说明

参数	类型	描述
options	thmap.DrawOptions	可选，绘制工具的配置选项

DrawOptions 详细配置

选项	类型	默认值	必填	描述
displayControlsDefault	boolean	false	否	是否显示默认控件
snap	boolean	false	否	是否开启绘制吸附
guides	boolean	false	否	是否开启绘制辅助线
autoCreateCenterText	boolean	false	否	是否自动创建中心文字
snapOptions	object		否	吸附配置
snapOptions.snapPx	number	5	否	吸附距离(像素)
snapOptions.guideSnapDistance	number	0.01	否	辅助线吸附距离
snapOptions.snapVertexPriorityDistance	number	0.01	否	顶点优先吸附距离
snapOptions.rBushSearchDistance	number	0.001	否	空间索引搜索距离
snapOptions.snapToMidPoints	boolean	false	否	是否吸附到线段中点
fillColor	thmap.FeatureColor	rgba(59,178,208,0.3)	否	填充颜色，填写颜色值（如："#fff"）或feature.properties中的属性名称
fillActiveColor	thmap.FeatureColor	rgba(59,178,208,0.5)	否	激活状态填充颜色
lineColor	thmap.FeatureColor	#3BB2D0	否	线条颜色
lineActiveColor	thmap.FeatureColor	#3BB2D0	否	激活状态线条颜色
lineWidth	number	3	否	线条宽度
pointColor	thmap.FeatureColor	#3BB2D0	否	点颜色
pointActiveColor	thmap.FeatureColor	#3BB2D0	否	激活状态点颜色
pointOuterColor	thmap.FeatureColor	#ffffff	否	点外框颜色
pointOuterActiveColor	thmap.FeatureColor	#ffffff	否	激活状态点外框颜色
pointRadius	number	5	否	点半径
vertexColor	thmap.FeatureColor	#fbb03b	否	顶点颜色
vertexActiveColor	thmap.FeatureColor	#fbb03b	否	激活状态顶点颜色
vertexOuterColor	thmap.FeatureColor	#ffffff	否	顶点外框颜色
vertexOuterActiveColor	thmap.FeatureColor	#ffffff	否	激活状态顶点外框颜色
vertexRadius	number	3	否	顶点半径

支持的绘制模式

模式	描述
simple_select	简单选择模式，可以选择、移动和编辑图形
direct_select	直接选择模式，可以选择和编辑图形的顶点
frame_select	框选模式，通过拖动框选多个图形
draw_point	点绘制模式
draw_line_string	折线绘制模式
draw_polygon	多边形绘制模式
draw_rectangle	矩形绘制模式
draw_circle	圆形绘制模式
draw_wall	墙绘制模式
draw_model	模型绘制模式
draw_image	图片绘制模式
draw_split	分割模式
draw_merge	合并模式

示例

// 添加绘制工具
map.addDraw({
  snap: true,
  guides: true,
  fillColor: 'rgba(255, 0, 0, 0.2)',
  lineColor: '#ff0000',
  lineWidth: 2
})

getDraw

获取绘制工具实例。

/**
 * 获取绘制工具
 * @returns {MapDraw} - 绘制工具实例
 */
getDraw()

示例

const draw = map.getDraw()
// 访问绘制工具属性
console.log(draw._options)

removeDraw

移除绘制工具。

/**
 * 移除绘制工具
 * @returns {ThMap} - 返回 this 以支持链式调用
 */
removeDraw()

示例

// 移除绘制工具
map.removeDraw()

绘制工具方法

changeMode

切换绘制模式。

/**
 * 切换绘制模式
 * @param {mapdraw.DrawMode} mode - 绘制模式
 * @param {object} [options] - 模式配置
 * @returns {MapDraw} - 绘制工具实例
 */
changeMode(mode, options)

参数说明

参数	类型	描述
mode	string	绘制模式
options	object	可选，模式配置

示例

// 切换到多边形绘制模式
map.getDraw().changeMode('draw_polygon')

// 切换到选择模式并选择特定图形
map.getDraw().changeMode('simple_select', { featureIds: ['feature1', 'feature2'] })

add

添加绘制图形。

/**
 * 添加绘制图形
 * @param {GeoJSON.Feature | GeoJSON.FeatureCollection | GeoJSON.Geometry} geojson - 绘制图形数据
 * @returns {MapDraw} - 绘制工具实例
 */
add(geojson)

示例

// 添加一个点
map.getDraw().add({
  type: 'Feature',
  geometry: {
    type: 'Point',
    coordinates: [116.397228, 39.907556]
  },
  properties: {
    name: '中心点'
  }
})

set

设置绘制图形数据。

/**
 * 设置绘制图形数据
 * @param {GeoJSON.FeatureCollection} geojson - 绘制图形数据集合
 * @returns {MapDraw} - 绘制工具实例
 */
set(geojson)

示例

// 设置多个图形
map.getDraw().set({
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [116.397228, 39.907556]
      },
      properties: {
        name: '点1'
      }
    },
    {
      type: 'Feature',
      geometry: {
        type: 'LineString',
        coordinates: [
          [116.38, 39.90],
          [116.40, 39.90]
        ]
      },
      properties: {
        name: '线1'
      }
    }
  ]
})

select

选择绘制图形。

/**
 * 选择绘制图形
 * @param {string[]} featureIds - 图形ID集合
 * @returns {MapDraw} - 绘制工具实例
 */
select(featureIds)

示例

// 选择多个图形
map.getDraw().select(['feature1', 'feature2'])

trash

删除选中的绘制图形。

/**
 * 删除选中的绘制图形
 * @returns {MapDraw} - 绘制工具实例
 */
trash()

示例

// 选择并删除图形
map.getDraw().select(['feature1']).trash()

clear

清空所有绘制图形。

/**
 * 清空所有绘制图形
 * @returns {MapDraw} - 绘制工具实例
 */
clear()

示例

// 清空所有绘制图形
map.getDraw().clear()

绘制工具事件

onCreate

监听绘制创建事件。

/**
 * 监听绘制创建事件
 * @param {function} callback - 回调函数
 * @returns {MapDraw} - 绘制工具实例
 */
onCreate(callback)

示例

// 监听创建事件
map.getDraw().onCreate(function(e) {
  console.log('创建了图形:', e.features)
})

onUpdate

监听绘制更新事件。

/**
 * 监听绘制更新事件
 * @param {function} callback - 回调函数
 * @returns {MapDraw} - 绘制工具实例
 */
onUpdate(callback)

示例

// 监听更新事件
map.getDraw().onUpdate(function(e) {
  console.log('更新了图形:', e.features)
})

onDelete

监听绘制删除事件。

/**
 * 监听绘制删除事件
 * @param {function} callback - 回调函数
 * @returns {MapDraw} - 绘制工具实例
 */
onDelete(callback)

示例

// 监听删除事件
map.getDraw().onDelete(function(e) {
  console.log('删除了图形:', e.features)
})

onSelectionChange

监听选择变化事件。

/**
 * 监听选择变化事件
 * @param {function} callback - 回调函数
 * @returns {MapDraw} - 绘制工具实例
 */
onSelectionChange(callback)

示例

// 监听选择变化事件
map.getDraw().onSelectionChange(function(e) {
  console.log('选择了图形:', e.features)
})

绘制工具操作示例

// 添加绘制工具并设置事件监听
map.addDraw({
  snap: true,
  guides: true,
  fillColor: 'rgba(0, 0, 255, 0.2)',
  lineColor: '#0000ff',
  lineWidth: 2
})

const draw = map.getDraw()

// 监听创建事件
draw.onCreate(function(e) {
  console.log('创建了图形:', e.features)
  // 为新创建的图形设置属性
  e.features.forEach(function(feature) {
    draw.setFeatureProperty(feature.id, 'createdAt', new Date().toISOString())
  })
})

// 监听更新事件
draw.onUpdate(function(e) {
  console.log('更新了图形:', e.features)
})

// 监听删除事件
draw.onDelete(function(e) {
  console.log('删除了图形:', e.features)
})

// 切换到多边形绘制模式
setTimeout(function() {
  draw.changeMode('draw_polygon')
  console.log('开始绘制多边形')
}, 1000)

// 3秒后切换到选择模式
setTimeout(function() {
  draw.changeMode('simple_select')
  console.log('切换到选择模式')
}, 4000)

// 5秒后删除所有图形
setTimeout(function() {
  draw.clear()
  console.log('清空所有图形')
}, 8000)

常见问题

1. 绘制工具不显示：检查是否已添加绘制工具，确保地图容器有足够的尺寸。

2. 绘制图形不保存：确保在绘制完成后正确处理了创建事件，并保存了绘制数据。

3. 吸附功能不工作：检查snap选项是否设置为true，调整snapOptions中的参数。

4. 性能优化：对于复杂的绘制场景，可以考虑限制绘制图形的数量，或使用数据简化来提高性能。