1. 程式人生 > >arcgis jsapi介面入門系列(7):滑鼠在地圖畫線

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);
        },