ThMap

Appearance

绘制工具 ​

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

addDraw ​

添加绘制工具到地图。

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

参数说明 ​

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

支持的绘制模式 ​

模式描述
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合并模式

示例 ​

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

getDraw ​

获取绘制工具实例。

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

示例 ​

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

removeDraw ​

移除绘制工具。

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

示例 ​

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

绘制工具方法 ​

changeMode ​

切换绘制模式。

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

参数说明 ​

参数类型描述
modestring绘制模式
optionsobject可选，模式配置

示例 ​

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

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

add ​

添加绘制图形。

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

示例 ​

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

set ​

设置绘制图形数据。

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

示例 ​

javascript
// 设置多个图形
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 ​

选择绘制图形。

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

示例 ​

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

trash ​

删除选中的绘制图形。

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

示例 ​

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

clear ​

清空所有绘制图形。

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

示例 ​

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

绘制工具事件 ​

onCreate ​

监听绘制创建事件。

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

示例 ​

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

onUpdate ​

监听绘制更新事件。

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

示例 ​

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

onDelete ​

监听绘制删除事件。

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

示例 ​

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

onSelectionChange ​

监听选择变化事件。

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

示例 ​

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

绘制工具操作示例 ​

javascript
// 添加绘制工具并设置事件监听
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. 性能优化：对于复杂的绘制场景，可以考虑限制绘制图形的数量，或使用数据简化来提高性能。