wings-map

一、项目安装和引用

1、安装

npm i @sword0916/wings-map

2、引用

import S from "@sword0916/wings-map"

3、效果展示

详见examples/01总体效果演示.html

二、创建map

1、初始化一个地图

let map = new S.Map({
    containerId: "containerId"
});

2、地图参数说明

|序号|参数名|类型|默认值|说明| |----|----|----|----|----| |1|containerId|string|wingsMap|dom的ID| |2|width|number|600|地图的宽，单位是px| |3|height|number|400|地图的高，单位是px| |4|minX|number|-300|地图最小横坐标| |5|minY|number|-200|地图最小纵坐标| |6|maxX|number|300|地图最大横坐标| |7|maxY|number|200|地图最大纵坐标| |8|scale|boolean|true|是否启用缩放| |9|ruler|boolean|true|是否启用测距| |10|brush|boolean|true|是否启用画笔(可绘制：点、线、圆、正方形和多边形)| |11|whole|boolean|true|是否启用全图（回到初始视角）| |12|rotate|boolean|true|是否启用旋转| |13|pan|boolean|true|是否启用平移| |14|keyboard|boolean|true|是否启用键盘操作（缩放(+、-)、平移(↑、↓、←、→)、全图(Backspace)）| |15|mark|boolean|true|是否启用标点| |16|position|boolean|false|是否启用位置坐标（显示鼠标坐标）| |17|layerBtn|boolean|false|是否显示图层按钮| |18|scaleBtn|boolean|false|是否显示缩放按钮| |19|rulerBtn|boolean|false|是否显示测距按钮| |20|brushBtn|boolean|false|是否显示画笔按钮| |21|wholeBtn|boolean|false|是否显示全图按钮| |22|rotateBtn|boolean|false|是否显示旋转按钮|

3、效果展示

详见examples/02地图初始化.html

三、添加图层

1、创建图层层

图层创建完成后，需要添加到地图（map）中才会渲染。创建图层的参数是该图层的名称。地图中可以添加多个图层，名称不能重复。

//创建一个名称是“layer01”的图层
let layer = new S.Layer('layer01');
//将图层layer添加到map中。
//map是初始化的地图对象。参照：二-1
map.addLayer(layer);

2、图层方法说明

|序号|方法名|参数|返回值类型|说明| |----|----|----|----|----| |1|getName| |string|获取本图层的名称| |2|getVectors| |Map集合|本图层所有的向量集合| |3|isVisible| |boolean|本图层是否可见| |4|addVectors| 向量或向量数组 | |添加向量。参照五-3| |5|removeVectors| 向量或向量数组 | |删除向量。| |6|setIsVisible| boolean | |设置图层是否可见。true为可见，false为不可见|

3、注意事项

图层的名称不可重复！

图层添加到地图（map）才会渲染！

四、添加标点

1、创建标点

//创建一个标点对象
let marker = new S.Marker({
    point: new S.Point(0, 0),
    title: '标点', 
    content: '文字tooltip'
});
//将标点添加到map中。
//map是初始化的地图对象。参照：二-1
map.addMarker(marker);

2、标点参数说明

|序号|参数名|类型|默认值|说明| |----|----|----|----|----| |1|point|Point| |标点的位置。参照五-2-1| |1|title|string|标点|标点的名称| |2|image|url或image||标点的图标| |3|move|boolean|false|是否移动| |4|content|string或dom||弹框的内容| |5|width|number|30|图标的宽，单位是px| |6|height|number|30|图标的高，单位是px| |7|offsetX|number|标点的宽的相反数的一半（-width/2）|图标横向偏移，单位是px| |8|offsetY|number|标点的高的相反数(-height)|图标纵向偏移，单位是px| |9|tooltipOffsetX|number||弹框横向偏移，单位是px| |10|tooltipOffsetY|number||弹框纵向偏移，单位是px|

3、标点方法说明

|序号|方法名|参数|返回值类型|说明| |----|----|----|----|----| |1|moveTo| Point（参照五-2-1） | |移动到指定坐标| |1|setTooltip| string或dom | |设置弹框内容|

4、效果展示

详见examples/33添加标点.html

五、创建、添加向量

向量(Vector)需要添加到图层(Layer)中，才会渲染！

向量(Vector)由几何体(Geometry)和样式(普通对象)构成。

1、样式

样式是普通对象，如 {fill: false, stroke: true, fillOpacity: 0, strokeOpacity: 1, strokeColor: "red", strokeWidth: 1};

let s = {fill: true, stroke: true, fillOpacity: 1, strokeOpacity: 1, fillColor: 'black', strokeColor: 'red', strokeWidth: 1};
// v是创建出的向量；参照：五-3
let v = new S.Vector(geometry, s);

样式对象属性说明

|序号|属性名|类型|默认值|说明| |----|----|----|----|----| |1|fill|boolean|true|是否填充| |2|stroke|boolean|true|是否描边| |3|fillOpacity|number|0.8|填充的透明度（取值范围0-1）| |4|strokeOpacity|number|1|描边的透明度（取值范围0-1）| |5|fillColor|string|red|填充的颜色| |6|strokeColor|string|black|描边的颜色| |7|lineDash|array| |虚线的样式| |8|strokeWidth|number| |描边的线宽| |9|textHeight|number| |文字的高度| |10|fixedSize|boolean|false|图片大小是否固定| |11|pointRadius|number| 5|绘制出的点对象半径|

