刷新ARCGIS中的地图和图层javascript

时间:2015-06-01 06:24:55

标签: javascript arcgis arcgis-js-api

我在页面中下拉,当下拉值更改了地图的内容,即要加载的数据应该更改。它第一次成功加载但是再次更改时它没有改变。我是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地图的内容的方法。提前谢谢

0 个答案:

没有答案