arcgis jsapi介面入門系列(7):滑鼠在地圖畫線
阿新 • • 發佈:2018-11-29
初始化,每個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); },