arcgis api for js開發（四）:繪制多邊形

arcgis api for js開發（四）:繪制多邊形

以下分3版本與4版本來寫：

1.基于arcgis api for js 3.29

核心代碼如下：

map.on("load", initToolbar);
        var queryType="";//建立類型
        //初始化畫圖工具
        function initToolbar() {
            tb = new Draw(map);
            tb.on("draw-end", addGraphic);
            //jquery方法,點選激活工具
            $("#polygonQuery").click(function (evt) {
                map.graphics.clear();
                queryType="polygon";
                    map.disableMapNavigation();
                    tb.activate(queryType);//tb.activate('polygon');
            });
            $("#pointQuery").click(function (evt) {
                map.graphics.clear();
                queryType="point";
                map.disableMapNavigation();
                tb.activate(queryType);//tb.activate('polygon');
            });
            //原生js點選事件
                // on(dom.byId("pointQuery"), "click", function(evt) {
            //     console.log(evt);
            //     map.disableMapNavigation();
            //     tb.activate('polygon');//tb.activate('polygon');
            // });
        }
        //添加到地圖
        function addGraphic(evt) {
            //deactivate the toolbar and clear existing graphics
            tb.deactivate();
            map.enableMapNavigation();
            // figure out which symbol to use
            var symbol;
            switch (queryType) {
                case "polygon":symbol=new SimpleFillSymbol();
                    map.graphics.add(new Graphic(evt.geometry, symbol));//将繪制的多邊形添加至地圖
                    break;
                case "point":symbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE,
                    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                        new Color([255,0,0]), 0),
                    new Color([0,255,0]));
                    map.graphics.add(new Graphic(evt.geometry, symbol));
                    break;
            }//繪制所的到的要素為evt.geometry
        }
           

官方執行個體位址：https://developers.arcgis.com/javascript/3/jssamples/graphics_add.html

2.基于arcgis api for js 4.11

核心代碼：

let sketchLayer = new GraphicsLayer();
            let bufferLayer = new GraphicsLayer();
           mainView.map.addMany([bufferLayer, sketchLayer]);
            //建立樣式
            let sketchGeometry = null;
            const sketchViewModel = new SketchViewModel({
                layer: sketchLayer,
                view: this.mainView,
                pointSymbol: {
                    type: "simple-marker",
                    style: "circle",
                    size: 10,
                    color: [255, 255, 255, 0.8],
                    outline: {
                        color: [211, 132, 80, 0.7],
                        size: 10
                    }
                },
                polylineSymbol: {
                    type: "simple-line",
                    color: [211, 132, 80, 0.7],
                    width: 6
                },
                polygonSymbol: {
                    //三維樣式
                    // type: "polygon-3d",
                    // symbolLayers: [
                    //     {
                    //         type: "fill",
                    //         material: {
                    //             color: [255, 255, 255, 0.8]
                    //         },
                    //         outline: {
                    //             color: [211, 132, 80, 0.7],
                    //             size: "10px"
                    //         }
                    //     }
                    // ]
                    type:"simple-fill",
                    color:[211, 132, 80,0.5],//紅綠藍和透明度

                    style: "solid",
                    outline:{
                        color:"black",
                        width:1,
                    },
                }
            });
            //綁定事件
            // document.getElementById("test1-tool").onclick = geometryButtonsClickHandler;
            // document.getElementById("polyline").onclick = geometryButtonsClickHandler;
            // document.getElementById("polygon").onclick = geometryButtonsClickHandler;
            $("#point").click(function () {
                geometryButtonsClickHandler("point");
            });
            $("#polyline").click(function () {
                geometryButtonsClickHandler("polyline");
            });
            $("#polygon").click(function () {
                geometryButtonsClickHandler("polygon");
                // $("#spatialQuery").click(function () {
                    //thisM.spatialquery(sketchGeometry);
                // });
            });
            $("#circleQuery").click(function () {
                geometryButtonsClickHandler("circle");
                //thisM.spatialquery(sketchGeometry);
            });
            $("#rectangleQuery").click(function () {
                geometryButtonsClickHandler("rectangle");
                //thisM.spatialquery(sketchGeometry);
            });
            //建立函數
            function geometryButtonsClickHandler(event) {
                sketchLayer.removeAll();
                const geometryType = event;//event.target.value;
                sketchViewModel.create(geometryType);
                sketchViewModel.on(["create"], function(event) {
                    // update the filter every time the user finishes drawing the filtergeometry
                    if (event.state == "complete") {
                        sketchGeometry = event.graphic.geometry;
                       // thisM.spatialquery(sketchGeometry)繪制完成後執行函數
                    }
                });
                // console.log(sketchGeometry);
            }
            //點選按鈕開始生成緩沖區
            let buffer = 0;
            //綁定事件
            $("#bufferbtnDiv").click(function () {
                $("#BufferDiv").fadeIn();
            });
            $("#newBuffer").click(function () {
                    $("#BufferDiv").fadeOut();
                var num=$("#bufferValue").val();
                createBuffer(num);
                });
            function createBuffer(num) {
                // var num=document.getElementById("bufferValue").value;//擷取輸入的值
                buffer = parseInt(num);
                //
                // // 生成緩沖區
                    // add a polygon graphic for the buffer
                    if (sketchGeometry) {
                        if (buffer > 0) {
                            var newBufferGeometry = geometryEngine.geodesicBuffer(
                                    sketchGeometry,
                                buffer,
                                "meters"
                            );
                            bufferGeometry = newBufferGeometry;
                            if (bufferLayer.graphics.length === 0) {
                                bufferLayer.add(
                                    new Graphic({
                                        geometry: bufferGeometry,
                                        symbol: {
                                            type:"simple-fill",
                                            color:[255, 132, 80,0.5],//紅綠藍和透明度
                                            style: "solid",
                                            outline:{
                                                color:"blue",
                                                width:1,
                                            },
                                        }
                                    })
                                );
                            }
                            thisM.spatialquery(newBufferGeometry);
                            bufferLayer.graphics.getItemAt(0).geometry = bufferGeometry;
                        } else {
                            bufferLayer.removeAll();
                        }
                    }
            }
           

官方執行個體：https://developers.arcgis.com/javascript/latest/sample-code/layers-scenelayer-feature-masking/index.html