openlayer实战之：加载TMS、ZXY瓦片

TMS遵循OSGeo规范，与ZXY瓦片的原点不同。因此，在加载瓦片的时候，要明确数据格式。

文件组织

png

加载TMS

var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Group({
          'title': 'title',
          combine: true,
          type: 'base',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.XYZ({
                url: './test/{z}/{y}/{x}.png'
              }),
            }),
          ]
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([117.77412414550781, 38.93537787875442]),
        zoom: 10
      })
});

加载ZXY

var map = new ol.Map({
      target: 'map',
      layers: [
        new ol.layer.Group({
          'title': 'title',
          combine: true,
          type: 'base',
          layers: [
            new ol.layer.Tile({
              source: new ol.source.XYZ({
                url: './test/{z}/{x}/{y}.png'
              }),
            }),
          ]
        })
      ],
      view: new ol.View({
        center: ol.proj.fromLonLat([117.77412414550781, 38.93537787875442]),
        zoom: 10
      })
});