Я новичок в Dojo и javascript api arcgis. Я хочу разработать веб-сайт с использованием dojo и javascript api. В проекте используются такие виджеты, как закладки, измерения. эти инструменты работают правильно, но когда я не могу использовать виджет направления при добавлении в проект. виджет направления не загружается должным образом, и я получаю следующую ошибку
init.js: 113 TypeError: Невозможно прочесть свойство «length» из undefined (…) «TypeError: Невозможно прочесть свойство« length »из undefined
Как я могу решить проблему?
<!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>Identify with Popup</title>
<style>
html, body, #map {
height:100%;
width:100%;
margin:0;
padding:0;
}
</style>
<title></title>
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css">
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.17/3.17/dojox/layout/resources/ExpandoPane.css">
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.17/3.17/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.17/3.17/dojox/layout/resources/ResizeHandle.css">
<link rel="stylesheet" href="http://localhost/arcgis_js_api/MyStyles2.css">
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/agsjs/css/agsjs.css" />
<script src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
<script>
var map,toc,tb,queryTask;
var theme = "Wetland";
require(["esri/map","agsjs/dijit/TOC", "esri/layers/ArcGISTiledMapServiceLayer","esri/layers/FeatureLayer", "esri/dijit/Legend","dojo/_base/array", "dojo/parser","esri/dijit/OverviewMap"
,"esri/dijit/Scalebar","esri/toolbars/navigation","dijit/registry","dojo/on","esri/tasks/GeometryService","esri/SpatialReference","esri/tasks/ProjectParameters","dojo/dom","esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/ImageParameters","esri/dijit/Geocoder","esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/geometry/screenUtils","dojo/dom-construct", "dojo/query","dojo/_base/Color","esri/dijit/Search", "esri/layers/FeatureLayer"
,"esri/InfoTemplate", "dijit/layout/AccordionContainer","dijit/layout/ContentPane","dijit/layout/BorderContainer","esri/Color","dojo/keys","esri/config","esri/sniff","esri/SnappingManager", "esri/dijit/Measurement",
"dojo/dom-construct","dojo/dom-class","esri/symbols/SimpleFillSymbol","esri/symbols/SimpleLineSymbol","esri/tasks/IdentifyTask","esri/tasks/IdentifyParameters","esri/dijit/Popup", "dojo/_base/array","dojo/_base/connect","esri/symbols/PictureFillSymbol","esri/symbols/CartographicLineSymbol",
"esri/graphic","esri/toolbars/draw","esri/dijit/InfoWindow","esri/renderers/SimpleRenderer", "dijit/layout/TabContainer","dojox/charting/Chart2D", "dojox/charting/plot2d/Pie",
"dojox/charting/action2d/Highlight", "dojox/charting/action2d/MoveSlice", "dojox/charting/action2d/Tooltip","dojox/charting/themes/" + theme, "dojo/dom-class","dojo/number","esri/geometry/Point","dojo/dom-style",
"dojo/fx/Toggler","dijit/form/CheckBox", "dijit/form/RadioButton","esri/dijit/Bookmarks","esri/dijit/Directions","dojo/ready",
"dojox/layout/ExpandoPane" , "dijit/Toolbar","dijit/TitlePane",
"dijit/layout/AccordionContainer","dojox/layout/FloatingPane","dijit/form/Button" ,"dojo/fx","dojo/domReady!"],
function(Map,TOC,Tiled,FeatureLayer,Legend, arrayUtils, parser,overviewmap,Scalebar,Navigation,registry,on,GeometryService,SpatialReference,ProjectParameters,dom,ArcGISDynamicMapServiceLayer,ImageParameters,Geocoder,Graphic,SimpleMarkerSymbol,
screenUtils,domConstruct, query, Color,Search,FeatureLayer,InfoTemplate,AccordionContainer,ContentPane,BorderContainer,esriColor,Keys,esriConfig, has,SnappingManager, Measurement,construct,
domClass,SimpleFillSymbol,SimpleLineSymbol,IdentifyTask, IdentifyParameters, Popup,arrayUtils,connect,PictureFillSymbol,CartographicLineSymbol,
Graphic,Draw,InfoWindow,SimpleRenderer, TabContainer,Chart2D, Pie,Highlight, MoveSlice, Tooltip,dojoxTheme, domClass,number,Point,domstyle,Toggler,CheckBox,RadioButton,Bookmark,Directions,Ready) {
Ready(function () {
parser.parse();
// Close Sidebar - remove draggable Splitter
function toggleSidebar(appLayout, contentAccordion) {
var panelIndex = appLayout.getIndexOfChild(contentAccordion);
if (panelIndex >= 0) {
appLayout.removeChild(contentAccordion);
} else {
appLayout.addChild(contentAccordion);
}
}
//Close Sidebar - leave draggable Splitter
function toggleSidebarWidth(appLayout, contentAccordion) {
var size = dojo.marginBox(contentAccordion.domNode);
if (size.w > 0) {
dojo.marginBox(contentAccordion.domNode, {w: 0});
} else {
dojo.marginBox(contentAccordion.domNode, {w: 100});
}
appLayout.resize();
}
dojo.ready(function () {
var appLayout,
contentAccordion,
accordionPane1,
center,
// create the BorderContainer and attach it to our appLayout div
appLayout = new dijit.layout.BorderContainer({}, dojo.byId("appLayout"));
// create the AccordionContainer
contentAccordion = new dijit.layout.ContentPane({
region: "top",
id: "top",
splitter: "true",
minSize: "0",
duration: "125"
}, "top");
tab1top = new dijit.layout.TabContainer(
{
attachParent: "true",
title: "Draw",
tabPosition: "top",
tabStrip: "true",
id: "tab1top"
}, "tab1top");
contentAccordion.addChild(tab1top);
generaltools = new dijit.layout.ContentPane({
title: "General Tools",
id: "generaltools"
}, 'generaltools');
tab1top.addChild(generaltools);
/////
generaltools2 = new dijit.layout.ContentPane({
title: "Genera2 Tools",
id: "generaltools2"
}, 'generaltools2');
tab1top.addChild(generaltools2);
////
// add the AccordionContainer to the BorderContainer
appLayout.addChild(contentAccordion);
// create the TabContainer
center = new dijit.layout.ContentPane({
region: "center",
id: "center"
}, "center");
/// rightpane
rightpane = new dijit.layout.ContentPane({
region: "right",
id: "right",
style: "width:250px"
}, "rightpane");
appLayout.addChild(rightpane);
contentAccordionleft = new dojox.layout.ExpandoPane({
region: "left",
id: "left",
splitter: "true",
minSize: "0"
}, "left");
tab1 = new dijit.layout.TabContainer(
{
attachParent: "true",
tabPosition: "bottom",
tabStrip: "true",
id: "tab1"
}, "tab1");
contentAccordionleft.addChild(tab1);
appLayout.addChild(contentAccordionleft);
// contentAccordion.addChild(accordionPaneleft);
contentpanetab1 = new dijit.layout.ContentPane({
title: "legend"
}, "contenttab1")
// add the TabContainer to the BorderContainer
appLayout.addChild(center);
// calculate and set layout
appLayout.startup();
// Add button to Tab 1
var button1 = new dijit.form.Button({
id: "addremovebtn",
style: "position:absolute;top:20px;right:40px;height:36px;",
iconClass: 'AddRemove',
onClick: function () {
toggleSidebar(appLayout, contentAccordion);
}
}, "AddRemove").placeAt("center", "last");
domstyle.set(addremovebtn.domNode, "width", "30px");
domstyle.set(addremovebtn.domNode.firstChild, "display", "block");
});
// toggler to show xy coordinate
var toggler1 = new Toggler({
node: "basicNode1"
});
var toggler2 = new Toggler({
node: "basicNode2"
});
//checkbox to check the XY coordinate
var checkBox = new CheckBox({
name: "checkBox",
value: "agreed",
checked: "true",
style: "position: absolute;left:650px;top:35px;",
onChange: function () {
toggler1.hide(), toggler2.hide();
if (dijit.byId("checkBox").checked) {
toggler1.show();
toggler2.show();
}
else {
toggler1.hide();
toggler2.hide();
}
}
}, "checkBox").startup();
//toggler to show bookmark
var togglerbook1 = new Toggler({
node: "bookmarknode"
});
//checkbox to check the XY coordinate
var BookmarkCheck = new CheckBox({
name: "checkboxbook",
value: "agreed",
checked: "true",
style: "position: absolute;left:650px;top:55px;",
onChange: function () {
togglerbook1.hide()
if (dijit.byId("BookmarkCheck").checked) {
togglerbook1.show();
}
else {
togglerbook1.hide();
}
}
}, "BookmarkCheck").startup();
domClass.add(dom.byId('mesurementID'));
// Use the info window instead of the popup.(For Pie Chart)
var infoWindow = new InfoWindow(null, domConstruct.create("div"));
infoWindow.startup();
map = new Map("map", {logo: false, infoWindow: infoWindow});
//For Pie Chart
map.infoWindow.resize(275, 275);
var template = new esri.InfoTemplate();
// Flag icons are from http://twitter.com/thefella, released under creative commons.
template.setTitle("<br> ${District}منطقه </br>");
template.setContent(getWindowContent);
var popup = new Popup({
fillSymbol: new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]))
}, domConstruct.create("div"));
var imageParameters = new ImageParameters();
imageParameters.format = "jpeg";
var tiled = new Tiled("http://...:6080/arcgis/rest/services/ol/olbasemap/MapServer");
var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://...:6080/arcgis/rest/services/layers2/MapServer");
var traffic = new ArcGISDynamicMapServiceLayer("http://...:6080/arcgis/rest/services/na/MapServer");
var statesLayer = new FeatureLayer("http://...:6080/arcgis/rest/services/Stat/MapServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: template,
outFields: ["*"]
});
map.addLayers([tiled, dynamicMapServiceLayer, statesLayer, traffic]);
//Pie chart
function getWindowContent(graphic) {
map.infoWindow.resize(275, 275);
// Make a tab container.
var tc = new TabContainer({
style: "width:100%;height:100%;"
}, domConstruct.create("div"));
// Display attribute information.
var cp1 = new ContentPane({
title: "Details",
content: "سstat" +
graphic.attributes.District + "<br>جمعیت کل : " +
graphic.attributes.TotalEdu + "<br>OBJECTID: " +
graphic.attributes.OBJECTID
});
var cp2 = new ContentPane({
title: "Pie Chart"
});
tc.addChild(cp1);
tc.addChild(cp2);
// Create the chart that will display in the second tab.
var c = domConstruct.create("div", {
id: "demoChart"
}, domConstruct.create("div"));
var chart = new Chart2D(c);
domClass.add(chart, "chart");
// Apply a color theme to the chart.
chart.setTheme(dojoxTheme);
chart.addPlot("default", {
type: "Pie",
radius: 70,
htmlLabels: true
});
tc.watch("selectedChildWidget", function (name, oldVal, newVal) {
if (newVal.title === "Pie Chart") {
chart.resize(180, 180);
}
});
// Calculate percent male/female.
var total = graphic.attributes.TotalEdu;
var educatedman = number.round(graphic.attributes.Sum_EducatedMan / total * 100, 2);
var educatedwoman = number.round(graphic.attributes.Sum_EducatedWoman / total * 100, 2);
var uneducatedman = number.round(graphic.attributes.Sum_UnEducatedMan / total * 100, 2);
var uneducatewodman = number.round(graphic.attributes.Sum_UnEducatedWoman / total * 100, 2);
chart.addSeries("PopulationSplit", [{
y: educatedman,
tooltip: "A",
// text: "educatedman"
}, {
y: educatedwoman,
tooltip: "b",
// text: "educatedwoman"
},
{
y: uneducatedman,
tooltip: "c",
// text:"uneducatedman"
},
{
y: uneducatewodman,
tooltip: "d",
// text: "uneducatewodman"
}
]);
//highlight the chart and display tooltips when you mouse over a slice.
new Highlight(chart, "default");
new Tooltip(chart, "default");
new MoveSlice(chart, "default");
cp2.set("content", chart.node);
return tc.domNode;
}
var directions = new Directions({
map: map,
routeTaskUrl: "http://...:6080/arcgis/rest/services/mobile/traffic_wgs2/NAServer/Route"
},"dir");
directions.startup();
});
});
////////////////////////////////////////////////////////////////////////////////////
</script>
</head>
<body class="claro" role="main">
<div id="appLayout" style="width:100%; height:100%;" >
</div>
<div id="rightpane">
<div id="dir"></div>
</div>
<div id="center">
<div id="map" style="background-color:#F7F3E7;width:100%;height:100% ">
<div id="bookmarknode" style="position:absolute; right:120px; top:20px; color:#000; z-index:50;background-color:navajowhite ">
<div id="bookmarks-pane"
data-dojo-type="dijit.TitlePane"
data-dojo-props="title:'Bookmarks' " open="false">
<div id="bookmark"></div>
</div>
</div>
<div id="basicNode1" style="position:absolute; left:170px; bottom:30px; color:#000; z-index:50;background-color:navajowhite ">
<span id="info1" ></span>
</div >
<div id="basicNode2" style="position:absolute; left:170px; bottom:10px; color:#000; z-index:50;background-color:navajowhite ">
<span id="info2" ></span>
</div >
</div>
<div id="search" ></div>
</div>
<div splitter="true" id="left" >
<div id="tab1">
<div id="contenttab1">
<div id="tocDiv"> </div>
</div>
<div dojoType="dijit.layout.AccordionContainer" title="جستجو" style="width:275px;" attachParent="true">
</div>
</div>
</div>
<div id="top" region="top" >
<div id="tab1top">
<div id="generaltools" >
<!--Checkbox for xy coordinate-->
<div id="checkBox"></div> <label style="position: absolute;left:680px;top:35px; " > Show/Hide Coordinates</label>
<div id="BookmarkCheck"></div> <label style="position: absolute;left:680px;top:55px; " > Show/Hide Bookmark</label>
<div title="measure " id="mesurementID" style="position:absolute; left:300px; top:10px;width: 200px;height: 80px;">
<div id="measurementDiv" locationIcon="None"> </div>
</div>
</div></div>
<div id="generaltools2">
</div>
</div>
</div>
</body>
</html>
На изображении ниже показан виджет направления в моей сети.
