arcgis jsapi接口入门系列(7):鼠标在地图画线

0
分享 2018-10-22
初始化,每个map执行一次就行
        drawPolylineInit: function () {
//画几何对象初始化

//新建一个图形图层用于存放画图过程中的图形
let layer = new this.apiInstance.GraphicsLayer({
//空间参考,一般要跟地图的一样
spatialReference: this.mapView.spatialReference,
});
//图层添加到地图
//PS:GraphicsLayer也是图层之一,因此也支持通用的图层功能
this.map.add(layer);

//new SketchViewModel,此对象用于画图
this.sketchPolyline = new this.apiInstance.SketchViewModel({
//mapView
view: this.mapView,
//一个图形图层
layer: layer,
//分别是点线面的样式,分别用于画点线面时,理论上只要设置要画的几何类型即可
pointSymbol: {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "square",
color: "red",
size: "16px",
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 0],
width: 3
}
},
polylineSymbol: {
type: "simple-line", // autocasts as new SimpleMarkerSymbol()
color: "#8A2BE2",
width: "4",
style: "dash"
},
polygonSymbol: {
type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
color: "rgba(138,43,226, 0.8)",
style: "solid",
outline: { // autocasts as new SimpleLineSymbol()
color: "white",
width: 1
}
}
});

//绑定create-complete事件,新增画图完成时会触发
this.sketchPolyline.on("create-complete", function (event) {
//画的几何对象类型,值同开始画的create方法的参数1
let drawGeometryType = event.tool;
//画的结果的几何对象
//PS:画完后SketchViewModel创建的图形会消失,因此如果要在画完后还要显示在地图上,就要另外再编码画在地图上,SketchViewModel只会提供画的结果的几何对象
let geometry = event.geometry;

//样式
//PS:其他高级样式配置请看样式的章节
let style = {
//线颜色
color: "dodgerblue",
//线宽
width: 3,
//线样式
style: "solid"
};

let graphic = mapUtil.geometry.polylineToPolylineGraphic(this.apiInstance, geometry, style, this.mapView.spatialReference, null);

//把图形添加到地图的图形集合
//PS:图形要在地图上显示,可以添加到两种地方。一是mapView的graphics,这是地图的图形容器。第二是创建图形图层(GraphicsLayer),然后把图形加入到图层里
this.mapView.graphics.add(graphic);
}.bind(this));

//绑定update-complete事件,编辑画图完成时会触发
this.sketchPolyline.on("update-complete", function (event) {
//画的结果的几何对象
//PS:画完后SketchViewModel创建的图形会消失,因此如果要在画完后还要显示在地图上,就要另外再编码画在地图上,SketchViewModel只会提供画的结果的几何对象
let geometry = event.geometry;

//后续代码略。。。
}.bind(this));
},
开始画新的线
        drawPolyline: function () {
//开始画线
//参数1:画的几何类型,有值:point=点 | multipoint=多点 | polyline=线 | polygon=面 | rectangle=矩形 | circle=原型
this.sketchPolyline.create("polyline");
},
开始编辑线
        drawEditPolyline: function () {
//编辑线
//做一条测试的线,注意是图形而不是几何对象
//PS:编辑时样式是用图形的,而不是SketchViewModel的
let wkt = "LINESTRING(113.545949 22.24015749,113.56989 22.24916,113.55324 22.220588)";

//PS:编辑时创建图形不用传style,编辑的样式会用SketchViewModel的
let graphic = mapUtil.geometry.wktToPolylineGraphic(this.apiInstance, wkt, null, this.mapView.spatialReference, null);

//开始编辑
//PS:其他几何类型的编辑都一样,因此其他类型编辑省略
this.sketchPolyline.update(graphic);
},

0 个评论

要回复文章请先登录注册