fleet-contractor/Site/js/mapcontrol.js

/***********Map*******************/

if (typeof $mapcontrol !== 'object') {
    var onmaploaded = undefined;
    var onselectchanged = undefined;
    $mapcontrol = function (a, b) {
        onmaploaded = a;
        onselectchanged = b;
        loadMap();
    }
    $mapcontrol.prototype.getLocation = function () {
        return [selLatitude, selLongitude];
    }
    $mapcontrol.prototype.setLocation = function (lat, long) {
        selLatitude = lat;
        selLongitude = long;
        showPonit();
    }

    var isLoadingMap = false;
    var mapObj;
    var graphicLayer = undefined;
    var TransportationLayer = undefined;
    var GraphicC = undefined;
    var PointC = undefined;
    var PictureMarkerSymbolC = undefined;
    var UnitsC = undefined;
    var CircleC = undefined;
    var SimpleFillSymbolC = undefined;
    var ExtentC = undefined;
    var DrawC = undefined;
    var toolbar = undefined;
    var PolygonC = undefined;
    var ClusterLayerC = undefined;
    var BasemapGalleryC = undefined;
    var FontC = undefined;

    var MultipointC = undefined;
    var SimpleMarkerSymbolC = undefined;
    var SimpleLineSymbolC = undefined;
    var PolylineC = undefined;
    var ColorC = undefined;

    function loadMap() {
        require(["esri/map", "esri/graphic", "esri/geometry/Point",
            "esri/geometry/Multipoint",
            "esri/geometry/Polyline", "esri/symbols/PictureMarkerSymbol", "esri/units",
            "esri/geometry/Circle", "esri/symbols/SimpleFillSymbol", "esri/geometry/Extent", "esri/toolbars/draw", "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/geometry/Polygon",
            "extras1/clusterlayer", "esri/dijit/BasemapGallery",
            "esri/symbols/Font",
            "esri/Color", "esri/layers/ArcGISTiledMapServiceLayer"],
            function (Map, Graphic, Point, Multipoint, Polyline, PictureMarkerSymbol, Units, Circle, SimpleFillSymbol, Extent, Draw, SimpleMarkerSymbol,
                SimpleLineSymbol, SimpleFillSymbol, Polygon, clusterlayer, BasemapGallery, Font, Color, ArcGISTiledMapServiceLayer) {
                MapC = Map;
                GraphicC = Graphic;
                PointC = Point;
                PictureMarkerSymbolC = PictureMarkerSymbol;
                UnitsC = Units;
                CircleC = Circle;
                SimpleFillSymbolC = SimpleFillSymbol;
                ExtentC = Extent;
                DrawC = Draw;
                PolygonC = Polygon;
                ClusterLayerC = clusterlayer;
                BasemapGalleryC = BasemapGallery;
                FontC = Font;

                MultipointC = Multipoint;
                SimpleMarkerSymbolC = SimpleMarkerSymbol;
                SimpleLineSymbolC = SimpleLineSymbol;
                PolylineC = Polyline;
                ColorC = Color;


                mapObj = new MapC("mapdiv", {
                    basemap: "topo",
                    center: [0, 0], // longitude, latitude
                    zoom: 3
                });
                mapObj.disableKeyboardNavigation();

                dojo.connect(mapObj, "onClick", showCoordinates);
                $('div.esriControlsBR').remove();

                graphicLayer = new esri.layers.GraphicsLayer();
                mapObj.addLayer(graphicLayer);

                mapObj.on("load", function (e) {
                    $("#mapdiv_zoom_slider").css("z-index", 0);
                });

                TransportationLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/arcgis/rest/services/Reference/World_Transportation/MapServer");

                initBasemapGallery(mapObj);

                $("#basemapgalleryDiv").click(null, function (e) {
                    $("#basemapGallery").show();
                });

                if (onmaploaded)
                    onmaploaded();
                //mapObj.centerAndZoom(point, 3);
            });
    }

    function initBasemapGallery(map) {
        $(window).click(function (e) {
            if ($(e.target).attr("id") != "basemapImg")
                $("#basemapGallery").hide();
        });
        var basemap = "topo";
        $("#basemapImg").css("background-image", "url('https://js.arcgis.com/3.40/esri/images/basemap/topo.jpg')");
        $("#basemapTitle").text(GetTextByKey("P_MAP_TOPOGRAPHIC", "Topographic"));

        var basemapGallery = new BasemapGalleryC({
            showArcGISBasemaps: false,
            map: map
        }, "basemapGallery");

        var satellitemap = new esri.dijit.Basemap({
            layers: [new esri.dijit.BasemapLayer({
                url: "http://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer"
            })],
            title: GetTextByKey("P_MAP_IMAGERY", "Imagery"),
            thumbnailUrl: "https://js.arcgis.com/3.40/esri/images/basemap/satellite.jpg"
        });
        basemapGallery.add(satellitemap);

        var topomap = new esri.dijit.Basemap({
            layers: [new esri.dijit.BasemapLayer({
                url: "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"
            })],
            title: GetTextByKey("P_MAP_TOPOGRAPHIC", "Topographic"),
            thumbnailUrl: "https://js.arcgis.com/3.40/esri/images/basemap/topo.jpg"
        });
        basemapGallery.add(topomap);

        var streetmap = new esri.dijit.Basemap({
            layers: [new esri.dijit.BasemapLayer({
                //type: "OpenStreetMap",
                url: "http://server.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer"
            })],
            title: GetTextByKey("P_MAP_STREETS", "Streets"),
            thumbnailUrl: "https://js.arcgis.com/3.40/esri/images/basemap/streets.jpg"

        });
        basemapGallery.add(streetmap);

        basemapGallery.startup();

        basemapGallery.on("selection-change", function () {
            var basemap = basemapGallery.getSelected();
            if (basemap) {
                if (basemap.title == "Imagery")
                    map.addLayer(TransportationLayer);
                else
                    map.removeLayer(TransportationLayer);

                $("#basemapImg").css("background-image", "url('" + basemap.thumbnailUrl + "')");
                $("#basemapTitle").text(basemap.title);
            }
            $("#basemapGallery").hide();
        });

        basemapGallery.on("error", function (msg) {
            console.log("basemap gallery error:  ", msg);
        });
    }

    var selLatitude, selLongitude = 0;
    function showCoordinates(evt) {
        if (evt) {
            var mp = evt.mapPoint;
            selLatitude = mp.getLatitude().toFixed(6);
            selLongitude = mp.getLongitude().toFixed(6);
            showPonit();
            if (onselectchanged)
                onselectchanged(selLatitude, selLongitude);
        }
    }

    var maxLong, minLong, maxLat, minLat = null;
    function zoomMap(allMachines) {
        if (allMachines && allMachines.length > 0) {
            for (var i in allMachines) {
                var m = allMachines[i];
                if (m.Longitude == 0 && m.Latitude == 0) continue;//不计算经纬度都为0的

                if (maxLong == null || maxLong < m.Longitude)
                    maxLong = m.Longitude;
                if (minLong == null || minLong > m.Longitude)
                    minLong = m.Longitude;
                if (maxLat == null || maxLat < m.Latitude)
                    maxLat = m.Latitude;
                if (minLat == null || minLat > m.Latitude)
                    minLat = m.Latitude;
            }
            if (!jobsiteid)
                setMapExtent();
        }
    }

    function setMapExtent() {
        if (maxLong != minLong || maxLat != minLat) {//至少一个不相同
            var ext = new ExtentC();
            ext.xmax = maxLong + 0.001;
            ext.xmin = minLong - 0.001;
            ext.ymax = maxLat + 0.001;
            ext.ymin = minLat - 0.001;

            mapObj.setExtent(ext, true)
        }
    }

    function showPonit() {
        graphicLayer.clear();
        var latitude = selLatitude;
        var longitude = selLongitude;
        if (latitude == 0 && longitude == 0) return;
        var point = new esri.geometry.Point({
            latitude: latitude,
            longitude: longitude
        });

        var symbol = new esri.symbol.TextSymbol({
            color: [0xf7, 0xc0, 0x03],//#f7c003
            haloColor: "black",
            haloSize: "1px",
            text: "\uf3c5",
            xoffset: 3,
            yoffset: 3,
            font: {  // autocast as esri/symbols/Font
                size: 32,
                family: "FontAwesome",
                weight: "bolder"
            }
        });
        var graphic = new esri.Graphic(point, symbol);
        graphicLayer.add(graphic);

        mapObj.centerAt(graphic.geometry);
    }
}