integrate arcgis services with openlayers

arcgis-layers-overlay-osm.js

var app = angular.module('OpenLayersApp', []);

app.controller('EventController', 
        ['$scope', '$compile', '$timeout', function($scope, $compile, $timeout) {

    var map = new OpenLayers.Map("map", {                                                       
       projection: "EPSG:102113",
       units: "m"
    });

    layer = new OpenLayers.Layer.ArcGIS93Rest( "ArcGIS Server Layer",
                    "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/export", 
                    {layers: "show:2", srs: "102113", TRANSPARENT: true}, 
                    {isBaseLayer: false, opacity: 0.7});

    map.addLayer(layer);

    // create OSM TMS layer
    var mapnik = new OpenLayers.Layer.TMS(
            "OpenStreetMap (Mapnik)",
            "http://a.tile.openstreetmap.org/",
            {
               type: 'png', 
               getURL: osm_getTileURL,
               displayOutsideMaxExtent: true,
               attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap<\/a>'
            }
    );

    map.addLayer(mapnik);

    // get tile boundaries
    // This is a standard function required for the Tiled Map Service
    function osm_getTileURL(bounds) {
           var res = this.map.getResolution();
           var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
           var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
           var z = this.map.getZoom();
           var limit = Math.pow(2, z);

           if (y < 0 || y >= limit) {
                   return OpenLayers.Util.getImagesLocation() + "404.png";
           } else {
                   x = ((x % limit) + limit) % limit;
                   return this.url + z + "/" + x + "/" + y + "." + this.type;
           }
    }

    map.addControl(new OpenLayers.Control.MousePosition());

    if(!map.getCenter()) {
        map.zoomToMaxExtent();
    }
}]);

gistfile1.txt

http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Network/ESRI_DriveTime_US/GPServer
http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/GPServer

multiple-arcgis-layers-with-wms.js

var app = angular.module('OpenLayersApp', []);

app.controller('EventController', 
        ['$scope', '$compile', '$timeout', function($scope, $compile, $timeout) {

    var map = new OpenLayers.Map("map", {                                                       
       projection: "EPSG:4326",
       units: "m"
    });

    var population = new OpenLayers.Layer.ArcGIS93Rest("ArcGIS Population",
        "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer/export",
            {layers: "show:0", srs: "4326", TRANSPARENT: true},
            {isBaseLayer: false, opacity: 0.7}
        );
    map.addLayer(population);


    var street = new OpenLayers.Layer.ArcGIS93Rest("ArcGIS StreetMap",
        "http://server.arcgisonline.com/arcgis/rest/services/ESRI_StreetMap_World_2D/MapServer/export",
            {layers: "show:0", srs: "4326", TRANSPARENT: true},
            {isBaseLayer: false, opacity: 0.7, visibility: false}
        );
    map.addLayer(street);

    var topo = new OpenLayers.Layer.ArcGIS93Rest("ArcGIS Topo",
        "http://server.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/export",
            {layers: "show:0", srs: "4326", TRANSPARENT: true},
            {isBaseLayer: false, opacity: 0.7, visibility: false}
        );
    map.addLayer(topo);

    var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://vmap0.tiles.osgeo.org/wms/vmap0",
                    {layers: 'basic'} );
    map.addLayer(wms);

    map.addControl(new OpenLayers.Control.MousePosition());
    map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));

    map.setCenter(new OpenLayers.LonLat(-113.2332, 42.2343), 4);
}]);

overlay-population-wms.js

var app = angular.module('OpenLayersApp', []);

app.controller('EventController', 
        ['$scope', '$compile', '$timeout', function($scope, $compile, $timeout) {

    var map = new OpenLayers.Map("map", {                                                       
       projection: "EPSG:4326",
       units: "m"
    });

    layer = new OpenLayers.Layer.ArcGIS93Rest("ArcGIS Populcation",
        "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer/export",
            {layers: "show:0", srs: "4326", TRANSPARENT: true},
            {isBaseLayer: false, opacity: 0.5}
        );

    map.addLayer(layer);

    var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://vmap0.tiles.osgeo.org/wms/vmap0",
                    {layers: 'basic'} );
    map.addLayer(wms);

    map.addControl(new OpenLayers.Control.MousePosition());

    var proj = new OpenLayers.Projection("EPSG:102113");
    var point = new OpenLayers.LonLat(-113.2332, 42.2343);
    point.transform(proj, map.getProjectionObject());

    map.setCenter(new OpenLayers.LonLat(-113.2332, 42.2343), 4);
}]);

wkt-openlayers.js

var app = angular.module('OpenLayersApp', []);

app.controller('EventController', 
        ['$scope', '$compile', '$timeout', function($scope, $compile, $timeout) {

    var map = new OpenLayers.Map("map", {                                                       
       projection: "EPSG:4326",
       units: "m"
    });

    var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://vmap0.tiles.osgeo.org/wms/vmap0",
                    {layers: 'basic'} );
    map.addLayer(wms);

    var vectors = new OpenLayers.Layer.Vector("Vector Layer");

    map.addLayer(vectors);

    map.addControl(new OpenLayers.Control.MousePosition());
    map.addControl(new OpenLayers.Control.LayerSwitcher());

    var select = new OpenLayers.Control.SelectFeature(vectors, {
        hover: true,
        onSelect: displayWKT
    });

    map.addControl(select);
    select.activate();

    var wkt = new OpenLayers.Format.WKT();

    function displayWKT(feature) {
        var str = wkt.write(feature);
        console.log(str);
    }

    function parseWKT() {
        var element = $('#wkt');
        var features = wkt.read(element.val());
        var bounds;

        if(features) {
            if(features.constructor != Array) {
                features = [features];
            }
            for(var i=0; i<features.length; ++i) {
                if (!bounds) {
                    bounds = features[i].geometry.getBounds();
                } else {
                    bounds.extend(features[i].geometry.getBounds());
                }
            }
            vectors.addFeatures(features);
            map.zoomToExtent(bounds);
            var plural = (features.length > 1) ? 's' : '';

            console.log('Feature' + plural + ' added')
        } else {
            console.log('Bad WKT');
        }
    }

    $("#parse").on('click', parseWKT);

    map.setCenter(new OpenLayers.LonLat(-113.2332, 42.2343), 4);
}]);