我在页面中下拉,当下拉值更改了地图的内容,即要加载的数据应该更改。它第一次成功加载但是再次更改时它没有改变。我是ArcGis地图的新用户,想要重新加载地图。尝试了几种方法,但这没有用。以下是我的代码,请建议解决此问题的方法。
require([
"esri/map",
"esri/TimeExtent", "esri/dijit/TimeSlider",
"esri/geometry/Point",
"esri/symbols/PictureMarkerSymbol", "esri/graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/Polyline",
"dojo/_base/array", "dojo/dom", "dojo/domReady!"
], function (
Map, TimeExtent, TimeSlider,
Point, PictureMarkerSymbol, Graphic,
GraphicsLayer, Polyline,
arrayUtils, dom
) {
var globalLocationArray = //my json data with latitude and longitude
var map;
var longitude = 96.07677;
var latitude = 16.97986;
var point = new Point(longitude, latitude);
var layer = new GraphicsLayer();
var layer1 = new GraphicsLayer();
map = new Map("mapDiv", {
basemap: "osm",
center: point, // longitude, latitude
zoom: 7,
maxZoom: 15,
minZoom: 3,
});
map.on("load", function () {
map.infoWindow.resize(250, 100);
//layer.clear();
//layer1.clear();
//map.removeLayer(layer)
//map.removeLayer(layer1)
//map.refresh();
//map.setExtent(map.extent)
});
layer1.on("click", function (evt) {
console.log(evt);
map.infoWindow.setTitle("Information");
var dataDisplay ="Contents";
map.infoWindow.setContent(dataDisplay);
map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
});
function createMarker(longitude, latitude, externalCause, date) {
var point = new Point(longitude, latitude);
point = esri.geometry.geographicToWebMercator(point);
var symbol;
if (externalCause == "SUCCESS") {
symbol = new PictureMarkerSymbol(
"http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png", 32, 32)
.setOffset(0, 15);
} else {
symbol = new PictureMarkerSymbol(
"http://static.arcgis.com/images/Symbols/Shapes/RedPin1LargeB.png", 32, 32)
.setOffset(0, 15);
}
//var symbol= symbol = new PictureMarkerSymbol("http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png", 32, 32).setOffset(0, 15);
var graphic = new esri.Graphic(point, symbol);
layer1.add(graphic);
}
function createPolyLine(sourcePoint, destPoint) {
var point1 = new Point(sourcePoint[0], sourcePoint[1]);
var point2 = new Point(destPoint[0], destPoint[1]);
var line = new esri.geometry.Polyline();
var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 255, 0.5]), 3);
line.addPath([point1, point2]);
var graphic = new Graphic(line, lineSymbol);
layer.add(graphic);
}
function drawGeoMap(data) {
console.info(data);
for (var row in data) {
var rowObj = createObject(data[row]);
createMarker(rowObj.long, rowObj.lat, rowObj.externalCause, rowObj.date,rowObj.cellName,rowObj.bts);
createMarker(rowObj.sbLong, rowObj.sbLat, rowObj.sbExternalCause, rowObj.sbDate,rowObj.sbCellName,rowObj.sbBts);
createPolyLine([rowObj.long, rowObj.lat], [rowObj.sbLong, rowObj.sbLat]);
}
map.addLayer(layer);
map.addLayer(layer1);
}
function createObject(rowData) {
var count = 0;
var obj = {
sbLat: rowData[count++],
sbLong: rowData[count++],
sbExternalCause: rowData[count++],
sbDate: rowData[count++],
sbCellName: rowData[count++],
sbBts: rowData[count++],
lat: rowData[count++],
long: rowData[count++],
externalCause: rowData[count++],
date: rowData[count++],
cellName: rowData[count++],
bts: rowData[count++]
};
return obj;
}
initSlider();
function initSlider() {
var timeSlider = new TimeSlider({
style: "width: 100%;"
}, dom.byId("timeSliderDiv"));
var timeExtent = new TimeExtent();
timeExtent.startTime = new Date("2/14/2015");
timeExtent.endTime = new Date("2/15/2015");
timeSlider.setThumbCount(2);
timeSlider.createTimeStopsByTimeInterval(timeExtent, 30, "esriTimeUnitsMinutes");
timeSlider.setThumbIndexes([0, 1]);
timeSlider.setThumbMovingRate(2000);
timeSlider.startup();
//add labels for every other time stop
var labels = arrayUtils.map(timeSlider.timeStops, function (timeStop, i) {
console.log(timeStop)
if (i % 2 === 0) {
var minutes;
if (timeStop.getMinutes() < 10) {
minutes = "0" + timeStop.getMinutes();
} else {
minutes = timeStop.getMinutes();
}
return timeStop.getHours() + ":" + minutes;
} else {
return "";
}
});
timeSlider.setLabels(labels);
timeSlider.on("time-extent-change", function (evt) {
layer.clear();
layer1.clear();
map.infoWindow.hide();
var startMinutes;
var endminutes;
if (new Date(evt.startTime).getMinutes() < 10) {
startMinutes = "0" + new Date(evt.startTime).getMinutes();
} else {
startMinutes = new Date(evt.startTime).getMinutes();
}
if (new Date(evt.endTime).getMinutes() < 10) {
endminutes = "0" + new Date(evt.endTime).getMinutes();
} else {
endminutes = new Date(evt.endTime).getMinutes();
}
var startValString = new Date(evt.startTime).getHours() + ":" + startMinutes;
var endValString = new Date(evt.endTime).getHours() + ":" + endminutes;
var start=globalArrayWithLocationAndImsi.length;
var end = 0
for(var i=0;i<globalArrayWithLocationAndImsi.length;i++)
{
var srt = parseInt(globalArrayWithLocationAndImsi[i].start.split(' ')[1].split(':')[0])
if(srt>= new Date(evt.startTime).getHours() && srt<=new Date(evt.endTime).getHours())
{
console.log(srt);
console.log(globalArrayWithLocationAndImsi[i].start);
if(start>i)
{
start=i;
}
if(end<i)
{
end=i;
}
}
}
console.log(start);
console.log(end);
for (var j = start; j < end; j++) {
drawGeoMap([[globalArrayWithLocationAndImsi[j].latitude, globalArrayWithLocationAndImsi[j].longitude, globalArrayWithLocationAndImsi[j].externalCause, globalArrayWithLocationAndImsi[j].timeStamp1,globalArrayWithLocationAndImsi[j].cellName, globalArrayWithLocationAndImsi[j].bts,globalArrayWithLocationAndImsi[j + 1].latitude, globalArrayWithLocationAndImsi[j + 1].longitude, globalArrayWithLocationAndImsi[j + 1].externalCause, globalArrayWithLocationAndImsi[j + 1].timeStamp1,globalArrayWithLocationAndImsi[j+1].cellName, globalArrayWithLocationAndImsi[j+1].bts]]);
}
dom.byId("daterange").innerHTML = "<i>" + startValString + " and " + endValString + "<\/i>";
});
}
});
还需要刷新时间范围。注意:当下拉列表发生变化时,我会调用上面的整个函数。请建议一种刷新要加载到arcGIS地图的内容的方法。提前谢谢