初始化，每個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({//mapViewview: 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方法的參數1let 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);},

?

轉載于:https://www.cnblogs.com/cannel/p/11077991.html

總結

以上是生活随笔為你收集整理的arcgis jsapi接口入门系列（7）：鼠标在地图画线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。