Uncaught TypeError: невозможно прочитать свойство «on» неопределенного в arcgis

я пытаюсь отобразить инструмент навигации и переключить базовую карту. По отдельности оба работают хорошо, когда я комбинирую его, показывая ошибку неперехваченного типа: не удается прочитать свойство «on» неопределенного. может ли кто-нибудь сказать мне, в чем ошибка

   <!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></title>

      <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">    
      <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
      <style> 
        html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; }
        #switch{
        position:absolute;
        right:20px; 
        top:10px; 
        z-Index:999;
        }
        #basemapGallery{
        width:380px;
        height:280px; 
        }
         #HomeButton {
          position: absolute;
          top: 95px;
          left: 20px;
          z-index: 50;
        }
         #navToolbar{
             display: block;
             position: absolute;
             z-index: 2;
             top: 10px;
            left:2px
          }
          .zoominIcon {
           display: block;
            position: absolute;
            width: 16px;
            height: 16px;
          }

          .zoomoutIcon {
            position: absolute;
            width: 16px;
            height: 16px;
          }

          .zoomfullextIcon {
            position: absolute;
            width: 16px;
            height: 16px;
          }

          .zoomprevIcon {
            position: absolute;
            width: 16px;
            height: 16px;
          }

          .zoomnextIcon {
            position: absolute;
            width: 16px;
            height: 16px;
          }

          .panIcon {
            position: absolute;
            width: 16px;
            height: 16px;
          }

          .deactivateIcon {
            position: absolute;
            width: 16px;
            height: 16px;
          }
      </style> 

      <script src="https://js.arcgis.com/3.15/"></script>
      <script> 
        var map;
        require([
          "esri/map",
          "esri/dijit/BasemapGallery",
           "esri/dijit/HomeButton",
           "esri/toolbars/navigation",
            "dojo/on",
             "dojo/parser",
            "dijit/registry",
            "dijit/Toolbar",
            "dijit/form/Button",
          "dojo/domReady!"
        ], function(
          Map, 
          BasemapGallery,
          HomeButton,
          Navigation, 
          on,
          parser,
          registry
        ) {

      parser.parse();

            var navToolbar;
          map = new Map("map", {
            basemap: "topo",
            center: [-105.255, 40.022],
            zoom: 13,
            slider:false
          });

          //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.on('load',function(){
            basemapGallery.remove('basemap_1');
             basemapGallery.remove('basemap_2');
              basemapGallery.remove('basemap_3');
               basemapGallery.remove('basemap_4');
                basemapGallery.remove('basemap_5');
                 basemapGallery.remove('basemap_8');
          });
          basemapGallery.startup();

          basemapGallery.on("error", function(msg) {
            console.log("basemap gallery error:  ", msg);
          });
             var home = new HomeButton({
            map: map
          }, "HomeButton");
          home.startup();

           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();
              }
        });
      </script> 
    </head> 

    <body class="claro"> 

        <div id="map">
         <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 id="HomeButton"></div>
            <div id="switch" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Switch Basemap', closable:false, open:false">        
                 <div  id="basemapGallery"></div>
          </div>
        </div>

    </body> 

    </html>

arcgis arcgis-js-api
person veena hosur    schedule 07.01.2016    source источник
comment
Какая конкретная строка вызывает ошибку?   -  person Erica    schedule 07.01.2016
comment
register.byId(zoomin).on(щелчок, функция ()   -  person veena hosur    schedule 11.01.2016

Ответы (1)


arrow_upward
3
arrow_downward

parser.parse возвращает deferred в dojo 1.8+

это означает, что после

parser.parse()

ваши виджеты не обязательно созданы и готовы к тому, чтобы на них ссылались как на виджеты через dijit/registry.

Также есть это прямо из справочного руководства Dojo:

Обратите внимание, что ожидание dojo/domReady! Стрелять часто бывает недостаточно при работе с виджетами. Многие виджеты не должны быть инициализированы или доступны до тех пор, пока не будут загружены и выполнены следующие модули:

  • додзё / UACSS
  • диджит/hccss
  • додзё/парсер

Таким образом, при работе с виджетами вы обычно должны размещать свой код внутри обратного вызова dojo/ready():

вы делаете это, включая «dojo/ready» в свой требуемый массив, а затем заключая любой код виджета в

ready(function(){
    ...your widget code....
})

в вашем случае вы, вероятно, могли бы просто обернуть весь код javascript в готовую функцию

 require([
    "esri/map",
    "esri/dijit/BasemapGallery",
    "esri/dijit/HomeButton",
    "esri/toolbars/navigation",
    "dojo/on",
    "dojo/parser",
    "dijit/registry",
    "dojo/ready",
    "dijit/Toolbar",
    "dijit/form/Button",
    "dojo/domReady!"
], function(
    Map,
    BasemapGallery,
    HomeButton,
    Navigation,
    on,
    parser,
    registry,
    ready
) {
    ready(function() {
        var navToolbar;
        map = new Map("map", {
            basemap: "topo",
            center: [-105.255, 40.022],
            zoom: 13,
            slider: false
        });

...etc

Мне также нравится использовать parseOnLoad = true, который, как мне кажется, менее подвержен ошибкам (как человеческим, так и другим).

Просто поместите этот элемент скрипта над тегом скрипта arcgis js вот так

<script type="text/javascript">
var dojoConfig = {
    parseOnLoad: true
};
</script>
<script src="https://js.arcgis.com/3.15/"></script>

и избавьтесь от вызова parser.parse() в верхней части вашего скрипта.

person Ryan    schedule 11.01.2016