CODEWITHSUNDEEP
javascripthtmlopenlayers
Milano
Milano

Reputation: 18725

Satellite view in OpenLayers - how to setup?

Is it possible to add a satellite view to the OpenLayers?

This is my method that initializes the OpenLayers:

setupMap() {
                    this.map = new OpenLayers.Map("mapdiv");
                    this.map.addLayer(new OpenLayers.Layer.OSM(
                        "OpenStreetMap", [
                            "https://a.tile.openstreetmap.org/${z}/${x}/${y}.png",
                            "https://b.tile.openstreetmap.org/${z}/${x}/${y}.png",
                            "https://c.tile.openstreetmap.org/${z}/${x}/${y}.png"
                        ]))

                    var lonLat = new OpenLayers.LonLat(9.5788, 48.9773).transform(
                        new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                        this.map.getProjectionObject() // to Spherical Mercator Projection
                    );
                    var zoom = 11;
                    this.map.setCenter(lonLat, zoom);
                }

I tried this but it says that a is null:

            setupMap() {
                this.map = new OpenLayers.Map("mapdiv");

                this.map.addLayer(new OpenLayers.Layer.XYZ({
                    attributions: ['Powered by Esri',
                        'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'],
                    attributionsCollapsible: false,
                    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                    maxZoom: 23
                }))

                var lonLat = new OpenLayers.LonLat(9.5788, 48.9773).transform(
                    new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                    this.map.getProjectionObject() // to Spherical Mercator Projection
                );
                var zoom = 11;
                this.map.setCenter(lonLat, zoom);
            },

ERROR

TypeError: a is null
    format http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:59
    getURL http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:608
    queueTileDraw http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:1351
    triggerEvent http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:138
    draw http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:486
    draw http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:488
    initGriddedTiles http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:514
    moveTo http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:502
    moveTo http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:190
    setCenter http://127.0.0.1:8000/static/main/openlayers/OpenLayers.js:184
    setupMap http://127.0.0.1:8000/dashboard/?tab=realestates:2997
    mounted http://127.0.0.1:8000/dashboard/?tab=realestates:2373
    VueJS 7
    <anonymous> http://127.0.0.1:8000/dashboard/?tab=realestates:2250
vue.js:1897:15
    VueJS 10
    <anonymous> http://127.0.0.1:8000/dashboard/?tab=realestates:2250

Upvotes: 1

Views: 2115

Answers (1)

Mike
Mike

Reputation: 17907

The OpenLayers 2 XYZ syntax is similar to OSM, but you add options for the attribution (singular), numZoomLevels (which is 1 greater than maxZoom in OpenLayers 3 as zoom levels begin at 0, and the standard spherical mercator OSM compatible tile grid.

            this.map.addLayer(new OpenLayers.Layer.XYZ(
                "Satellite", [
                    "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/${z}/${y}/${x}"
                ], {
                    attribution: "Powered by Esri. " + 
                        "Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community",
                    numZoomLevels: 24,
                    sphericalMercator: true
                }))

Upvotes: 3

Related Questions