JavaScript-将图形添加到现有的Arcgis地图

时间:2018-08-24 05:12:58

标签: arcgis arcgis-js-api

我有一个使用以下代码创建的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>

Jsfiddle-http://jsfiddle.net/L1peybqh/

1 个答案:

答案 0 :(得分:0)

我在问题中提到的根本问题是,我应该能够通过单击按钮将图形添加到地图。我错误地实现了ArcGIS API,应该将事件侦听器添加到所需的函数中。我最终得到的简化代码看起来像这样。


         

<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>