ol xyz 加载天地图_OpenLayer学习之加载天地图

一、OpenLayers 3 中有一个对应的数据源(ol.source)类 – ol.source.TileImage，但是天地图的切片方式和google地图的切片的方式一样，

OpenLayer定义一个类专门门加载此类地图- ol.source.XYZ，这个类是 ol.source.TileImage 的一个特例，继承了 ol.source.TileImage，其中 XYZ 分别对应切片所在的 x y 坐标和当前的缩放级别 z。

二、全部源码：很简单没几步(坐标系3857)

天地图加载

$(function () {

//天地图底图

var source =new ol.source.XYZ({

url: "/DataServer?T=vec_w&x={x}&y={y}&l={z}"

});

var tileLayer =new ol.layer.Tile({

title:"天地图",

source:source

});

//标注图层

var sourceMark = new ol.source.XYZ({ url: '/DataServer?T=cva_w&x={x}&y={y}&l={z}' });

var tileMark = new ol.layer.Tile({

title:"标注图层",

source: sourceMark,

});

//卫星图像

var sourceSatellite = new ol.source.XYZ({ url: '/DataServer?T=img_w&x={x}&y={y}&l={z}' });

var tileSatellite = new ol.layer.Tile({

title: "卫星图",

source:sourceSatellite

});

map = new ol.Map({

layers: [

tileLayer,

tileMark

//tileSatellite

],

view: new ol.View({

zoom: 11,

center:ol.proj.transform( [116.40769, 39.89945], 'EPSG:4326', 'EPSG:3857')

}),

target: 'map'

})

});

三、最后的图：

四、总结

一定要官方给定的语法去写！一定要官方给定的语法去写！一定要官方给定的语法去写！重要的说三遍