@sword0916/wings-map v1.0.5

wings-canvas

一、项目安装和引用

1、安装

npm i @sword0916/wings-map

2、引用

import S from "@sword0916/wings-map"

二、创建map

1、初始化一个地图

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

2、参数列表

三、添加图层

1、创建图层层

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

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

注意事项

图层的名称不可重复！

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

四、添加标点

1、创建标点

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

2、标点的参数

五、创建、添加向量

向量(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);

2、创建几何体

1、创建点

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

参数说明

2、创建折线

let l = new S.Line(points);

参数说明

3、创建圆

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

参数说明

4、创建圆弧

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

参数说明

5、创建多边形

let p = new S.LineLoop(points);

参数说明

6、创建椭圆

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

参数说明

3、生成向量

1、创建向量

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

参数说明

2、添加向量

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

参数说明

六、控制工具

1、获取控制对象

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

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

2、平移工具

//map是初始化的地图。参照：二-1
let control = map.getControl();
let pan = control.pan;
pan.panUp();//向上平移
pan.panDown();//向下平移
pan.panLeft();//向左平移
pan.panRight();//向右平移

pan.panUp(20);//向上平移
pan.panDown(20);//向下平移
pan.panLeft(20);//向左平移
pan.panRight(20);//向右平移

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

3、缩放工具

//map是初始化的地图。参照：二-1
let control = map.getControl();
let scale = control.scale;
scale.scaleUp();//放大
scale.panDown();//缩小

scale.scaleUp(2);//放大
scale.panDown(2);//缩小

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

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”控制全局。