ThinkGeo.com    |     Documentation    |     Premium Support

OpenLayers.Layer.XYZ

#1

Hello,



I have a WMS service address which is using OpenLayers.Layer.XYZ layer format. Can I use thinkgeo map suite to display it? Below is the html code of a web page that displays data from this service:



    

    

    <script type=“text/javascript” src=“http://openlayers.org/api/OpenLayers.js”></script>

    <script type=“text/javascript”>

        function init() {

            OpenLayers.Util.onImageLoadError = function () {

                this.style.display = “”; this.src = “empty.png”;

            };

            OpenLayers.Tile.Image.useBlankTile = false;

            var options = {

                projection: new OpenLayers.Projection(“EPSG:900913”),

                displayProjection: new OpenLayers.Projection(“EPSG:4326”),

                units: “m”,

                maxResolution: 156543.0339,

                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34), numZoomLevels: 19

            };



            map = new OpenLayers.Map(‘map’, options);

            layer = new OpenLayers.Layer.WMS(

                                                              “Map”,

                                                              “10.6.88.218:10205/tile21.ashx?z=${z}&x=${x}&y=${y}”,

                                                              {

                                                                  ‘attribution’: ‘’,

                                                                  numZoomLevels: 19,

                                                                  sphericalMercator: true,

                                                                  transitionEffect: ‘resize’

                                                              }

                                               );

            map.addLayers([layer]);

            var initialLat = 5010000;

            var initialLon = 3238000; var initialZoom = 14; map.setCenter(new OpenLayers.LonLat(initialLon, initialLat), initialZoom);

        }       

    </script>



<body onload=“init();” style=“background-color: #26424b;”>&nbsp;&nbsp;&nbsp; <div id=“map” style=“height: 800px; width: auto; margin-right:0px;margin-left:0px;”>&nbsp;&nbsp;&nbsp; </body>

#2

new OpenLayers.Layer.WMS 
  
 line was written wrong, the correct code is: 
  
 new OpenLayers.Layer.XYZ

#3

Hi Bulent,



Please try the following customized Overlay, a bit simple, you can make it support more properties.



Server Side:


public class XyzOverlay : Overlay
    {
        private string url;
 
        public XyzOverlay()
        { }
 
        public XyzOverlay(string id, string url)
            : base(id, true)
        {
            this.Url = url;
        }
 
        [JsonMember(MemberName = "url")]
        public string Url
        {
            get { return url; }
            set { url = value; }
        }
 
        [JsonMember(MemberName = "otype")]
        protected override string OverlayType
        {
            get { return "XYZ"; }
        }
    }



Client Side:


<script language=<code style="color: blue;">"javascript" <code style="color: #000000;">type=<code style="color: blue;">"text/javascript"<code style="color: #000000;">>
    var OnMapCreating = function (map) {
        SphericalOverlay.prototype.createXyzOverlay = function () {
                this.options.sphericalMercator = true;
                this.element = new OpenLayers.Layer.XYZ(this.name, null, this.options);
                this.element.url = this.json.url;
        };
        SphericalOverlay.prototype.createOverlay = function () {
            switch (this.type.toUpperCase()) {
                case "XYZ":
                    this.createXyzOverlay();
                    break;
                default:
                    break;
            }
        };
    }
</script>



Thanks,

Johnny





#4

Hello Johnny,



Thank you for your reply. I added custom layer class to the MVC project and also added the script file to the view. Can you also provide a simple controller and view code to see the map?

#5

Hi Bulent,



Please check the attached sample.



Thanks,

Johnny

MvcApplication10.zip (567 KB)

#6

Thanks for your support :)

#7

Welcome Bulent, any questions please feel free to let us know. 
  
 Thanks, 
 Johnny

#8

I can now display a XYZ tile map with a great success but can’t restrict the extend. I only want to show a region on the web page.

By the help of Map.CurrentExtent, I can focus to the specific region but I can zoom out to the whole world. I tried setting Map.RestrictedExtent to the currentextend but still I can zoom out. How can I show only the specific region’s tiles (no zoom out)?




#9

Hi Bulent,



Please try the code as following (NOTE: please pay attention to the TODO comments, maybe you need some changes there)




var OnMapCreating = function (map) {
 
    map.isValidZoomLevel = function (zoomLevel) {
        return ((zoomLevel != null) &&
           (zoomLevel >= 9) && // set min level here, could read from property
           (zoomLevel < this.getNumZoomLevels()));
    }
 
    map.maxExtent = new OpenLayers.Bounds(-13758743.4295939, 5591455.28887228, -13531302.3472101, 5757360.4178881);
    SphericalOverlay.prototype.createXyzOverlay = function () {
        this.options.sphericalMercator = true;
        this.element = new OpenLayers.Layer.XYZ(this.name, null, this.options);
        this.element.url = this.json.url;
    };
    SphericalOverlay.prototype.createOverlay = function () {
        switch (this.type.toUpperCase()) {
            case "XYZ":
                this.createXyzOverlay();
                break;
            default:
                break;
        }
    };
}





Thanks,

Johnny