在esri javascript api中添加导航栏时，底图库不起作用

时间：2018-01-19 01:58:36

标签： esri-javascript-api

我是ArcGIS JavaScript API编程的新手，我正在尝试使用底图库实现导航工具栏，但是我收到以下错误：

Uncaught Error: Tried to register widget with id==map but that id is already registered

我试图破坏小部件，但仍无效。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
    <title>Tabs inside accordion</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dojox/layout/resources/ExpandoPane.css">
    <link rel="stylesheet" href="css/layout.css">

    <style>
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            padding: 0;
        }

        .zoominIcon {
            background-image: url(images/nav_zoomin.png);
            width: 16px;
            height: 16px;
        }

        .zoomfullextIcon {
            background-image: url(images/nav_fullextent.png);
            width: 16px;
            height: 16px;
        }

        .zoomprevIcon {
            background-image: url(images/nav_previous.png);
            width: 16px;
            height: 16px;
        }

        .zoomnextIcon {
            background-image: url(images/nav_next.png);
            width: 16px;
            height: 16px;
        }

        .panIcon {
            background-image: url(images/nav_pan.png);
            width: 16px;
            height: 16px;
        }

        .identifyIcon {
            background-image: url(images/info_blue2.png);
            width: 16px;
            height: 16px;
        }
    </style>

    <script src="https://js.arcgis.com/3.23/"></script>
    <script>

    var map,   navToolbar;
    require([
      "esri/map",
      "esri/dijit/BasemapGallery",
      "esri/arcgis/utils",
      "dojo/parser",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/layout/TabContainer",
      "dijit/layout/AccordionContainer",
      "dojox/layout/ExpandoPane",
      "dijit/TitlePane",
      "esri/toolbars/navigation",
      "dojo/on",
      "dijit/registry",
      "dijit/Toolbar",
      "dijit/form/Button",
      "dojo/domReady!"
    ],

    function(Map, BasemapGallery, arcgisUtils,parser,Navigation,on,registry,navToolbar)
      {
      parser.parse();

        map = new Map("map", {
          basemap: "topo",
          center: [73.88381, 10.5327242],
          zoom: 7
        });

          navToolbar = new Navigation(map);
          on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

          registry.byId("zoomin").on("click", function () {
            navToolbar.activate(Navigation.ZOOM_IN);
          });

          registry.byId("zoomout").on("click", function () {
            navToolbar.activate(Navigation.ZOOM_OUT);
          });

          registry.byId("zoomfullext").on("click", function () {
            navToolbar.zoomToFullExtent();
          });

          registry.byId("zoomprev").on("click", function () {
            navToolbar.zoomToPrevExtent();
          });

          registry.byId("zoomnext").on("click", function () {
            navToolbar.zoomToNextExtent();
          });

          registry.byId("pan").on("click", function () {
            navToolbar.activate(Navigation.PAN);
          });

          registry.byId("deactivate").on("click", function () {
            navToolbar.deactivate();
          });

          function extentHistoryChangeHandler () {
            registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
            registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
          }

      //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();

      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error:  ", msg);
      });
    });
    </script>
</head>

<body class="claro">
    <div class="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">
        <div id="header" data-dojo-type="dijit/layout/ContentPane" style="text-align:center;" data-dojo-props="region:'top'">

            <div style="display: width:100%;overflow:hidden;">
                <div style="float:left;"><img src="..\images\cmfri-logo.png" /></div>
                <div style="float:right;"><img src="../images/icar-logo.png" /></div>
                <div style="float:right;"><img src="../images/platinumlogo.jpg" /></div>
                <div style="float:center;text-align:center;">Indian Council of Agricultural Research<br>CENTRAL MARINE FISHERIES RESEARCH INSTITUTE</div>

            </div>
        </div>
        <div data-dojo-type="dojox/layout/ExpandoPane"
             data-dojo-props="duration:300, title:'Details', region:'left', maxWidth:'220px', easeIn:'easing.linear', easeOut:'easing.linear'"
             style="width:300px;">
            <div data-dojo-type="dijit/layout/ContentPane" style="text-align:center;" data-dojo-props="region:'left'" id="leftPane">
                <div id="navToolbar" data-dojo-type="dijit.Toolbar">
                    <div data-dojo-type="dijit/form/Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon'">Zoom In</div>
                    <div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'">Zoom Out</div>
                    <div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'">Full Extent</div>
                    <div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'">Prev Extent</div>
                    <div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'">Next Extent</div>
                    <div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'">Pan</div>
                    <div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'">Deactivate</div>
                </div>
            </div>
            <div data-dojo-type="dijit/layout/AccordionContainer">
                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Basemap Gallery'" style="width:380px; height:280px; overflow:auto;">
                    <div id="basemapGallery"></div>
                </div>
                <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Pane 2'" style="width:380px; height:280px; overflow:auto;">
                    <div data-dojo-type="dijit/layout/TabContainer">
                        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 1', selected:'true'">
                            Content for the first tab
                        </div>
                        <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Tab 2'">
                            Content for the second tab
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0;"> </div>
    </div>
</body>

</html>

1 个答案:

答案 0 :(得分：1)

这里的问题只是你在require函数中犯了一个错误。您添加了与任何库都不匹配的navToolbar变量。此外，订单重要，相应的变量必须与库具有相同的位置。 试试这个：

require([
  "esri/map",
  "esri/dijit/BasemapGallery",
  "esri/arcgis/utils",
  "dojo/parser",
  "esri/toolbars/navigation",
  "dojo/on",
  "dijit/registry",
  "dijit/Toolbar",
  "dijit/layout/BorderContainer",
  "dijit/layout/ContentPane",
  "dijit/layout/TabContainer",
  "dijit/layout/AccordionContainer",
  "dojox/layout/ExpandoPane",
  "dijit/TitlePane",
  "dijit/form/Button",
  "dojo/domReady!"
],

function(Map, BasemapGallery, arcgisUtils,parser,Navigation,on,registry)
  {

它适用于我，这是一个代码示例的工作示例： Plunker

希望它有所帮助！

相关问题
最新问题