文档章节

cesiumjs开发实践(三) 地图图层介绍

kamijawa
 kamijawa
发布于 2014/07/10 15:35
字数 746
阅读 1W
收藏 3

     cesiumjs中可定制多种图层,可以使用www上很多地图提供商的图层数据,也可以使用自己的地图数据。cesiumjs的地图图层本质上是一些瓦片数据。

     对于地图瓦片数据,OGC(Open Geospatial Consortium开放地理联盟)有很多标准,如TMS、WMTS、各个商业公司也有自己的内部标准。

     如果需要自己提供地图图层数据,就需要自己实现一个imageryProvider并赋予viewer的imageryProvider属性。

     比如楼主本地有一个支持WMTS1.0 的server提供的service,为了使cesium能消费这个service提供的数据,楼主的WMTSImageryProvider.js实现如下:

var WMTSImageryProvider = function WMTSImageryProvider(description) {
    var trailingSlashRegex = /\/$/;
    var defaultCredit = new Cesium.Credit('WMTS');
    description = Cesium.defaultValue(description, {});

    var url = Cesium.defaultValue(description.url, 'http://localhost:88/wmts');
    if (!trailingSlashRegex.test(url)) {
        
    }

    this._url = url;
    this._fileExtension = Cesium.defaultValue(description.fileExtension, 'png');
    this._proxy = description.proxy;
    this._tileDiscardPolicy = description.tileDiscardPolicy;

    
    this._tilingScheme = new Cesium.WebMercatorTilingScheme({
        numberOfLevelZeroTilesX : 1,
        numberOfLevelZeroTilesY : 1
    });

    this._tileWidth = 256;
    this._tileHeight = 256;

    this._minimumLevel = Cesium.defaultValue(description.minimumLevel, 0);
    this._maximumLevel = Cesium.defaultValue(description.maximumLevel, 17);
    this._extent = Cesium.defaultValue(description.extent, this._tilingScheme.extent);
    this._rectangle = Cesium.defaultValue(description.rectangle, this._tilingScheme.rectangle);

    this._errorEvent = new Cesium.Event();

    this._ready = true;

    var credit = Cesium.defaultValue(description.credit, defaultCredit);
    if (typeof credit === 'string') {
        credit = new Cesium.Credit(credit);
    }
    this._credit = credit;
};


//这个函数需要自己实现特定地图服务的url拼接,这里使用的是WMTS1.0的传统URL风格
function buildImageUrl(imageryProvider,  x, y, level) {
    
    var zoom = level + 1;
    var url = imageryProvider._url ;
    url += '?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile';
    url += '&LAYER=' + '';
    url += '&STYLE=' + '';
    url += '&TILEMATRIXSET=' + 'YN_SAT';
    url += '&TILEMATRIX=' + zoom ;
    url += '&TILEROW=' + y ;
    url += '&TILECOL=' + x ;
    url += '&FORMAT=' + imageryProvider._fileExtension;
    var proxy = imageryProvider._proxy;
    if (Cesium.defined(proxy)) {
        url = proxy.getURL(url);
    }
    return url;
}

Cesium.defineProperties(WMTSImageryProvider.prototype, {
    url : {
        get : function() {
            return this._url;
        }
    },

    proxy : {
        get : function() {
            return this._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 DeveloperError('tilingScheme must not be called before the imagery provider is ready.');
            }
            return this._tilingScheme;
        }
    },

    extent : {
        get : function() {
            if (!this._ready) {
                throw new Cesium.DeveloperError('extent must not be called before the imagery provider is ready.');
            }
            return this._extent;
        }
    },
    rectangle : {
        get : function() {
            if (!this._ready) {
                throw new DeveloperError('rectangle must not be called before the imagery provider is ready.');
            }
            return this._rectangle;
        }
    },

    tileDiscardPolicy : {
        get : function() {
            if (!this._ready) {
                throw new Cesium.DeveloperError('tileDiscardPolicy must not be called before the imagery provider is ready.');
            }
            return this._tileDiscardPolicy;
        }
    },

    errorEvent : {
        get : function() {
            return this._errorEvent;
        }
    },

    ready : {
        get : function() {
            return this._ready;
        }
    },

    credit : {
        get : function() {
            return this._credit;
        }
    }
});

WMTSImageryProvider.prototype.getTileCredits = function(x, y, level) {
    return undefined;
};

WMTSImageryProvider.prototype.requestImage = function(x, y, level) {
    if (!this._ready) {
        throw new Cesium.DeveloperError('requestImage must not be called before the imagery provider is ready.');
    }

    var url = buildImageUrl(this,  x, y, level);
    return Cesium.ImageryProvider.loadImage(this, url);
};

