arcgis jsapi接口入門系列（4）：用代碼在地圖畫點線面

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