易航海webSdk

Appearance

绘制插件 ​

[去看示例] ​

使用说明 ​

插件提供绘制能力如下 基础类型：点、线、多边形、圆 进阶类型:自定义点、文字、箭头、扇形 支持对面、边线的颜色、粗细控制，支持设置文字大小 支持固定格式数据渲染

效果展示 ​

An image

使用示例 ​

javascript
const ehhGis = new EhhGis()
window.draw = new ehhGis.Draw({
  displayControlsDefault: false, //是否使用默认控件
  controls: false, //是否显示单个控件
  boxSelect: false, //是否启用shift+ click+拖动功能框选择, 若为false,shift+ click+拖动放大一个区域
  icons: {
    tuxing1: {
      url: `图片地址`,
    },
    tuxing2: {
      url: `图片地址`,
    },
  },
})
map.addControl(window.draw)
draw.changeMode('draw_custom_point', {
  'icon-image': 'tuxing1', //图片名称  对应初始化时 icons中key
  'text-anchor': 'top', //文字对齐方式
  'text-offset': [0, 0], //文字偏移量
  'icon-size': 0.5, //图标缩放倍数
  'text-color': '#FF0000', //文字颜色
  name: '点', //点位名称
  'text-size': 14, //文字大小
  'text-halo-width': 1, //文字描边宽度
  'text-halo-color': '#FFFFFF', //文字描边颜色
})

Draw 初始化配置 ​

参数说明类型可选值默认值
displayControlsDefault是否使用默认控件Boolean-true
controls是否启动单个控件Boolean-true
boxSelect是否使用 shift并单击加拖动 来启用特征框选择。如果为false，按住shift键并单击加拖动将缩放到某个区域Object--
icons"draw_custom_point" 模式所需iconBoolean-true

icons参数详解 ​

javascript
{
    tuxing1: {
      url: `图片地址`,
    },
    tuxing2: {
      url: `图片地址`,
    },
}
"tuxing1"为图片名称，对应changeMode方法中的"icon-image"值，
"url"为图片路径，请尽量使用在线地址。
若使用本地地址，请尽量使用 `${process.env.BASE_URL}xxxx.png`

绘制模式 ​

静默模式 ​

simple_select 无法选中任意要素

javascript
draw.changeMode('simple_select')

活跃模式 ​

direct_select 允许您选择、删除和拖动顶点；和拖动功能。 不适用于点要素，因为点要素中没有顶点

javascript
draw.changeMode('direct_select')

普通点 ​

[去看示例]

draw_point

javascript
draw.changeMode('draw_point')

自定义点 ​

[去看示例]

javascript
draw.changeMode('draw_custom_point', {
  'icon-image': 'tuxing1', //图片名称  对应初始化时 icons中key
  'text-anchor': 'top', //文字对齐方式
  'text-offset': [0, 0], //文字偏移量
  'icon-size': 0.5, //图标缩放倍数
  'text-color': '#FF0000', //文字颜色
  name: '点', //点位名称
  'text-size': 14, //文字大小
  'text-halo-width': 1, //文字描边宽度
  'text-halo-color': '#FFFFFF', //文字描边颜色
})

自定义文本 ​

javascript
draw.changeMode('draw_text', {
  name: '线', //文本内容
  'text-size': 14, //文字大小
  'text-anchor': 'center', //文字对齐方式
  'text-halo-width': 1, //文字描边宽度
  'text-halo-color': '#FFFFFF', //文字描边颜色
  'text-offset': [0, 0], //文字偏移量
  'text-color': '#FF0000', //文字颜色
})

线 ​

[去看示例]

javascript
draw.changeMode('draw_line_string', {
  name: '线', //文本内容
  'text-anchor': 'center', //文本对齐方式
  'symbol-placement': 'point', //文本位置方式
  'line-width': 2, //线宽
  'text-color': '#FF0000', //文本颜色
  'line-color': '#e600ff', //线颜色
  'line-type': 'solid', //线类型
  'text-size': 14, //文本字体大小
  'text-halo-width': 1, //文本描边粗细
  'text-halo-color': '#FFFFFF', //文本描边颜色
  'text-offset': [0, 0], //文本位移
})

箭头 ​

[去看示例]

javascript
draw.changeMode('draw_arrow', {
  name: '箭头', //文本内容
  'text-anchor': 'center', //文本对齐方式
  'symbol-placement': 'point', //文本位置方式
  'line-width': 2, //线宽
  'text-color': '#FF0000', //文本颜色
  'line-color': '#e600ff', //线颜色
  'text-size': 14, //文本字体大小
  'text-halo-width': 1, //文本描边粗细
  'text-halo-color': '#FFFFFF', //文本描边颜色
  'text-offset': [0, 0], //文本位移
  'arrow-size': 0.5, //箭头大小
})

圆 ​

[去看示例]

javascript
draw.changeMode('draw_circle', {
  "name": "圆",//文本内容
  "text-anchor": "center",//文本对齐方式
  "text-size": 14,//文本字体大小
  "line-width": 2,//线宽
  "text-halo-width": 1,//文本描边粗细
  "text-offset": [0, 0],,//文本位移
  "text-color": "#FF0000",//文本颜色
  "line-color": "#e600ff",//线颜色
  "text-halo-color": "#FFFFFF",//文本描边颜色
  "fill-color": "#e600ff",//面填充色
  "fill-opacity": 0.1,//面透明度
});

多边形 ​

[去看示例]

javascript
draw.changeMode('draw_polygon', {
  "name": "多边形",//文本内容
  "text-anchor": "center",//文本对齐方式
  "text-size": 14,,//文本字体大小
  "line-width": 2,//线宽
  "text-halo-width": 1,//文本描边粗细
  "text-offset": [0, 0],//文本位移
  "text-color": "#FF0000",//文本颜色
  "line-color": "#e600ff",//线颜色
  "text-halo-color": "#FFFFFF",//文本描边颜色
  "fill-color": "#e600ff",//面填充色
  "fill-opacity": 0.1,//面透明度
});

扇形 ​

[去看示例]

javascript
draw.changeMode('draw_sector', {
  "name": "扇形",//文本内容
  "text-anchor": "center",//文本对齐方式
  "text-size": 14,,//文本字体大小
  "line-width": 2,//线宽
  "text-halo-width": 1,//文本描边粗细
  "text-offset": [0, 0],//文本位移
  "text-color": "#FF0000",//文本颜色
  "line-color": "#e600ff",//线颜色
  "text-halo-color": "#FFFFFF",//文本描边颜色
  "fill-color": "#e600ff",//面填充色
  "fill-opacity": 0.1,//面透明度
});