然后调用如下:

var viewer = new Cesium.Viewer('cesiumContainer',{
		imageryProvider:new WMTSImageryProvider({
				    url : '/wmts',
				})
		
	});

别忘了在HTML页head里包含进去(楼主未使用AMD规范):

    <script type="text/javascript" src="js/CesiumUnminified/Cesium.js"></script>
    <script type="text/javascript" src="js/WMTSImageryProvider.js"></script>

     以上就是一个简单的扩充cesiumjs地图图层的例子。下一篇《cesiumjs开发实践(四) 地形介绍》

© 著作权归作者所有

kamijawa
粉丝 67
博文 7
码字总数 4833
作品 0
昆明
私信 提问
加载中

评论(4)

chen0191
chen0191
能问一下 最后显示出来时什么啊,为什么我的显示结果毫无变化,还是和var viewer = new Cesim.Viewer(cesiumContainer);一样的输出效果
Thor027
Thor027
跨域的问题没有考虑
JassonChen
JassonChen
是否是因为版本原因呢?
JassonChen
JassonChen
貌似改成加载天地图的wmts服务不能显示,通过iamgeProider = new WMTSImageryProvider({
url : 'http://t0.tianditu.com/vec_c/wmts',
});

  viewer.imageryLayers.addImageryProvider(iamgeProider);
的方式显示不太正常呀
干货 | 3D GIS 应用开发 —— 基于 Mapbox GL 的实践

摘要:下面我们从这个项目一步步来介绍 Mapbox 的前端 GIS 引擎 Mapbox GL JS.首先,Mapbox 在地图领域是一家很 Newbee 的公司。已为 Foursquare、Pinterest、Evernote、金融时报、天气频道、...

创宇前端
2018/01/11
0
0
Cesium中级教程5 - Terrain 地形

Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/CesiumJS支持对与水流相关的海洋、湖泊和河流以及全球高分辨率地形进行流式处理和可视化。查看山峰、山谷和...

Cesium中文网
2019/05/22
271
0
cesiumjs开发实践(五) 坐标变换

cesium中常用的坐标有两种WGS84地理坐标系和笛卡尔空间坐标系。我们平时常用的以经纬度来指明一个地点就是用的WGS84坐标,笛卡尔空间坐标系常用来做一些空间位置变换如平移旋转缩放等等。二者...

kamijawa
2014/07/14
1.2W
3
目录:ArcGIS API For Javascipt基础学习

1.ArcGIS API For Javascript基础教程 1.1在本实例中,如果想将代码直接运行需注意以下几点: 将ArcGIS API离线环境部署到IIS中 ArcGIS API的版本是3.17,博客里面的代码不支持4.X的API 网页用...

LoveCarpenter
2016/11/12
0
0
Cesium中级教程10 - CesiumJS and webpack

Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/webpack是打包JavaScript模块流行且强大的工具。它允许开发人员以直观的方式构造代码和assets,并使用简单...

Cesium中文网
2019/06/02
160
0

没有更多内容

加载失败,请刷新页面

加载更多

pandas操作excel-09-分组柱状图

import pandas as pdimport matplotlib.pyplot as pltstudents = pd.read_excel('D:/output.xlsx', index_col='idx')students.sort_values(by='M2019', inplace=True, ascending=True)......

烽焱10仴
24分钟前
48
0
java内存模型学习总结

java内存模型 复习jdk1.7虚拟机规范 了解java内存模型,需要我们对计算机硬件体系有一个基本掌握,要知道计算机里面的内存、高速缓冲、处理器、内存一致协议这些概念。 硬件系统内存模型 现代...

Owen_Jia
24分钟前
72
0
深入理解Java虚拟机_06_类文件结构

6.1 概述 如今越拉越多的语言选择了与操作系统和机器指令集无关、平台中立的格式作为程序编译后的存储格式。 6.2 无关的基石 各种不同平台的虚拟机与所有平台都统一使用的程序存储格式——字...

SP_K
25分钟前
54
0
在shell的一行中运行多个命令

说我有一个文件/templates/apple并且我想要 放在两个不同的地方,然后 删除原件。 因此, /templates/apple将被复制到/templates/used和/templates/inuse ,然后在此之后,我想删除原始文件。...

javail
27分钟前
63
0
正式学习linux-6

1.文件的特殊权限 我们知道一个文件或者目录可以分别设置所有者(u)、所有组(g)、其他用户(o)的读(r)、写(w)、执行(x)权限。为弥补一般权限不能实现的工程,就有了特殊权限。 SUID...

嗨豆
36分钟前
42
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部