代码之家 › 专栏 › 技术社区 › Ammar Ameerdeen

javascript-向现有Arcgis地图添加图形

arcgis-js-api arcgis

Ammar Ameerdeen · 技术社区 · 6 年前

我有一个使用以下代码创建的Arcgis地图。我在页面上有一个按钮,点击它可以向地图添加图形。但它抛出了一个javascript错误 "Error: Tried to register widget with id==xxx but that id is already registered" . 任何线索都是受欢迎的。

<script>
    var map;

    require([
        "esri/map",
        // Map initialization code....
        });

    function addSecond() {
        //add pre-defined geometries to map
        var polygonSymbol = new SimpleFillSymbol();

        var triangle = new Polygon({
            "rings": [
                [
                    [2426417, 8535508],
                    [4304933, 12292541],
                    [6183449, 8535508],
                    [2426417, 8535508]
                ]
            ],
            "spatialReference": {
                "wkid": 102100
            }
        });
        map.graphics.add(new Graphic(triangle, polygonSymbol));

    }
</script>

J小提琴- http://jsfiddle.net/L1peybqh/

1 回复 | 直到 6 年前

Ammar Ameerdeen 6 年前

正如我在问题中提到的,根本问题是,我应该能够在单击按钮时向地图添加图形。我错误地实现了ArcgisAPI,我应该在所需的函数中添加事件监听器。我最终得到的代码的简化版本是这样的。

<script>
    var map, editToolbar;
    var mapObj;

    require([
        "esri/map",
        "esri/toolbars/edit",
        "esri/graphic",

        "esri/geometry/Point",
        "esri/geometry/Polyline",
        "esri/geometry/Polygon",

        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/TextSymbol",

        "dojo/_base/event",
        "dojo/parser",
        "dojo/dom",
        "dojo/dom-style",
        "dijit/registry",
        "dijit/Menu",

        "dijit/form/ToggleButton",
        "dijit/form/DropDownButton",
        "dijit/CheckedMenuItem",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
    ], function (
        Map, Edit, Graphic,
        Point, Polyline, Polygon,
        SimpleLineSymbol, SimpleFillSymbol, TextSymbol,
        event, parser, dom, domStyle, registry, Menu
    ) {
            parser.parse();

            domStyle.set(registry.byId("mainWindow").domNode, "visibility", "visible");

            map = new Map("map", {
                basemap: "streets",
                center: [3.955, 59.338],
                zoom: 3
            });

            map.on("load", createToolbar);

            function addGraphics() {
                //add pre-defined geometries to map
                var polygonSymbol = new SimpleFillSymbol();

                var polygon = new Polygon({
                    "rings": [
                        [
                            [-4226661, 8496372],
                            [-3835304, 8731187],
                            [-2269873, 9005137],
                            [-1213208, 8613780]
                        ]
                    ],
                    "spatialReference": {
                        "wkid": 102100
                    }
                });
                map.graphics.add(new Graphic(polygon, polygonSymbol));
        }

             function addSecond() {

                var polygonSymbol = new SimpleFillSymbol();

                 console.log(mapObj.features[0].geometry.coordinates);
                var triangle = new Polygon({
                    "rings": 
                        mapObj.features[0].geometry.coordinates

                    ,
                    "spatialReference": {
                        "wkid": 102100
                    }
                 });

                map.graphics.add(new Graphic(triangle, polygonSymbol));
            }


            $('#x').click(function(){
                addSecond();         
            });

        });

</script>