未捕获的类型错误:无法读取 arcgis 中未定义的属性“on" [英] Uncaught TypeError: Cannot read property 'on' of undefined in arcgis

查看：39 发布时间：2021/11/17 1:37:09 arcgis arcgis-js-api

本文介绍了未捕获的类型错误:无法读取 arcgis 中未定义的属性“on"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试显示导航工具和切换底图.当我将它组合起来时，两者都运行良好，显示未捕获类型错误:无法读取未定义的属性on".谁能告诉我什么是错误

 <头><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"><风格>html, body, #map { 高度: 100%;宽度:100%；边距:0；填充:0；}#转变{位置:绝对；右:20px；顶部:10px；z-索引:999；}#底图画廊{宽度:380px；高度:280px；}#HomeButton {位置:绝对；顶部:95px；左:20px；z-索引:50；}#导航工具栏{显示:块；位置:绝对；z-索引:2；顶部:10px；左:2px}.zoominIcon {显示:块；位置:绝对；宽度:16px；高度:16px；}.zoomoutIcon {位置:绝对；宽度:16px；高度:16px；}.zoomfullextIcon {位置:绝对；宽度:16px；高度:16px；}.zoomprevIcon {位置:绝对；宽度:16px；高度:16px；}.zoomnextIcon {位置:绝对；宽度:16px；高度:16px；}.panIcon {位置:绝对；宽度:16px；高度:16px；}.deactivateIcon {位置:绝对；宽度:16px；高度:16px；}</风格><script src="https://js.arcgis.com/3.15/"></script><脚本>无功地图；要求(["esri/地图","esri/dijit/BasemapGallery","esri/dijit/HomeButton","esri/工具栏/导航","道场/上","道场/解析器","dijit/注册表","dijit/工具栏","dijit/表单/按钮",道场/domReady！"]， 功能(地图，底图画廊，主页按钮，导航，在，解析器，登记处){parser.parse();var 导航工具栏；地图 = 新地图(地图"，{底图:地形"，中心:[-105.255, 40.022]，缩放:13，滑块:假});//添加底图库，在这种情况下，我们将显示来自 ArcGIS.com 的地图，包括 bing 地图var basemapGallery = new BasemapGallery({showArcGISBasemaps: 真,地图:地图}, "底图画廊");basemapGallery.on('加载',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(错误"，函数(味精){console.log("底图库错误:", msg);});var home = new HomeButton({地图:地图}, "HomeButton");家.启动()；navToolbar = 新导航(地图)；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("点击", 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();});函数extentHistoryChangeHandler(){registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();registry.byId("zoomnext").disabled = navToolbar.isLastExtent();}});<body class="claro"><div id="地图"><div id="navToolbar" data-dojo-type="dijit/Toolbar"><div data-dojo-type="dijit/form/Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon'">放大</div><div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'">缩小</div><div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'">全图</div><div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'">上一个范围</div><div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'">下一个范围</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 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>

解决方案

parser.parse 在 dojo 1.8+ 中返回延迟

这意味着之后

parser.parse()

您的小部件不一定已实例化并准备好通过 dijit/registry 被引用为小部件.

还有这直接来自 Dojo 参考指南:

<块引用>

注意等待 dojo/domReady！使用小部件时，触发通常是不够的.在以下模块加载和执行之前，不应初始化或访问许多小部件:

道场/uacss
dijit/hccss
道场/解析器

因此，在使用小部件时，您通常应该将代码放在 dojo/ready() 回调中:

您可以通过在 require 数组中包含dojo/ready"，然后在

中包装任何小部件代码来实现此目的

ready(function(){...您的小部件代码....})

在您的情况下，您可能只需将整个 javascript 代码包装在一个现成的函数中

 要求(["esri/地图","esri/dijit/BasemapGallery","esri/dijit/HomeButton","esri/工具栏/导航","道场/上","道场/解析器","dijit/注册表","道场/准备就绪","dijit/工具栏","dijit/表单/按钮",道场/domReady！"]， 功能(地图，底图画廊，主页按钮，导航，在，解析器，注册表，准备好){准备好(功能(){var 导航工具栏；地图 = 新地图(地图"，{底图:地形"，中心:[-105.255, 40.022]，缩放:13，滑块:假});...等等

我也喜欢使用 parseOnLoad = true，我发现它不太容易出错(无论是人为还是其他)

像这样把这个脚本元素放在arcgis js脚本标签之上

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

并去掉脚本顶部对 parser.parse() 的调用.

i am trying to display navigation tool and switch base map.Individually both are working good when i combine it its showing Uncaught Type Error: Cannot read property 'on' of undefined.can any tell me what is the mistake

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

解决方案

parser.parse returns a deferred in dojo 1.8+

what this means is that after

parser.parse()

your widgets are not necessarily instantiated and ready to be referenced as widgets via dijit/registry.

Also there is this is directly from the Dojo reference guide:

Note that waiting for dojo/domReady! to fire is often not sufficient when working with widgets. Many widgets shouldn’t be initialized or accessed until the following modules load and execute:

dojo/uacss

dijit/hccss

dojo/parser

Thus when working with widgets you should generally put your code inside of a dojo/ready() callback:

you do this by including "dojo/ready" in your require array and then wrapping any widget code in

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

in your case you could probably just wrap your entire javascript code in a ready function

 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

I also like to use parseOnLoad = true which I find to be less prone to errors (both human and otherwise)

Just put this script element above the arcgis js script tag like so

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

and get rid of the call to parser.parse() at the top of your script.

这篇关于未捕获的类型错误:无法读取 arcgis 中未定义的属性“on"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

未捕获的类型错误:无法读取 arcgis 中未定义的属性“on" [英] Uncaught TypeError: Cannot read property 'on' of undefined in arcgis

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

未捕获的类型错误:无法读取 arcgis 中未定义的属性“on" [英] Uncaught TypeError: Cannot read property &#39;on&#39; of undefined in arcgis

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

未捕获的类型错误:无法读取 arcgis 中未定义的属性“on" [英] Uncaught TypeError: Cannot read property 'on' of undefined in arcgis

登录关闭