Cesium简介
&cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎，一款开源3DGIS的js库。cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile，但是由于cesium基于WebGL来渲染3D的，所以对浏览器有要求，必须支持WebGL才行。参照cesium官网的说明文档，浏览器支持版本：IE11或者以上、谷歌、火狐版本比较高级等等，其实测试浏览器支不支持，运行demo就可以测试，会提示的，不支持的话。
由于个人刚研究cesium，简单的谈谈个人对cesium的浅见：
开源，开源，开源，可以研究源代码以及针对性对源代码进行一些修改工作，cesium源代码github地址：；cesiumAPI版本更新频率高，几乎每个月一个版本，说明cesium人气高；
(42.51 MB)
(42.40 MB)
(42.65 MB)
(18.68 MB)
cesium展示地图数据效果比较好，解析2D地图各种不同服务类型的数据源，比如百度地图、天地图、arcgis地图、BingMap、openStreetMap、MapBox等等；解析地形图加载；解析3D模型，包括动态加载以及3Dtitles切片形式加载展示，尤其是3Dtitles，大大的加快了展示3D模型的展示效率；Cesium封装部分地图控件，直接调用即可，不用自己写；……
跟商业3DGIS软件对比，比如skyline，cesium三维分析功能太弱了，不排除我自己对cesium了解不够深的可能性；据我所知， cesium官网关于三维分析的例子几乎没，都是以展示数据以及渲染数据为主的例子，希望官网后续的API版本对三维分析重视。没有提供标绘工具Draw，2DGIS一般都是提供Draw工具的，比如arcgis api以及openlayer api；cesium想要绘制点、线、面，只能通过代码来绘制，貌似不能在线手动画；没有地图量算工具、地图比例尺、拉框缩放等，这些地图基本工具，在cesium都需要自己来写实现；……
CesiumAPI离线部署运行
&1.cesium官网下载cesiumAPI解压包，解压之后的目录如下：
里面包括编译后的Build文件夹以及cesium api源代码Source文件夹
2.cesium离线部署运行，这里我的运行demo项目开发环境为：myeclipse+tomcat
拷贝cesiumAPI解压的编译后整个文件夹进来我的demo项目，文件夹命名为cesiumAPI
3.3dmap.jsp页面加载cesiumAPI运行测试
1）地图页面引用cesium需要的css以及js文件即可生效
&!-- CESIUM样式以及JS文件 --&
&script src=&${pageContext.request.contextPath}/js/map/cesiumjs/cesiumAPI/Cesium.js&&
&link href=&${pageContext.request.contextPath}/js/map/cesiumjs/cesiumAPI/Widgets/widgets.css& rel=&stylesheet& type=&text/css& /&
2）创建地图以及展示代码：
Var& viewer = new Cesium.Viewer(“cesiumContainer”);
4.运行效果：
GIS之家论坛（推荐）：
QQ兴趣部落：
GIS项目交流群：
GIS之家交流群一：(已满)
GIS之家交流群二：
本文已收录于以下专栏：
相关文章推荐
叠加SHP图层效果实现的思路如下：利用封装的js文件，直接读取shp图层，然后转换geojson，最后通过arcgis api来解析转换graphic绘制叠加在地图展示
地图打印实现的思路如下：首先在创建好地图打印GP模型，设置好模型的参数；其次是验证模型运行模型；然后是发布地图打印的GP服务；最后是利用arcgis api调用发布好的地图打印GP服务即可
对于习惯arcgis或者openlayer气泡窗口样式的giser来说，感觉不太适应，加上公司的领导也想要arcgis气泡窗口的那种样式效果，所以自定义了类似arcgis模板的气泡窗口模式，可以随着地...
热力图效果实现的思路：1.map.js初始化函数调用聚合效果的js接口，map.heatmap.js实现聚合核心效果的js文件；2.map.heatmap.js实现热力图核心思路： 调用地图Featu...
Viewer类是cesium的核心类，是地图可视化展示的主窗口，cesium程序应用的切入口，扮演必不可少的核心角色。
官网的英文解析如下：
A base widget for building ...
地图统计图实现的思路如下：利用拓展arcgis api的js文件（MapChartGraphic.js以及MapChartGraphic.js），然后构造统计的数据源，直接调用即可
MBTiles 是由 MapBox 制定的一种将瓦片地图数据存储到SQLite数据库中并可快速使用，管理和分享的规范。该规范由MapBox制定，详见/mbtiles-...
软件环境：
太乐地图下载器4.6版本
cesium1.25
1，首先使用太乐地图下载器，破解版4.6，下载全球高德影像图，我下载1-7级，大概几百兆，比较快，第八...
软件环境：
太乐地图下载器4.6版本
cesium1.25
1，首先使用太乐地图下载器，破解版4.6，下载全球高德影像图，我下载1-7级，大概几百兆，比较快，第八级1个多G...
他的最新文章
讲师：王哲涵
讲师：王渊命
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)君，已阅读到文档的结尾了呢~~
基于Cordova和Cesium的移动3DWebGIS系统实现 通信/电子_数据通信与网络
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
基于Cordova和Cesium的移动3DWebGIS系统实现[Word文档]
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口cesium核心类Viewer简介 - 知乎专栏
{"debug":false,"apiRoot":"","paySDK":"/api/js","wechatConfigAPI":"/api/wechat/jssdkconfig","name":"production","instance":"column","tokens":{"X-XSRF-TOKEN":null,"X-UDID":null,"Authorization":"oauth c3cef7c66aa9e6a1e3160e20"}}
{"database":{"Post":{"":{"contributes":[{"sourceColumn":{"lastUpdated":,"description":"GIS之家，这里汇聚关于GIS的点点滴滴，包括arcgis应用、arcgis for js以及开源GIS之openlayer/geoserver等webgis开发，还有就是开源3DGIS之cesiumjs等等，诚邀各位GISer加入GIS之家博客专栏；团队创建的GIS之家论坛推荐：http://www.gishome.online/","permission":"COLUMN_PUBLIC","memberId":,"contributePermission":"COLUMN_PUBLIC","translatedCommentPermission":"all","canManage":true,"intro":"GIS之家，让你我他一起畅谈交流GIS的点点滴滴","urlToken":"gishome","id":21451,"imagePath":"v2-ab3e620d9eee.jpg","slug":"gishome","applyReason":"0","name":"GIS之家博客","title":"GIS之家博客","url":"/gishome","commentPermission":"COLUMN_ALL_CAN_COMMENT","canPost":true,"created":,"state":"COLUMN_NORMAL","followers":937,"avatar":{"id":"v2-ab3e620d9eee","template":"/{id}_{size}.jpg"},"activateAuthorRequested":false,"following":false,"imageUrl":"/v2-ab3e620d9eee_l.jpg","articlesCount":37},"state":"accepted","targetPost":{"titleImage":"/v2-6dee78dc61cfd2_r.png","lastUpdated":,"imagePath":"v2-6dee78dc61cfd2.png","permission":"ARTICLE_PUBLIC","topics":[,26191],"summary":"1.简单描述ViewerViewer类是cesium的核心类，是地图可视化展示的主窗口，cesium程序应用的切入口，扮演必不可少的核心角色。官网的英文解析如下：A base widget for building applications. It composites all of the standard Cesium widgets into one reu…","copyPermission":"ARTICLE_COPYABLE","translatedCommentPermission":"all","likes":0,"origAuthorId":0,"publishedTime":"T09:14:11+08:00","sourceUrl":"","urlToken":,"id":2067425,"withContent":false,"slug":,"bigTitleImage":false,"title":"cesium核心类Viewer简介","url":"/p/","commentPermission":"ARTICLE_ALL_CAN_COMMENT","snapshotUrl":"","created":,"comments":0,"columnId":21451,"content":"","parentId":0,"state":"ARTICLE_PUBLISHED","imageUrl":"/v2-6dee78dc61cfd2_r.png","author":{"bio":"gis/webgis高级开发者","isFollowing":false,"hash":"2a4f3ecbc64a7f667ca2ebe","uid":845400,"isOrg":false,"slug":"gishome","isFollowed":false,"description":"欢迎关注我的GIS之家微信公众号(扫描头像):gishome\n知乎专栏：/gishome\nGIS之家，由专业GIS团队打造，所属成员均来自各高校毕业的研究生，有着丰富的GIS开发与应用经验，承接webgis二次开发项目、GIS毕业设计等。团队的webgis开发的项目主要有：政府应急GIS一张图平台、危险货物重大危险源管理系统、GIS规划一张图系统、政府GIS公共服务共享平台等等，欢迎来咨询以及定制系统。GIS之家接受webgis开发遇到的技术疑点难点在线咨询，采取在线分答计时收费模式，有需要的加QQ:","name":"gishome","profileUrl":"/people/gishome","avatar":{"id":"v2-b8c22fbfb96fda724f3d","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},"memberId":,"excerptTitle":"","voteType":"ARTICLE_VOTE_CLEAR"},"id":513591}],"title":"cesium核心类Viewer简介","author":"gishome","content":"1.简单描述ViewerViewer类是cesium的核心类，是地图可视化展示的主窗口，cesium程序应用的切入口，扮演必不可少的核心角色。官网的英文解析如下：A base widget for building applications. It composites all of the standard Cesium widgets into one reusable package. The widget can always be extended by using mixins, which add functionality useful for a variety of applications2.Viewer对象创建以及参数解析new Cesium.Viewer(container, options);container参数类型type：Element |String描述（一般是地图主窗口div的ID）：The DOM element or ID that will contain the widgetoptions对象，里面属性值特别多，详细的参数见：；个人觉的Viewer类options参数常用的属性值，其他的用默认值即可：this.cesiumViewer = new Cesium.Viewer(divId, {\n
animation:false, //动画控制，默认true\n
baseLayerPicker:true,//地图切换控件(底图以及地形图)是否显示,默认显示true\n
fullscreenButton:true,//全屏按钮,默认显示true\n
geocoder:false,//地名查找,默认true\n
timeline:false,//时间线,默认true\n
vrButton:true,//双屏模式,默认不显示false\n
homeButton:true,//主页按钮，默认true\n
infoBox:false,//点击要素之后显示的信息,默认true\n
selectionIndicator:true,//选中元素显示,默认true\n
imageryProviderViewModels:this._getImageryViewModels(options.mapInitParams.imageryViewModels),//设置影像图列表 \n
terrainProviderViewModels:this._getTerrainViewModels(options.mapInitParams.terrainViewModels)//设置地形图列表\n\n
});\n1)animation,是否显示动画效果控件，默认true设置false，动画效果控件不可见2)timeline,是否显示时间轴控件，默认true设置false，时间轴控件不可见3)baseLayerPicker,是否显示底图切换控件，默认true设置false设置false4)fullscreenButton,是否显示地图全屏控件，默认true4)fullscreenButton,是否显示地图全屏控件，默认true设置false，地图全屏控件不可见5)geocoder,是否显示地名查找控件，默认true设置false，地名查找控件不可见6) vrButton,是否显示地图双屏控件，默认false设置true7)homeButton,是否显示主页控件，默认true7)homeButton,是否显示主页控件，默认true设置false，主页控件不可见8)infoBox,是否显示cesium默认气泡窗口控件，默认true设置false，气泡窗口控件不可见9) selectionIndicator,是否显示选中地图元素标识控件，默认true设置false，地图元素标识控件不可见10) imagerProviderViewModels,设置地图切换控件绑定底图数据源，跟baseLayerPicker属性设置true配合使用备注：这里的imagerProviderViewModels参数要是不设置的话，默认会自动创建一组在线地图底图服务的数据源，假如想要配置一些自己服务器发布的地图服务的话，应该自己设置一组地图服务数据源来替换；11) terrainProviderViewModels,设置地图切换控件绑定地形图数据源，跟baseLayerPicker属性设置true配合使用备注：这里的terrainProviderViewModels参数要是不设置的话，默认会自动创建一组在线地形图服务的数据源，假如想要配置一些自己服务器发布的地形图服务的话，应该自己设置一组地形图数据源来替换；3.附上设置底图服务数据源以及地形图数据源设置的函数/**\n
* 获取地形图配置列表\n
* @method _getTerrainViewModels\n
models 配置文件中的地形图列表\n
* @return terrainViewModels\n
_getTerrainViewModels:function(models){\n
var terrainViewModels = [];\n
var viewer = this.cesiumV\n
if(models && models.length&0){\n
for(var i=0;i&models.i++){//默认最多能识别配置2个地形图信息\n
var model = models[i];\n
switch (i) {\n
var terrain = _createProviderViewModel(models[0]);\n
terrainViewModels.push(terrain);
var terrain = _createProviderViewModel(models[1]);\n
terrainViewModels.push(terrain);
default:\n
return terrainViewM\n
* 创建ProviderViewModel\n
* @method _createProviderViewModel\n
model,配置文件地形图信息\n
* @return 返回指定地形图ProviderViewModel\n
function _createProviderViewModel(model){\n
return new Cesium.ProviderViewModel(\n
name : model.name,\n
iconUrl : Cesium.buildModuleUrl(model.iconUrl),\n
tooltip : model.name,\n
creationFunction : function() {\n
return _createTerrainProvider(model);\n
* 创建指定地形图数据源\n
* @method _createTerrainProvider\n
model,配置文件地形图信息\n
* @return 返回指定地形图数据源\n
function _createTerrainProvider(model){\n
var provider ={};\n
if(model.proxyUrl && model.proxyUrl.length&0)\n
provider = {proxy:new Cesium.DefaultProxy(model.proxyUrl),url:model.Url,requestWaterMask:model.requestWaterMask};\n
provider = {url:model.Url,requestWaterMask:model.requestWaterMask};\n
return new Cesium.CesiumTerrainProvider(provider);
* 获取切换地图服务配置列表\n
* @method _getImageryViewModels\n
models 配置文件中的底图服务列表\n
* @return imageryViewModels\n
_getImageryViewModels:function(models){\n
var imageryViewModels = [];\n
var viewer = this.cesiumV\n
if(models && models.length&0){\n
for(var i=0;i&models.i++){//默认最多能识别配置地图信息文件的8个底图服务\n
var model = models[i];\n
switch (i) {\n
var imagery = _createProviderViewModel(models[0]);\n
imageryViewModels.push(imagery);
var imagery = _createProviderViewModel(models[1]);\n
imageryViewModels.push(imagery);
var imagery = _createProviderViewModel(models[2]);\n
imageryViewModels.push(imagery);
var imagery = _createProviderViewModel(models[3]);\n
imageryViewModels.push(imagery);
var imagery = _createProviderViewModel(models[4]);\n
imageryViewModels.push(imagery);
var imagery = _createProviderViewModel(models[5]);\n
imageryViewModels.push(imagery);
var imagery = _createProviderViewModel(models[6]);\n
imageryViewModels.push(imagery);
var imagery = _createProviderViewModel(models[7]);\n
imageryViewModels.push(imagery);
default:\n
return imageryViewM\n
* 创建ProviderViewModel\n
* @method _createProviderViewModel\n
model,配置文件地图信息\n
* @return 返回指定地图服务类型的ProviderViewModel\n
function _createProviderViewModel(model){\n
return new Cesium.ProviderViewModel(\n
name : model.name,\n
iconUrl : Cesium.buildModuleUrl(model.iconUrl),\n
tooltip : model.name,\n
creationFunction : function() {\n
return _createImageryProvider(model);\n
* 创建指定地图服务类型的地图数据源，比如ArcGisMapServer、OpenStreetMap、BingMaps、MapBox、TileMapService、WebMapTileService等等\n
* @method _createImageryProvider\n
model,配置文件地图信息\n
* @return 返回指定地图服务类型的地图数据源\n
function _createImageryProvider(model){\n
var provider ={};\n
if(model.proxyUrl && model.proxyUrl.length&0)\n
provider = {proxy : new Cesium.DefaultProxy(model.proxyUrl),url : model.Url};\n
provider = {url : model.Url};
switch (model.type) {\n
case 0://ArcGisMapServerImageryProvider\n
return new Cesium.ArcGisMapServerImageryProvider(provider);\n
case 1://OpenStreetMapImageryProvider\n
return Cesium.createOpenStreetMapImageryProvider(provider);\n
default:\n
return new Cesium.ArcGisMapServerImageryProvider(provider); \n
}\nGIS之家论坛（推荐）：GitHub:GIS作品：QQ兴趣部落：GIS项目交流群：GIS之家交流群一：(已满)GIS之家交流群二：","updated":"T01:14:11.000Z","canComment":false,"commentPermission":"anyone","commentCount":1,"collapsedCount":0,"likeCount":3,"state":"published","isLiked":false,"slug":"","lastestTipjarors":[],"isTitleImageFullScreen":false,"rating":"none","titleImage":"/v2-6dee78dc61cfd2_r.png","links":{"comments":"/api/posts//comments"},"reviewers":[],"topics":[{"url":"/topic/","id":"","name":"GIS（地理信息系统）"},{"url":"/topic/","id":"","name":"WebGIS"},{"url":"/topic/","id":"","name":"开源社区"}],"adminClosedComment":false,"titleImageSize":{"width":509,"height":325},"href":"/api/posts/","excerptTitle":"","column":{"slug":"gishome","name":"GIS之家博客"},"tipjarState":"activated","tipjarTagLine":"GIS之家，专注分享关于GIS技术的点点滴滴","sourceUrl":"","pageCommentsCount":1,"tipjarorCount":0,"annotationAction":[],"hasPublishingDraft":false,"snapshotUrl":"","publishedTime":"T09:14:11+08:00","url":"/p/","lastestLikers":[{"bio":"我好单纯哦","isFollowing":false,"hash":"afcf19cb3c972f65f4b4","uid":76,"isOrg":false,"slug":"tan-jian-jian-42","isFollowed":false,"description":"","name":"乃亦捂轻浮","profileUrl":"/people/tan-jian-jian-42","avatar":{"id":"e2a6d76cc5cb5a45c434ede","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"bio":"无简介","isFollowing":false,"hash":"b7c7caac0064abfdfa9f1d1d842f1ffc","uid":08,"isOrg":false,"slug":"andersonlmb","isFollowed":false,"description":"AndersonLMB, GIS开发/程序员(C#,JavaScript,Python)/公交迷/火车迷/地理爱好者","name":"AndersonLMB","profileUrl":"/people/andersonlmb","avatar":{"id":"ba84cf615","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"bio":"Web GIS 初心者","isFollowing":false,"hash":"0ddb6afb705ed2d","uid":80,"isOrg":false,"slug":"huang-yu-qian-63","isFollowed":false,"description":"GIS在读研究僧","name":"Yuki酱","profileUrl":"/people/huang-yu-qian-63","avatar":{"id":"5b4fca7f872aa7fc6c49d7","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false}],"summary":"1.简单描述ViewerViewer类是cesium的核心类，是地图可视化展示的主窗口，cesium程序应用的切入口，扮演必不可少的核心角色。官网的英文解析如下：A base widget for building applications. It composites all of the standard Cesium widgets into one reu…","reviewingCommentsCount":0,"meta":{"previous":{"isTitleImageFullScreen":false,"rating":"none","titleImage":"/50/v2-c70f130d9ce56d9dd57df6_xl.jpg","links":{"comments":"/api/posts//comments"},"topics":[{"url":"/topic/","id":"","name":"GIS（地理信息系统）"},{"url":"/topic/","id":"","name":"WebGIS"},{"url":"/topic/","id":"","name":"开源社区"}],"adminClosedComment":false,"href":"/api/posts/","excerptTitle":"","author":{"bio":"gis/webgis高级开发者","isFollowing":false,"hash":"2a4f3ecbc64a7f667ca2ebe","uid":845400,"isOrg":false,"slug":"gishome","isFollowed":false,"description":"欢迎关注我的GIS之家微信公众号(扫描头像):gishome\n知乎专栏：/gishome\nGIS之家，由专业GIS团队打造，所属成员均来自各高校毕业的研究生，有着丰富的GIS开发与应用经验，承接webgis二次开发项目、GIS毕业设计等。团队的webgis开发的项目主要有：政府应急GIS一张图平台、危险货物重大危险源管理系统、GIS规划一张图系统、政府GIS公共服务共享平台等等，欢迎来咨询以及定制系统。GIS之家接受webgis开发遇到的技术疑点难点在线咨询，采取在线分答计时收费模式，有需要的加QQ:","name":"gishome","profileUrl":"/people/gishome","avatar":{"id":"v2-b8c22fbfb96fda724f3d","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},"column":{"slug":"gishome","name":"GIS之家博客"},"content":"Cesium简介cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎，一款开源3DGIS的js库。cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile，但是由于cesium基于WebGL来渲染3D的，所以对浏览器有要求，必须支持WebGL才行。参照cesium官网的说明文档，浏览器支持版本：IE11或者以上、谷歌、火狐版本比较高级等等，其实测试浏览器支不支持，运行demo就可以测试，会提示的，不支持的话。由于个人刚研究cesium，简单的谈谈个人对cesium的浅见：优点：开源，开源，开源，可以研究源代码以及针对性对源代码进行一些修改工作，cesium源代码github地址：；cesiumAPI版本更新频率高，几乎每个月一个版本，说明cesium人气高； 3.cesium展示地图数据效果比较好，解析2D地图各种不同服务类型的数据源，比如百度地图、天地图、arcgis地图、BingMap、openStreetMap、MapBox等等；解析地形图加载；解析3D模型，包括动态加载以及3Dtitles切片形式加载展示，尤其是3Dtitles，大大的加快了展示3D模型的展示效率； 4.Cesium封装部分地图控件，直接调用即可，不用自己写； 5.……缺点：跟商业3DGIS软件对比，比如skyline，cesium三维分析功能太弱了，不排除我自己对cesium了解不够深的可能性；据我所知， cesium官网关于三维分析的例子几乎没，都是以展示数据以及渲染数据为主的例子，希望官网后续的API版本对三维分析重视。没有提供标绘工具Draw，2DGIS一般都是提供Draw工具的，比如arcgis api以及openlayer api；cesium想要绘制点、线、面，只能通过代码来绘制，貌似不能在线手动画；没有地图量算工具、地图比例尺、拉框缩放等，这些地图基本工具，在cesium都需要自己来写实现；……CesiumAPI离线部署运行 1.cesium官网下载cesiumAPI解压包，解压之后的目录如下：里面包括编译后的Build文件夹以及cesium api源代码Source文件2.cesium离线部署运行，这里我的运行demo项目开发环境为：myeclipse+tomcat拷贝cesiumAPI解压的编译后整个文件夹进来我的demo项目，文件夹命名为cesiumAPI3.3dmap.jsp页面加载cesiumAPI运行测试1）地图页面引用cesium需要的css以及js文件即可生效&!-- CESIUM样式以及JS文件 --&\n\n&script src=\"${pageContext.request.contextPath}/js/map/cesiumjs/cesiumAPI/Cesium.js\"&\n\n&/script&\n\n&link href=\"${pageContext.request.contextPath}/js/map/cesiumjs/cesiumAPI/Widgets/widgets.css\" rel=\"stylesheet\" type=\"text/css\" /&\n2）创建地图以及展示代码：Var
viewer = new Cesium.Viewer(“cesiumContainer”);4.运行效果：GIS之家论坛（推荐）：GitHub:GIS作品：QQ兴趣部落：GIS项目交流群：GIS之家交流群一：(已满)GIS之家交流群二：","state":"published","sourceUrl":"","pageCommentsCount":0,"canComment":false,"snapshotUrl":"","slug":,"publishedTime":"T14:16:21+08:00","url":"/p/","title":"Cesium简介以及离线部署运行","summary":"Cesium简介cesium是国外一个基于JavaScript编写的使用WebGL的地图引擎，一款开源3DGIS的js库。cesium支持3D,2D,2.5D形式的地图展示，可以自行绘制图形，高亮区域，并提供良好的触摸支持，且支持绝大多数的浏览器和mobile，但是由于cesium基于WebGL来渲染3D…","reviewingCommentsCount":0,"meta":{"previous":null,"next":null},"commentPermission":"anyone","commentsCount":7,"likesCount":16},"next":{"isTitleImageFullScreen":false,"rating":"none","titleImage":"/50/v2-78d40f4bea6d0c06fda8d_xl.jpg","links":{"comments":"/api/posts//comments"},"topics":[{"url":"/topic/","id":"","name":"GIS（地理信息系统）"},{"url":"/topic/","id":"","name":"WebGIS"},{"url":"/topic/","id":"","name":"开源社区"}],"adminClosedComment":false,"href":"/api/posts/","excerptTitle":"","author":{"bio":"gis/webgis高级开发者","isFollowing":false,"hash":"2a4f3ecbc64a7f667ca2ebe","uid":845400,"isOrg":false,"slug":"gishome","isFollowed":false,"description":"欢迎关注我的GIS之家微信公众号(扫描头像):gishome\n知乎专栏：/gishome\nGIS之家，由专业GIS团队打造，所属成员均来自各高校毕业的研究生，有着丰富的GIS开发与应用经验，承接webgis二次开发项目、GIS毕业设计等。团队的webgis开发的项目主要有：政府应急GIS一张图平台、危险货物重大危险源管理系统、GIS规划一张图系统、政府GIS公共服务共享平台等等，欢迎来咨询以及定制系统。GIS之家接受webgis开发遇到的技术疑点难点在线咨询，采取在线分答计时收费模式，有需要的加QQ:","name":"gishome","profileUrl":"/people/gishome","avatar":{"id":"v2-b8c22fbfb96fda724f3d","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},"column":{"slug":"gishome","name":"GIS之家博客"},"content":"一、自定义气泡窗口与cesium默认窗口效果对比：1.cesium点击弹出气泡窗口显示的位置固定在地图的右上角，默认效果：2.对于习惯arcgis或者openlayer气泡窗口样式的giser来说，感觉不太适应，加上公司的领导也想要arcgis气泡窗口的那种样式效果，所以自定义了类似arcgis模板的气泡窗口模式，可以随着地图移动而移动，简单版本样式效果如下：二、具体实现思路：1.气泡窗css样式/*自定义气泡窗口样式模板*/\n.closeButton{width:12height:12float:cursor:margin-top:4background:url(images/mainImage.png) no-repeat -31px -54}\n.infowin3DContent{pointer-events:}\n.infowin3D{ width:300 border:2px solid #CCC; position: background-color:#FFF;display:}\n.arrow{ position: width:40 height:40 bottom:-40}\n.arrow *{ display: border-width:20 position: border-style:solid
font-size:0; line-height:0; }\n.arrow em{border-color:#CCC tra}\n.arrow span{border-color:#FFF tra top:-3}\n2.想要在地图显示气泡窗口样式的div挺容易的，但是想要实现气泡窗口随地图移动而移动，这点需要监听地图的范围变化事件以及移动监听事件才行。由于个人的研究cesium时间不久以及水平有限，尝试了这种思路，动手开发了一段时间，但是未能实现，还是比较遗憾的。可是这种效果又是领导想要的，逼急了，无意中发现了cesium的选中是随着地图拖动而拖动的，F12扑捉看看，发现是SVG绘制出来的效果，放在cesium-selection-wrapperdiv里面。所以，个人决定从cesium源代码修改下手，新增气泡窗口div在里面，其实这种投机取巧的做法，不太推荐，破坏了源代码的原始性了。修改源代码之处：SelectionIndicator构造函数里面，新增部分如下：//自定义部分\n
var infowin = document.createElement('div');\n
infowin.className= 'infowin3D';\n
el.appendChild(infowin);\n
var arrow = document.createElement('div');\n
arrow.className= 'arrow';\n
infowin.appendChild(arrow);\n
var em = document.createElement(\"em\");\n
var span = document.createElement(\"span\");\n
arrow.appendChild(em);\n
arrow.appendChild(span);\n
//气泡窗口内容div\n
var content = document.createElement('div');\n
content.setAttribute('id', 'infowin3DContent');\n
content.className= 'infowin3DContent';\n
infowin.appendChild(content);\n
//自定义部分结束\n3.上面的步骤只是实现了一个空div气泡窗口，里面并没有内容信息的，内容是调用气泡窗口时候动态构造的，所以自己封装了一个调用气泡窗口的函数：/**\n
* 弹出气泡窗口\n
* @method infoWindow\n
obj{position(必填):屏幕坐标,destination(必填):跳转目的点,content(必填):气泡窗口内容,css(可填):设置css的width,height}\n
* @return 返回选中的模型Entity\n
infoWindow: function (obj) {\n
var picked = this.cesiumViewer.scene.pick(obj.position);\n
if (Cesium.defined(picked)) {\n
var id = Cesium.defaultValue(picked.id, picked.primitive.id);\n
if (id instanceof Cesium.Entity) {\n
if(obj.destination){\n
this.cesiumViewer.camera.flyTo({//初始化跳转某个地方\n
destination : obj.destination\n
//填充内容\n
$(\".cesium-selection-wrapper\").show();\n
$(\"#infowin3DContent\").empty();\n
$(\"#infowin3DContent\").append(obj.content);\n
//css存在情况下,设置css\n
if(obj.css && obj.css.width)\n
$(\".infowin3D\").css(\"width\",obj.css.width);\n
if(obj.css && obj.css.height)\n
$(\".infowin3D\").css(\"height\",obj.css.height);\n
$(\".infowin3D\").css(\"margin-top\",-($(\".infowin3D\").height()-30));\n
$(\".arrow\").css(\"left\",($(\".infowin3D\").width()/2-20));\n
$(\".infowin3D\").css(\"margin-left\",-($(\".infowin3D\").width()/2-76));\n
$(\".infowin3D\").show();\n
$(\"#infoClose3D\").click(function () {\n
$(\".cesium-selection-wrapper\").hide();\n
$(\".infowin3D\").hide();\n
}\n4.调用://调用接口-气泡窗口\n
var handler3D = new Cesium.ScreenSpaceEventHandler(cesium.cesiumViewer.scene.canvas);\n
handler3D.setInputAction(function(movement) {\n
//点击弹出气泡窗口\n
var pick = cesium.cesiumViewer.scene.pick(movement.position);\n
if(pick && pick.id){//选中某模型\n
var cartographic = Cesium.Cartographic.fromCartesian(pick.id._position._value);//世界坐标转地理坐标（弧度）\n
var point=[ cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];//地理坐标（弧度）转经纬度坐标\n
var destination=Cesium.Cartesian3.fromDegrees(point[0], point[1], 3000.0);\n
var content =\"&div
style='border-bottom: 1px solid #C6CBCE;'&\"+\n
\"&span style='margin-left: 5'&测试测试1&/span&\"+\n
\"&div id='infoClose3D' class='closeButton' style='margin-right: 4'&&/div&\"+\n
\"&/div&\"+
\"&div&\"+\n
\"&label&测试1:&/label&&label&测试1&/label&&/br&\"+\n
\"&label&测试2:&/label&&label&测试2&/label&&/br&\"+\n
\"&label&测试3:&/label&&label&测试3&/label&&/br&\"+\n
\"&/div&\";\n
var obj = {position:movement.position,destination:destination,content:content};\n
Window(obj);
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);\nGIS之家论坛（推荐）：GitHub:GIS作品：QQ兴趣部落：GIS项目交流群：GIS之家交流群一：(已满)GIS之家交流群二：","state":"published","sourceUrl":"","pageCommentsCount":0,"canComment":false,"snapshotUrl":"","slug":,"publishedTime":"T11:12:32+08:00","url":"/p/","title":"cesium自定义气泡窗口infoWindow","summary":"一、自定义气泡窗口与cesium默认窗口效果对比：1.cesium点击弹出气泡窗口显示的位置固定在地图的右上角，默认效果：2.对于习惯arcgis或者openlayer气泡窗口样式的giser来说，感觉不太适应，加上公司的领导也想要arcgis气泡窗口的那种样式效果，所以自定义了…","reviewingCommentsCount":0,"meta":{"previous":null,"next":null},"commentPermission":"anyone","commentsCount":0,"likesCount":4}},"annotationDetail":null,"commentsCount":1,"likesCount":3,"FULLINFO":true}},"User":{"gishome":{"isFollowed":false,"name":"gishome","headline":"欢迎关注我的GIS之家微信公众号(扫描头像):gishome\n知乎专栏：/gishome\nGIS之家，由专业GIS团队打造，所属成员均来自各高校毕业的研究生，有着丰富的GIS开发与应用经验，承接webgis二次开发项目、GIS毕业设计等。团队的webgis开发的项目主要有：政府应急GIS一张图平台、危险货物重大危险源管理系统、GIS规划一张图系统、政府GIS公共服务共享平台等等，欢迎来咨询以及定制系统。GIS之家接受webgis开发遇到的技术疑点难点在线咨询，采取在线分答计时收费模式，有需要的加QQ:","avatarUrl":"/v2-b8c22fbfb96fda724f3d_s.jpg","isFollowing":false,"type":"people","slug":"gishome","bio":"gis/webgis高级开发者","hash":"2a4f3ecbc64a7f667ca2ebe","uid":845400,"isOrg":false,"description":"欢迎关注我的GIS之家微信公众号(扫描头像):gishome\n知乎专栏：/gishome\nGIS之家，由专业GIS团队打造，所属成员均来自各高校毕业的研究生，有着丰富的GIS开发与应用经验，承接webgis二次开发项目、GIS毕业设计等。团队的webgis开发的项目主要有：政府应急GIS一张图平台、危险货物重大危险源管理系统、GIS规划一张图系统、政府GIS公共服务共享平台等等，欢迎来咨询以及定制系统。GIS之家接受webgis开发遇到的技术疑点难点在线咨询，采取在线分答计时收费模式，有需要的加QQ:","profileUrl":"/people/gishome","avatar":{"id":"v2-b8c22fbfb96fda724f3d","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false,"badge":{"identity":null,"bestAnswerer":null}}},"Comment":{},"favlists":{}},"me":{},"global":{"experimentFeatures":{"ge3":"ge3_9","ge2":"ge2_1","nwebStickySidebar":"sticky","nwebAnswerRecommendLive":"newVersion","newMore":"new","sendZaMonitor":"true","liveReviewBuyBar":"live_review_buy_bar_2","liveStore":"ls_a2_b2_c1_f2","homeUi2":"default","answerRelatedReadings":"qa_recommend_by_algo_related_with_article","qrcodeLogin":"qrcode","newBuyBar":"liveoldbuy","newMobileColumnAppheader":"new_header","zcmLighting":"zcm","favAct":"default","appStoreRateDialog":"close","mobileQaPageProxyHeifetz":"m_qa_page_nweb","iOSNewestVersion":"4.2.0","default":"None","wechatShareModal":"wechat_share_modal_show","qaStickySidebar":"sticky_sidebar","androidProfilePanel":"panel_b"}},"columns":{"next":{},"gishome":{"following":false,"canManage":false,"href":"/api/columns/gishome","name":"GIS之家博客","creator":{"slug":"gishome"},"url":"/gishome","slug":"gishome","avatar":{"id":"v2-ab3e620d9eee","template":"/{id}_{size}.jpg"}}},"columnPosts":{},"columnSettings":{"colomnAuthor":[],"uploadAvatarDetails":"","contributeRequests":[],"contributeRequestsTotalCount":0,"inviteAuthor":""},"postComments":{},"postReviewComments":{"comments":[],"newComments":[],"hasMore":true},"favlistsByUser":{},"favlistRelations":{},"promotions":{},"switches":{"couldAddVideo":false},"draft":{"titleImage":"","titleImageSize":{},"isTitleImageFullScreen":false,"canTitleImageFullScreen":false,"title":"","titleImageUploading":false,"error":"","content":"","draftLoading":false,"globalLoading":false,"pendingVideo":{"resource":null,"error":null}},"drafts":{"draftsList":[],"next":{}},"config":{"userNotBindPhoneTipString":{}},"recommendPosts":{"articleRecommendations":[],"columnRecommendations":[]},"env":{"edition":{},"isAppView":false,"appViewConfig":{"content_padding_top":128,"content_padding_bottom":56,"content_padding_left":16,"content_padding_right":16,"title_font_size":22,"body_font_size":16,"is_dark_theme":false,"can_auto_load_image":true,"app_info":"OS=iOS"},"isApp":false},"sys":{},"message":{"newCount":0},"pushNotification":{"newCount":0}}}