$(function () {
var basemapo = {
"天地图影像": {
url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=313cd4b28ed520472e8b43de00b2de56",
layers:
[{
url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=3&scene=0"
}]
},
"高德影像": {
url: "http://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
},
"高德电子": {
url: "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
},
"高德注记": {
url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8"
},
"百度影像": {
url: "https://ss1.bdstatic.com/8bo_dTSlR1gBo1vgoIiO_jowehsv/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&udt=20180810&scaler=1&showtext=1"
},
"百度电子": {
url: "https://maponline1.bdimg.com/tile/?qt=vtile&x={x}&y={y}&z={z}&styles=pl&scaler=2&udt=&from=jsapi2_0"
},
"百度黑色": {
url: "http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid=dark"
},
"灰色底图": {
url: "https://api.mapbox.com/styles/v1/marsgis/cki0a92b123qo1aluk0e5v7sb/tiles/512/{z}/{x}/{y}@2x"
},
"百度深蓝色":{
url: "http://api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid=midnight"
},
"腾讯影像": {
url: "https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=244",
},
"腾讯电子": {
url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=1&version=297"
},
"腾讯注记": {
url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=2&version=297"
},
"腾讯黑色": {
url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=4&scene=0"
},
"腾讯电子2": {
url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=3&scene=0"
}
};
var viewers = []; // 地球视图数组
Cesium.Ion.defaultAccessToken =
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzMjg1ZGI2NS04MGQ1LTRjYjAtOGRjYi1mYzc3YTQ4MDZiNWMiLCJpZCI6MzYxMzQsImlhdCI6MTYxMjU2ODIyM30.E22DhsNFi4_L2rKXvlX3DCtVBGnLURH_6PBYWrcd95k";
var jqBox = $("#box");
for (var k in basemapo) {
var htmls = [];
htmls.push("<div style='position:relative;width:50%;height:400px'>");
htmls.push("<div class='cesiumContainer' style='width:100%;height:400px'></div>");
htmls.push("<span style='position:absolute; left:0; top: 0;color:white;background: black;'>" + k + "<span>");
htmls.push("</div>");
jqBox.append(htmls.join(""))
}
var cesiumContainers = $(".cesiumContainer", jqBox);
Cesium.BaiduImageryProvider = function(options) {
this._errorEvent = new Cesium.Event();
this._tileWidth = 256;
this._tileHeight = 256;
this._maximumLevel = 18;
this._minimumLevel = 1;
let southwestInMeters = new Cesium.Cartesian2(-33554054, -33746824);
let northeastInMeters = new Cesium.Cartesian2(33554054, 33746824);
this._tilingScheme = new Cesium.WebMercatorTilingScheme({
rectangleSouthwestInMeters: southwestInMeters,
rectangleNortheastInMeters: northeastInMeters
});
this._rectangle = this._tilingScheme.rectangle;
this._resource = Cesium.Resource.createIfNeeded(options.url);
this._tileDiscardPolicy = undefined;
this._credit = undefined;
this._readyPromise = undefined;
};
Object.defineProperties(Cesium.BaiduImageryProvider.prototype, {
url: {
get: function () {
return this._resource.url;
}
},
proxy: {
get: function () {
return this._resource.proxy;
}
},
tileWidth: {
get: function () {
if (!this.ready) {
throw new Cesium.DeveloperError('tileWidth must not be called before the imagery provider is ready.');
}
return this._tileWidth;
}
},
tileHeight: {
get: function () {
if (!this.ready) {
throw new Cesium.DeveloperError('tileHeight must not be called before the imagery provider is ready.');
}
return this._tileHeight;
}
},
maximumLevel: {
get: function () {
if (!this.ready) {
throw new Cesium.DeveloperError('maximumLevel must not be called before the imagery provider is ready.');
}
return this._maximumLevel;
}
},
minimumLevel: {
get: function () {
if (!this.ready) {
throw new Cesium.DeveloperError('minimumLevel must not be called before the imagery provider is ready.');
}
return this._minimumLevel;
}
},
tilingScheme: {
get: function () {
if (!this.ready) {
throw new Cesium.DeveloperError('tilingScheme must not be called before the imagery provider is ready.');
}
return this._tilingScheme;
}
},
tileDiscardPolicy: {
get: function () {
if (!this.ready) {
throw new Cesium.DeveloperError('tileDiscardPolicy must not be called before the imagery provider is ready.');
}
return this._tileDiscardPolicy;
}
},
rectangle: {
get: function () {
if (!this.ready) {
throw new Cesium.DeveloperError('rectangle must not be called before the imagery provider is ready.');
}
return this._rectangle;
}
},
errorEvent: {
get: function () {
return this._errorEvent;
}
},
ready: {
get: function () {
return this._resource;
}
},
readyPromise: {
get: function () {
return this._readyPromise;
}
},
credit: {
get: function () {
if (!this.ready) {
throw new Cesium.DeveloperError('credit must not be called before the imagery provider is ready.');
}
return this._credit;
}
},
});
Cesium.BaiduImageryProvider.prototype.requestImage = function (x, y, level, request) {
let xTileCount = this._tilingScheme.getNumberOfXTilesAtLevel(level);
let yTileCount = this._tilingScheme.getNumberOfYTilesAtLevel(level);
let url = this.url
.replace("{x}", x - xTileCount / 2)
.replace("{y}", yTileCount / 2 - y - 1)
.replace("{z}", level)
.replace("{s}", Math.floor(10 * Math.random()));
console.log("zxy:" + level + ", " + x + ", " + y + "; " + url);
return Cesium.ImageryProvider.loadImage(this, url);
};
// 绘制地球
var idx = 0;
for (var k in basemapo) {
var viewer = new Cesium.Viewer(cesiumContainers[idx++], // **创建地球视图
{ // **设置地形
// terrainProvider: Cesium.createWorldTerrain(),
geocoder: false,
homeButton: false,
sceneModePicker: false,
baseLayerPicker: false,
navigationHelpButton: false,
animation: false,
timeline: false,
fullscreenButton: false,
vrButton: false,
infoBox: false,
selectionIndicator: false
});
viewer.cesiumWidget.creditContainer.style.display = "none"; // 取消商标
viewer.imageryLayers.get(0).show = false;
if( k== "百度电子"|| k== "百度影像"|| k== "百度黑色"|| k== "百度深蓝色")
viewer.imageryLayers.addImageryProvider(new Cesium.BaiduImageryProvider({
url: basemapo[k].url
}));
if (k == "腾讯电子" || k == "腾讯影像") {
var map= viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
url:
basemapo[k].url,
customTags: {
sx: function (imageryProvider, x, y, level) {
return x >> 4
},
sy: function (imageryProvider, x, y, level) {
return ((1 << level) - y) >> 4
}
}
})); }
else if( k== "天地图影像")
{
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
//影像注记
url: "http://t0.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=token值",
// layer: "tdtCiaLayer",
// style: "default",
// format: "image/jpeg",
// tileMatrixSetID: "GoogleMapsCompatible",
// show: true
}));
viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
//影像注记
url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=token值",
// layer: "tdtCiaLayer",
// style: "default",
// format: "image/jpeg",
// tileMatrixSetID: "GoogleMapsCompatible",
// show: true
}));
}
else
loadImageLayer( basemapo[ k].url);
if (basemapo[k].layers) {
for( var i= 0; i< basemapo[k].layers.length; i++)
loadImageLayer( basemapo[ k].layers[ i].url)
}
// 飞入
viewer.camera.flyTo(
{
destination: Cesium.Cartesian3.fromDegrees(120.875746, 31.567942, 1091.471),
});
// 函数:加载影像
function loadImageLayer( url)
{
viewer.imageryLayers.addImageryProvider(new Cesium.UrlTemplateImageryProvider({
url: url
}));
}
}
})
cesium加载高德、百度、腾讯地图
最新推荐文章于 2024-07-11 17:37:13 发布