自定义绘图工具（SketchViewModel--vue2.X为例）

1、页面效果

 2、前端样式

自定义范围：
            

                

                    
                    
                
            
        

nowIndex: -1,
            drawLayer: [{
                    name: "点选",
                    type: 'point',
                    icon: require("../../../../static/img/maptools/zbcx1.png"),
                    iconSelect: require("../../../../static/img/maptools/zbcx2.png"),
                },
                {
                    name: "线选",
                    type: 'polyline',
                    icon: require("../../../../static/img/maptools/xcx1.png"),
                    iconSelect: require("../../../../static/img/maptools/xcx2.png"),
                },
                {
                    name: "矩形选",
                    type: 'rectangle',
                    icon: require("../../../../static/img/maptools/mcx1.png"),
                    iconSelect: require("../../../../static/img/maptools/mcx2.png"),
                },
                {
                    name: "圆选",
                    type: 'circle',
                    icon: require("../../../../static/img/maptools/ycx1.png"),
                    iconSelect: require("../../../../static/img/maptools/ycx2.png"),
                },
                {
                    name: "多边形选",
                    type: 'polygon',
                    icon: require("../../../../static/img/maptools/zycx1.png"),
                    iconSelect: require("../../../../static/img/maptools/zycx2.png"),
                },
            ],

3、方法

//新版使用绘图工具
        _drawGeometryUseSketchVM(index, item) {
            const self = this

            self.mapView.graphics.removeAll()
            self.graphicsLayerDraw.graphics.removeAll()
           
            if (self.nowIndex === index) {
                self.nowIndex = -1;
            } else {
                self.nowIndex = index;
                //Pubsub.publish("ifDrawingClick", true);
                switch (item.type) {
                    case "point":
                        self.sketchVM.create("point");
                        break;
                    case "polyline":
                        self.sketchVM.create("polyline");
                        break;
                    case "rectangle":
                        self.sketchVM.create("rectangle");
                        break;
                    case "circle":
                        self.sketchVM.create("circle");
                        break;
                    case "polygon":
                        self.sketchVM.create("polygon");
                        break;
                    default:
                        break;
                }
            }
        },

4、初始化加载

//2-1、新建地图选择绘制图层
                        self.graphicsLayerDraw = new self.GraphicsLayer({
                            id: 'graphicsLayerDraw'
                        });
                        self.mapView.map.add(self.graphicsLayerDraw);
                        //2-2、添加绘图工具
                        self.sketchVM = new self.SketchViewModel({
                            view: self.mapView,
                            layer: self.graphicsLayerDraw,
                            pointSymbol: window.g.MapConfiguration.DrawSymbol.pointSymbol,
                            polylineSymbol: window.g.MapConfiguration.DrawSymbol.polylineSymbol,
                            polygonSymbol: window.g.MapConfiguration.DrawSymbol.polygonSymbol,
                        });
                        self.sketchVM.on("create", function (event) {
                            // event.state事件状态： start、active、complete、cancel
                            if (event.state == 'complete') {
                                self.nowIndex = -1
                                //Pubsub.publish("ifDrawingClick", false);
                            }                            
                        })