添加其他功能时小部件不起作用
Posted
技术标签:
【中文标题】添加其他功能时小部件不起作用【英文标题】：widget not working when adding another function 【发布时间】：2016-08-10 07:48:39 【问题描述】：我是 Dojo 和 arcgis 的 javascript api 的新手。我想使用 dojo 和 javascript api 开发一个 webgis。该项目使用一些小部件，如书签、测量。这些工具可以正常工作，但是当我添加到项目时无法使用方向小部件。方向小部件未正确加载，并且出现以下错误
init.js:113 TypeError: Cannot read property 'length' of undefined(...) "TypeError: Cannot read property 'length' of 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>
下图显示了我网络中的方向小部件。
【问题讨论】：
你能创建一个 JSFiddle 吗？这显然是一个简单的 javascript 错误，但如果没有运行示例则无法找出。 【参考方案1】：我在上面的示例中进行了一些更改，并且能够看到路线小部件。 我删除了地图参数和图层，示例现在工作正常。 我在示例中使用了一个地图服务器。
<pre>
<!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="//js.arcgis.com/3.17/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="//js.arcgis.com/3.17/esri/css/esri.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 type="text/javascript" src="//js.arcgis.com/3.17"></script>
<script>
var map,toc,tb,queryTask;
var theme = "Wetland";
require(["esri/map", "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,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);
//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://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/SuperTuesdaySample/MapServer");
//var traffic = new ArcGISDynamicMapServiceLayer("http://...:6080/arcgis/rest/services/na/MapServer");
map.addLayers([dynamicMapServiceLayer]);
//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>
</pre>
这是我所看到的屏幕截图。
希望这会有所帮助。 :)
【讨论】：
谢谢。但是地图参数和图层是我webgis的核心 我无法访问图层。如果您可以共享图层的全局 url，那么我可以检查并让您知道问题背后的原因。【参考方案2】：刚刚清理了你命名为你需要的烂摊子;-)
清除sone doubles并添加缺失的部分：
require([
"agsjs/dijit/TOC",
"esri/Color",
"esri/config",
"esri/dijit/Bookmarks",
"esri/dijit/Directions",
"esri/dijit/Geocoder",
"esri/dijit/InfoWindow",
"esri/dijit/Legend",
"esri/dijit/Measurement",
"esri/dijit/OverviewMap",
"esri/dijit/Popup",
"esri/dijit/Scalebar",
"esri/dijit/Search",
"esri/geometry/Point",
"esri/geometry/screenUtils",
"esri/graphic",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/layers/ImageParameters",
"esri/InfoTemplate",
"esri/map",
"esri/renderers/SimpleRenderer",
"esri/SnappingManager",
"esri/sniff",
"esri/SpatialReference",
"esri/symbols/CartographicLineSymbol",
"esri/symbols/PictureFillSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/tasks/GeometryService",
"esri/tasks/IdentifyTask",
"esri/tasks/IdentifyParameters",
"esri/tasks/ProjectParameters",
"esri/toolbars/draw",
"esri/toolbars/navigation",
"dojo/_base/array",
"dojo/_base/connect",
"dojo/_base/Color",
"dojo/dom",
"dojo/dom-class",
"dojo/dom-construct",
"dojo/dom-style",
"dojo/fx",
"dojo/fx/Toggler",
"dojo/keys",
"dojo/number",
"dojo/on",
"dojo/parser",
"dojo/query",
"dojo/ready",
"dijit/form/Button" ,
"dijit/form/CheckBox",
"dijit/form/RadioButton",
"dijit/layout/AccordionContainer",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/layout/TabContainer",
"dijit/registry",
"dijit/TitlePane",
"dijit/Toolbar",
"dojox/charting/Chart2D",
"dojox/charting/plot2d/Pie",
"dojox/charting/action2d/Highlight",
"dojox/charting/action2d/MoveSlice",
"dojox/charting/action2d/Tooltip",
"dojox/charting/themes/" + theme,
"dojox/layout/ExpandoPane" ,
"dojox/layout/FloatingPane",
"dojo/domReady!"
],
function( TOC,
esriColor,
esriConfig,
Bookmark,
Directions,
Geocoder,
InfoWindow,
Legend,
Measurement,
overviewmap,
Popup,
Scalebar,
Search,
Point,
screenUtils,
Graphic,
Tiled,
ArcGISDynamicMapServiceLayer,
FeatureLayer,
ImageParameters,
InfoTemplate,
Map,
SimpleRenderer,
SnappingManager,
has,
SpatialReference,
CartographicLineSymbol,
PictureFillSymbol,
SimpleMarkerSymbol,
SimpleFillSymbol,
SimpleLineSymbol,
GeometryService,
IdentifyTask,
IdentifyParameters,
ProjectParameters,
Draw,
Navigation,
arrayUtils,
connect,
Color, //double
dom,
domClass,
domConstruct,
domstyle,
fx, //forgotten
Toggler,
Keys,
number,
on,
parser,
query,
Ready,
Button, // forgotten
CheckBox,
RadioButton,
AccordionContainer,
BorderContainer,
ContentPane,
TabContainer,
registry,
TitlePane, // forgotten
Toolbar, // forgotten
Chart2D,
Pie,
Highlight,
MoveSlice,
Tooltip,
dojoxTheme,
ExpandoPane, // forgotten
FloatingPane // forgotten
)
【讨论】：
以上是关于添加其他功能时小部件不起作用的主要内容，如果未能解决你的问题，请参考以下文章
PHP - Wordpress - 插件小部件更新功能 - 更新数组值 [Foreach 循环不起作用]