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