arcgis jsapi接口入门系列（7）：鼠标在地图画线

地图画线

初始化，每个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);
        },