PS：用程式碼畫點這樣寫是為了跟後面的用滑鼠畫點線面區分出來

畫點

        drawPointGraphic: function () {
            //點有多種樣式：一般的點，顯示文字，顯示圖片

            //一般的點
            let wkt = "POINT(113.566806 22.22445)";

            //樣式
            //PS：其他高階樣式配置請看樣式的章節
            let style = {
                //點樣式，值有：circle=圓，cross=十字，diamond=菱形，square=正方形，x=X
                style: "circle",
                //點填充顏色
                color: "blue",
                //點大小
                size: "8px",
                //邊框線樣式，具體同線的樣式
                outline: {
                    color: [255, 255, 0],
                    width: 3
                }
            };

            //通過wkt生成線圖形（graphic）
            //PS：圖形（graphic）是一個可以載入到地圖或圖層的幾何物件，包括的幾何物件的座標，樣式，屬性欄位值等
            // * @param apiInstance api
            //     * @param wkt wkt
            //     * @param style 樣式
            //     * @param sr 空間參考
            //     * @param attributes 屬性欄位值（可空）
            let graphic = mapUtil.geometry.wktToPointGraphic(this.apiInstance, wkt, style, this.mapView.spatialReference, null);

            //把圖形新增到地圖的圖形集合
            //PS：圖形要在地圖上顯示，可以新增到兩種地方。一是mapView的graphics，這是地圖的圖形容器。第二是建立圖形圖層（GraphicsLayer），然後把圖形加入到圖層裡
            this.mapView.graphics.add(graphic);

            //顯示文字的點
            wkt = "POINT(113.57418 22.22342)";

            //樣式
            //PS：其他高階樣式配置請看樣式的章節
            style = {
                //字型顏色
                color: "black",
                //文字內容
                text: "文字demo",
                //字型樣式
                font: {
                    //字型大小
                    size: 12,
                    //字型名稱
                    family: "sans-serif",
                }
            };

            //wkt轉點的文字的圖形（graphic）
            //PS：圖形（graphic）是一個可以載入到地圖或圖層的幾何物件，包括的幾何物件的座標，樣式，屬性欄位值等
            // * @param apiInstance api
            //     * @param wkt wkt
            //     * @param style 樣式
            //     * @param sr 空間參考
            //     * @param attributes 屬性欄位值（可空）
            graphic = mapUtil.geometry.wktToTextGraphic(this.apiInstance, wkt, style, this.mapView.spatialReference, null);

            //把圖形新增到地圖的圖形集合
            //PS：圖形要在地圖上顯示，可以新增到兩種地方。一是mapView的graphics，這是地圖的圖形容器。第二是建立圖形圖層（GraphicsLayer），然後把圖形加入到圖層裡
            this.mapView.graphics.add(graphic);

            //顯示圖片的點
            wkt = "POINT(113.59281 22.22685)";

            //樣式
            //PS：其他高階樣式配置請看樣式的章節
            style = {
                //圖片url
                url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
                //圖片大小
                width: "64px",
                height: "64px"
            };

            //wkt轉點的圖片的圖形（graphic）
            //PS：圖形（graphic）是一個可以載入到地圖或圖層的幾何物件，包括的幾何物件的座標，樣式，屬性欄位值等
            // * @param apiInstance api
            //     * @param wkt wkt
            //     * @param style 樣式
            //     * @param sr 空間參考
            //     * @param attributes 屬性欄位值（可空）
            graphic = mapUtil.geometry.wktToPicGraphic(this.apiInstance, wkt, style, this.mapView.spatialReference, null);

            //把圖形新增到地圖的圖形集合
            //PS：圖形要在地圖上顯示，可以新增到兩種地方。一是mapView的graphics，這是地圖的圖形容器。第二是建立圖形圖層（GraphicsLayer），然後把圖形加入到圖層裡
            this.mapView.graphics.add(graphic);
        },
 

畫線

        //程式碼在地圖上新增線
        drawPolylineGraphic: function () {
            //wkt，代表線的座標
            //PS：線座標傳入還支援其他格式，具體請看幾何物件的章節
            let wkt = "LINESTRING(113.545949 22.24015749,113.56989 22.24916,113.55324 22.220588)";
            //樣式
            //PS：其他高階樣式配置請看樣式的章節
            let style = {
                //線顏色
                color: "dodgerblue",
                //線寬
                width: 3,
                //線樣式
                style: "solid"
            };

            //通過wkt生成線圖形（graphic）
            //PS：圖形（graphic）是一個可以載入到地圖或圖層的幾何物件，包括的幾何物件的座標，樣式，屬性欄位值等
            //     * @param apiInstance api
            //     * @param wkt wkt
            //     * @param style 樣式
            //     * @param sr 空間參考
            //     * @param attributes 屬性欄位值（可空）
            let graphic = mapUtil.geometry.wktToPolylineGraphic(this.apiInstance, wkt, style, this.mapView.spatialReference, null);

            //把圖形新增到地圖的圖形集合
            //PS：圖形要在地圖上顯示，可以新增到兩種地方。一是mapView的graphics，這是地圖的圖形容器。第二是建立圖形圖層（GraphicsLayer），然後把圖形加入到圖層裡
            this.mapView.graphics.add(graphic);

            //圖形新增到圖形圖層

            //新建圖形圖層
            let layer = new this.apiInstance.GraphicsLayer({
                //空間參考，一般要跟地圖的一樣
                spatialReference: this.mapView.spatialReference,
            });
            //圖層新增到地圖
            //PS：GraphicsLayer也是圖層之一，因此也支援通用的圖層功能
            this.map.add(layer);

            wkt = "LINESTRING(113.52535 22.2372,113.54320285 22.2299436)";
            graphic = mapUtil.geometry.wktToPolylineGraphic(this.apiInstance, wkt, style, this.mapView.spatialReference, null);

            //生成圖形後，把圖形新增到圖層
            layer.add(graphic);
        },
 

畫面

        //程式碼在地圖上新增面
        drawPolygonGraphic: function () {
            //wkt，代表座標
            //PS：線座標傳入還支援其他格式，具體請看幾何物件的章節
            let wkt = "POLYGON((113.527839 22.27028,113.527238 22.2557786,113.5437178 22.2597268,113.54423 22.2730306,113.527839 22.27028))";
            //樣式
            //PS：其他高階樣式配置請看樣式的章節
            let style = {
                //線顏色
                color: [50, 205, 50, 0.3],
                outline: {
                    color: [255, 0, 0],
                    width: 1
                }
            };

            //wkt轉面的圖形（Graphic）
            //PS：圖形（graphic）是一個可以載入到地圖或圖層的幾何物件，包括的幾何物件的座標，樣式，屬性欄位值等
            //     * @param apiInstance api
            //     * @param wkt wkt
            //     * @param style 樣式
            //     * @param sr 空間參考
            //     * @param attributes 屬性欄位值（可空）
            let graphic = mapUtil.geometry.wktToPolygonGraphic(this.apiInstance, wkt, style, this.mapView.spatialReference, null);

            //把圖形新增到地圖的圖形集合
            //PS：圖形要在地圖上顯示，可以新增到兩種地方。一是mapView的graphics，這是地圖的圖形容器。第二是建立圖形圖層（GraphicsLayer），然後把圖形加入到圖層裡
            this.mapView.graphics.add(graphic);
        },