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

古城微笑少年丶 2022-01-06 15:17 155阅读 0赞

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

转载于:https://www.cnblogs.com/cannel/p/11078001.html