2、创建几何体

1、创建点

let p = new S.Point(x, y, bulge);

参数说明

|序号|参数名|类型|说明|参照| |----|----|----|----|----| |1|x|number|横轴坐标| | |2|y|number|纵轴坐标| | |3|bulge|number|凸度，在折线和多边形中可绘制出弧线。可不传| |

效果展示

详见examples/03绘制点.html

2、创建折线

let l = new S.Line(points);

参数说明

|序号|参数名|类型|说明|参照| |----|----|----|----|----| |1|points|array|点对象数组|五-2-1|

效果展示

详见examples/05绘制折线.html

3、创建圆

let c = new S.Circle(center, radius);

参数说明

|序号|参数名|类型|说明|参照| |----|----|----|----|----| |1|center|Point|点对象|五-2-1| |2|radius|number|圆的半径| |

效果展示

详见examples/09绘制圆形.html

4、创建圆弧

let a = new S.Arc(center, radius, startAngle, endAngle, anticlockwise);

参数说明

|序号|参数名|类型|说明|参照| |----|----|----|----|----| |1|center|Point|点对象|五-2-1| |2|radius|number|圆的半径| | |3|startAngle|number|圆心与起始点连线和横轴的夹角角度（不是弧度。逆时针为正，顺时针为负）| | |4|endAngle|number|圆心与终止点连线和横轴的夹角角度（不是弧度。逆时针为正，顺时针为负）| | |5|endAngle|boolean|从起始角度到终止角度是否是逆时针旋转（true是逆时针，false是顺时针）| |

效果展示

详见examples/11绘制圆弧.html

5、创建多边形

let p = new S.LineLoop(points);

参数说明

|序号|参数名|类型|说明|参照| |----|----|----|----|----| |1|points|array|点对象数组|五-2-1|

效果展示

详见examples/07绘制多边形.html

6、创建椭圆

let e = new S.Ellipse(center, radiusX, radiusY, rotation);

参数说明

|序号|参数名|类型|说明|参照| |----|----|----|----|----| |1|center|Point|点对象|五-2-1| |2|radiusX|number|椭圆横轴半径| | |3|radiusY|number|椭圆纵轴半径| | |4|rotation|number|旋转角度（不是弧度。逆时针为正，顺时针为负。）| |

效果展示

详见examples/13绘制椭圆.html

3、生成向量

1、创建向量

let v = new S.Vector(geometry, style);

参数说明

|序号|参数名|类型|说明|参照| |----|----|----|----|----| |1|geometry|Geometry|几何体对象|五-2| |2|style|object|样式对象|五-1|

2、添加向量

//layer是地图中的一个图层。参照：三-1
layer.addVectors(vectors);

参数说明

|序号|参数名|类型|说明|参照| |----|----|----|----|----| |1|vectors|向量或向量数组|要添加的向量|五-3-1|

六、控制工具

1、获取控制对象

获取的控制器包含了：平移工具、缩放工具、测距工具、画笔工具和全图工具。

//map是初始化的地图。参照：二-1
let control = map.getControl();

2、平移工具

//map是初始化的地图。参照：二-1
let control = map.getControl();
let pan = control.pan;

//默认步长平移（默认步长是10）
pan.panUp();//向上平移
pan.panDown();//向下平移
pan.panLeft();//向左平移
pan.panRight();//向右平移

//自定义步长平移
pan.panUp(20);//向上平移
pan.panDown(30);//向下平移
pan.panLeft(40);//向左平移
pan.panRight(50);//向右平移

初始化地图时启用键盘操作，可使用键盘上的“↑、↓、←、→”控制平移。

3、缩放工具

//map是初始化的地图。参照：二-1
let control = map.getControl();
let scale = control.scale;
//默认比例缩放
scale.scaleUp();//放大（默认缩放步长是20%）
scale.scaleDown();//缩小（默认缩放步长是20%）

//自定义比例缩放
scale.scaleUp(0.5);//放大50%
scale.scaleDown(0.6);//缩小60%

初始化地图时启用键盘操作，可使用键盘上的“+、-”控制缩放。

4、测距工具

//map是初始化的地图。参照：二-1
let control = map.getControl();
let ruler = control.ruler;
ruler.rule();//开始测距

5、画笔工具

//map是初始化的地图。参照：二-1
let control = map.getControl();
let brush = control.brush;
//开始绘制
//brushType画笔类型："Point", "Line", "Circle", "Square", "Polygon"
//brushStyle画笔样式。参照：五-1
//返回Promise对象
brush.paint(brushType, brushStyle).then( v => {
    //绘制成功操作
    //v是绘制的向量
}).catch(e => {
    //绘制失败操作
    //e是错误提示
});

6、全图工具

//map是初始化的地图。参照：二-1
let control = map.getControl();
let whole = control.whole;
whole.viewWhole();//全图

初始化地图时启用键盘操作，可使用键盘上的“Backspace”控制全图。

7、旋转工具

//map是初始化的地图。参照：二-1
let control = map.getControl();
let rotate = control.rotate;
rotate.rotate(90);//旋转90度（逆时针为正，顺时针为负）

8、控制按钮

效果展示

详见examples/20默认按钮控制.html