Javascript 在dojo.ready中调用函数
我的ArcGIS Javascript代码如下:Javascript 在dojo.ready中调用函数,javascript,dojo,arcgis-server,Javascript,Dojo,Arcgis Server,我的ArcGIS Javascript代码如下: <script type="text/javascript"> require(["dojo/ready", "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory", "dojo/_base/array", "dojo/dom-style", "dijit/registry",
<script type="text/javascript">
require(["dojo/ready",
"dgrid/OnDemandGrid",
"dgrid/Selection",
"dojo/store/Memory",
"dojo/_base/array",
"dojo/dom-style",
"dijit/registry",
"esri/map",
"esri/dijit/Popup",
"esri/dijit/PopupTemplate",
"esri/layers/FeatureLayer",
"dojo/dom-class",
"dojo/dom-construct",
"dojo/on",
"esri/InfoTemplate",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/tasks/QueryTask",
"esri/tasks/query",
"dojo/_base/declare",
"dojo/number",
"dojo/on",
"dojox/charting/Chart",
"esri/renderers/UniqueValueRenderer",
"dojo/parser",
"dojo/_base/Color",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane"
], function (
ready,
Grid,
Selection,
Memory,
array,
domStyle,
registry,
Map,
Popup,
PopupTemplate,
FeatureLayer,
domClass,
domConstruct,
on,
InfoTemplate,
SimpleLineSymbol,
SimpleFillSymbol,
QueryTask,
Query,
declare,
dojoNum,
on,
Chart,
UniqueValueRenderer,
parser
) {
ready(function() {
parser.parse();
var popup = Popup({
titleInBody: false
},domConstruct.create("div"));
// create the dgrid
window.grid = new (declare([Grid, Selection]))({
// use Infinity so that all data is available in the grid
bufferRows: Infinity,
columns: {
"FID": "FID",
"PROV": "PROV"
}
}, "grid");
// add a click listener on the ID column
grid.on(".field-id:click", selectState);
var initialExtent = new esri.geometry.Extent({"xmin":89.971,"ymin":-12.472,"xmax":144.301,"ymax":9.511,"spatialReference":{"wkid":4326}});
map = new esri.Map("map", { extent: initialExtent,infoWindow: popup});
//var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
var basemap2 = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/BaseMap/Peta_Dasar_Indonesia_Colors/MapServer",{"opacity":0.4});
map.addLayer(basemap2);
//map.addLayer(basemap);
domClass.add(window.map.infoWindow.domNode, "myTheme");
var template = new PopupTemplate({
title: "Data Luas Lahan Sawah {PROV}",
description: "of starters from {PROV} finished",
});
window.statesUrl = "http://localhost:6080/arcgis/rest/services/BaseMap/Peta_Dasar_Indonesia_Colors/MapServer/8";
window.outFields = ["FID","PROV"];
var fl = new FeatureLayer(window.statesUrl, {
id: "stat",
mode: 1, // ONDEMAND, could also use FeatureLayer.MODE_ONDEMAND
infoTemplate:template,
outFields: window.outFields
});
fl.on("load", function() {
fl.maxScale = 0; // show the states layer at all scales
fl.setSelectionSymbol(new SimpleFillSymbol().setOutline(null).setColor("#AEC7E3"));
});
fl.on("click", selectGrid);
// change cursor to indicate features are click-able
fl.on("mouse-over", function() {
map.setMapCursor("pointer");
});
fl.on("mouse-out", function() {
map.setMapCursor("default");
});
map.addLayer(fl);
map.on("load",
function addFeatureLayer() {
var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);
defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);
//create renderer
var renderer = new UniqueValueRenderer(defaultSymbol, "PROV");
//add symbol for each possible value
renderer.addValue("Banten", new SimpleFillSymbol().setColor("#00FA1D"));
renderer.addValue("Dki Jakarta", new SimpleFillSymbol().setColor("#FA0000"));
renderer.addValue("Jawa Barat", new SimpleFillSymbol().setColor("#FAFA00"));
renderer.addValue("Jawa Tengah", new SimpleFillSymbol().setColor("#00FA1D"));
renderer.addValue("Daerah Istimewa Yogyakarta", new SimpleFillSymbol().setColor("#FAFA00"));
renderer.addValue("Jawa Timur", new SimpleFillSymbol().setColor("#FAFA00"));
var template = new PopupTemplate({
title: "Data {PROV}",
description: "Data Luas Lahan Sawah {PROV}",
});
var featureLayer = new FeatureLayer("http://localhost:6080/arcgis/rest/services/BaseMap/Peta_Dasar_Indonesia_Colors/MapServer/8", {
mode: 1, // ONDEMAND, could also use FeatureLayer.MODE_ONDEMAND
infoTemplate:template,
outFields: window.outFields
});
featureLayer.setRenderer(renderer);
map.addLayer(featureLayer);
} ,
function( evt ){
// show the border container now that the dijits
// are rendered and the map has loaded
domStyle.set(registry.byId("container").domNode, "visibility", "visible");
populateGrid(Memory); // pass a reference to the MemoryStore constructor
});
function populateGrid(Memory) {
var qt = new QueryTask(window.statesUrl);
var query = new Query();
query.where = "1=1";
query.returnGeometry = false;
query.outFields = window.outFields;
qt.execute(query, function(results) {
var data = array.map(results.features, function(feature) {
return {
// property names used here match those used when creating the dgrid
"FID": feature.attributes[window.outFields[0]],
"PROV": feature.attributes[window.outFields[1]]
}
});
var memStore = new Memory({ data: data });
window.grid.set("store", memStore);
});
}
// fires when a row in the dgrid is clicked
function selectState(e) {
// select the feature
var fl = map.getLayer("stat");
var query = new Query();
query.objectIds = [parseInt(e.target.innerHTML)];
fl.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(result) {
if ( result.length ) {
// re-center the map to the selected feature
window.map.centerAt(result[0].geometry.getExtent().getCenter());
} else {
console.log("Feature Layer query returned no features... ", result);
}
});
}
// fires when a feature on the map is clicked
function selectGrid(e) {
var profinsi = e.graphic.attributes.PROV;
var id = e.graphic.attributes.FID;
// select the feature that was clicked
var query = new Query();
query.objectIds = [id];
var states = map.getLayer("stat");
states.selectFeatures(query, FeatureLayer.SELECTION_NEW);
// select the corresponding row in the grid
// and make sure it is in view
grid.clearSelection();
grid.select(id);
}
function test(){
alert("alert");
}
});
});
</script>
我想在dojo.ready函数中调用函数。例如,我想用onclick调用函数测试,如下所示:
<input type="submit" value="Submit" onclick="test();">
但仍然不起作用。
有人能帮我解释一下如何在dojo.ready中调用函数吗?这是因为在文档中编写事件处理程序是一种不好的做法。如果在函数中添加函数,它们的作用域就是该函数,也就是说,它们只能从ready函数中访问,而不能从HTML页面的DOM=中访问 正常情况下:按钮看不到功能测试 您可以通过两种方式解决此问题: 第一种方法是通过将测试函数移出ready回调或用以下方法替换该函数来全局确定测试函数的作用域:
test = function() {
alert("alert");
};
因为您没有将var放在测试变量前面,这意味着它现在是全局范围的,这意味着可以从DOM访问它。然而,我不建议这样做,这被认为是一种不好的做法。通过谷歌搜索为什么全局变量不好javascript,您可以大致了解它不好的原因
第二种可能是通过使用dojo/on模块或dojo/query模块将事件声明本身移动到就绪范围中,例如:
require(["dojo/ready", "dojo/query"], function(ready, query) {
ready(function() {
query("input[type=\"submit\"]").on("click", test);
function test() {
alert("test");
}
});
});
和一个JSFiddle:
这可以被认为是一种更好的做法,因为您不使用全局名称空间,并且可以定义事件处理程序。这是因为在文档中编写事件处理程序是一种不好的做法。如果在函数中添加函数,它们的作用域就是该函数,也就是说,它们只能从ready函数中访问,而不能从HTML页面的DOM=中访问 正常情况下:按钮看不到功能测试 您可以通过两种方式解决此问题: 第一种方法是通过将测试函数移出ready回调或用以下方法替换该函数来全局确定测试函数的作用域:
test = function() {
alert("alert");
};
因为您没有将var放在测试变量前面,这意味着它现在是全局范围的,这意味着可以从DOM访问它。然而,我不建议这样做,这被认为是一种不好的做法。通过谷歌搜索为什么全局变量不好javascript,您可以大致了解它不好的原因
第二种可能是通过使用dojo/on模块或dojo/query模块将事件声明本身移动到就绪范围中,例如:
require(["dojo/ready", "dojo/query"], function(ready, query) {
ready(function() {
query("input[type=\"submit\"]").on("click", test);
function test() {
alert("test");
}
});
});
和一个JSFiddle:
这可以被认为是一种更好的做法,因为您没有使用全局名称空间,可以定义事件处理程序。您是否尝试过使用dojo小部件定义输入字段。或者,我认为您需要在dojo.ready函数中注册事件处理程序。您是否尝试过使用dojo小部件定义输入字段。或者,我认为您需要在dojo.ready函数中注册事件处理程序。嘿,它成功了。谢谢您的回答和解释。Dimitri:Dhey,它成功了。谢谢您的回答和解释