如何在需要回调之外访问 ArcGIS JavaScript API?
How to access ArcGIS JavaScript API outside of require callback?
我想弄清楚如何在地图渲染后从地图访问 ArCGIS JS API,在 require
之外(ArcGIS JS API 使用 Dojo ).例如,这样我就可以执行添加(或删除)点之类的操作,并在地图上执行其他操作。
我可以创建如下地图:
require(["esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic",
"esri/layers/GraphicsLayer"
], function(esriConfig, Map, MapView, Graphic, GraphicsLayer) {
esriConfig.apiKey = "";
const map = new Map({
basemap: "arcgis-topographic"
});
const view = new MapView({
map: map,
center: [-81, 41],
zoom: 9,
container: "viewDiv"
});
});
我可以用这个函数加点:
function plotPoint(lat, long, props) {
const popupTemplate = {
title: "{Name}",
content: "{Description}"
}
const attributes = {
Name: props.name,
Description: props.desc
}
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
const point = {
type: "point",
longitude: long,
latitude: lat
};
const simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40],
outline: {
color: [255, 255, 255],
width: 1
}
};
const pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol,
attributes: attributes,
popupTemplate: popupTemplate
});
graphicsLayer.add(pointGraphic);
}
但是 plotPoint
需要在 require
回调中,以便它可以访问引用的模块(如 GraphicsLayer
)。我可以将它分配给全局 window
对象,这样我就可以在 require 之外调用它,但是我可能 运行 会遇到函数在定义之前被调用的问题。
我可能还需要从代码中的其他点执行其他操作,例如删除点、添加要素层等。不幸的是,这些都必须存在于一些遗留代码中,所以我无法重构整个应用程序.
是否有更好的模式来访问 require
之外的 API?
我认为,如果我理解正确的话,实现您想要的最简单方法就是定义模块并将其包含在您的应用程序中。
基于您的代码的一个简单示例如下所示,
GraphicsManager.js
define([
"dojo/_base/declare",
"esri/Graphic",
"esri/layers/GraphicsLayer"
], function(declare, Graphic, GraphicsLayer){
return declare(null, {
plotPoint: function(lat, long, props){
// .. here the logic
return graphicsLayer;
}
});
});
main.js
require(["esri/config", "esri/Map", "esri/views/MapView", "app/GraphicsManager"
], function(esriConfig, Map, MapView, GraphicsManager) {
esriConfig.apiKey = "";
const map = new Map({
basemap: "arcgis-topographic",
});
const view = new MapView({
map: map,
center: [-81, 41],
zoom: 9,
container: "viewDiv"
});
// ... some logic to get the point data
const gm = new GraphicsManager();
map.add(gm.plotPoint(lat, long, props));
// .. some other logic
});
在那里你看到 main.js 是应用程序启动的地方,在那里或在其他模块中设置东西。你知道,地图、图层、小部件等。
然后你在模块中有你的其他代码,并根据需要使用导入它们。
我想弄清楚如何在地图渲染后从地图访问 ArCGIS JS API,在 require
之外(ArcGIS JS API 使用 Dojo ).例如,这样我就可以执行添加(或删除)点之类的操作,并在地图上执行其他操作。
我可以创建如下地图:
require(["esri/config", "esri/Map", "esri/views/MapView", "esri/Graphic",
"esri/layers/GraphicsLayer"
], function(esriConfig, Map, MapView, Graphic, GraphicsLayer) {
esriConfig.apiKey = "";
const map = new Map({
basemap: "arcgis-topographic"
});
const view = new MapView({
map: map,
center: [-81, 41],
zoom: 9,
container: "viewDiv"
});
});
我可以用这个函数加点:
function plotPoint(lat, long, props) {
const popupTemplate = {
title: "{Name}",
content: "{Description}"
}
const attributes = {
Name: props.name,
Description: props.desc
}
const graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
const point = {
type: "point",
longitude: long,
latitude: lat
};
const simpleMarkerSymbol = {
type: "simple-marker",
color: [226, 119, 40],
outline: {
color: [255, 255, 255],
width: 1
}
};
const pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol,
attributes: attributes,
popupTemplate: popupTemplate
});
graphicsLayer.add(pointGraphic);
}
但是 plotPoint
需要在 require
回调中,以便它可以访问引用的模块(如 GraphicsLayer
)。我可以将它分配给全局 window
对象,这样我就可以在 require 之外调用它,但是我可能 运行 会遇到函数在定义之前被调用的问题。
我可能还需要从代码中的其他点执行其他操作,例如删除点、添加要素层等。不幸的是,这些都必须存在于一些遗留代码中,所以我无法重构整个应用程序.
是否有更好的模式来访问 require
之外的 API?
我认为,如果我理解正确的话,实现您想要的最简单方法就是定义模块并将其包含在您的应用程序中。
基于您的代码的一个简单示例如下所示,
GraphicsManager.js
define([
"dojo/_base/declare",
"esri/Graphic",
"esri/layers/GraphicsLayer"
], function(declare, Graphic, GraphicsLayer){
return declare(null, {
plotPoint: function(lat, long, props){
// .. here the logic
return graphicsLayer;
}
});
});
main.js
require(["esri/config", "esri/Map", "esri/views/MapView", "app/GraphicsManager"
], function(esriConfig, Map, MapView, GraphicsManager) {
esriConfig.apiKey = "";
const map = new Map({
basemap: "arcgis-topographic",
});
const view = new MapView({
map: map,
center: [-81, 41],
zoom: 9,
container: "viewDiv"
});
// ... some logic to get the point data
const gm = new GraphicsManager();
map.add(gm.plotPoint(lat, long, props));
// .. some other logic
});
在那里你看到 main.js 是应用程序启动的地方,在那里或在其他模块中设置东西。你知道,地图、图层、小部件等。 然后你在模块中有你的其他代码,并根据需要使用导入它们。