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

初始化,每个map执行一次

PS:画点也差不多,都是用SketchViewModel,因此本demo没有专门写画点的

        drawPolygonInit: function () {
            //画几何对象初始化

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

            //new SketchViewModel,此对象用于画图
            this.sketchPolygon = new this.apiInstance.SketchViewModel({
                //mapView
                view: this.mapView,
                //一个图形图层
                layer: layer,
                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.sketchPolygon.on("create-complete", function (event) {
                //画的几何对象类型,值同开始画的create方法的参数1
                let drawGeometryType = event.tool;
                //画的结果的几何对象
                //PS:画完后SketchViewModel创建的图形会消失,因此如果要在画完后还要显示在地图上,就要另外再编码画在地图上,SketchViewModel只会提供画的结果的几何对象
                let geometry = event.geometry;

                //样式
                //PS:其他高级样式配置请看样式的章节
                let style = {
                    //线颜色
                    color: [50, 205, 50, 0.3],
                    outline: {
                        color: [255, 0, 0],
                        width: 1
                    }
                };

                let graphic = mapUtil.geometry.polygonToPolygonGraphic(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));
        },

开始画面

        drawPolygon: function () {
            //开始画面
            //参数1:画的几何类型,有值:point=点 | multipoint=多点 | polyline=线 | polygon=面 | rectangle=矩形 | circle=原型
            this.sketchPolygon.create("polygon");
        },