(window.webpackJsonp=window.webpackJsonp||[]).push([[14],{561:function(e,t,s){e.exports=s.p+"assets/img/met_2021011101.9e054e99.png"},562:function(e,t,s){e.exports=s.p+"assets/img/met_2021011102.930fdfd5.png"},608:function(e,t,s){"use strict";s.r(t);var i=s(9),n=Object(i.a)({},(function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ContentSlotsDistributor",{attrs:{"slot-key":e.$parent.slotKey}},[i("h2",{attrs:{id:"_1-介绍"}},[i("a",{staticClass:"header-anchor",attrs:{href:"#_1-介绍"}},[e._v("#")]),e._v(" 1.介绍")]),e._v(" "),i("ul",[i("li",[e._v("Cesium是一个跨平台、跨浏览器的展示三维地球和地图的开源Javascript库；")]),e._v(" "),i("li",[e._v("无需插件支持，但需要浏览器支持WebGL，可以访问https://get.webgl.org/ 查看自己当前使用的浏览器是否支持WebGL；")]),e._v(" "),i("li",[e._v("Cesium对显卡有一定的要求，需要独立显卡才能流畅的加载三维模型等大量数据；")]),e._v(" "),i("li",[e._v("支持3D、2D和2.5D哥伦布视图的地图展示；")]),e._v(" "),i("li",[e._v("可以加载开放标准下的地形和影像图层；")]),e._v(" "),i("li",[e._v("可以绘制各种要素和几何图形，实现3dtiles、gltf等格式的3D模型可视化展示和模型高亮等交互操作；")]),e._v(" "),i("li",[e._v("支持基于时间序列的动态数据展示")]),e._v(" "),i("li",[e._v("……")])]),e._v(" "),i("h2",{attrs:{id:"_2-安装"}},[i("a",{staticClass:"header-anchor",attrs:{href:"#_2-安装"}},[e._v("#")]),e._v(" 2.安装")]),e._v(" "),i("p",[e._v("我们可以直接进入 "),i("a",{attrs:{href:"https://cesium.com/platform/cesiumjs/",target:"_blank",rel:"noopener noreferrer"}},[e._v("Cesium官网下载页"),i("OutboundLink")],1),e._v(" 或者"),i("a",{attrs:{href:"https://github.com/CesiumGS/cesium",target:"_blank",rel:"noopener noreferrer"}},[e._v("github仓库"),i("OutboundLink")],1),e._v("获取最新代码。关于代码的使用方式应该不用多说了吧。。。。。。")]),e._v(" "),i("p",[e._v("cesium开发推荐以下方式安装，通过一些配置来使用")]),e._v(" "),i("div",{staticClass:"language-shell line-numbers-mode"},[i("pre",{pre:!0,attrs:{class:"language-shell"}},[i("code",[i("span",{pre:!0,attrs:{class:"token function"}},[e._v("npm")]),e._v(" "),i("span",{pre:!0,attrs:{class:"token function"}},[e._v("install")]),e._v(" cesium\n")])]),e._v(" "),i("div",{staticClass:"line-numbers-wrapper"},[i("span",{staticClass:"line-number"},[e._v("1")]),i("br")])]),i("p",[e._v("实现vue结合Cesium开发过程中查找了一些资料：")]),e._v(" "),i("ul",[i("li",[i("p",[i("a",{attrs:{href:"https://zouyaoji.gitee.io/vue-cesium",target:"_blank",rel:"noopener noreferrer"}},[e._v("VueCesium"),i("OutboundLink")],1),e._v("是一个基于Vue的CesiumJS组件库，开发人员可以快速创建属于自己的三维应用。我实际上手尝试了一些功能的实现，相较而言，我更喜欢使用原生Cesium来开发的过程，目前该项目已更新为Vue3.X开发版本。")])]),e._v(" "),i("li",[i("p",[i("a",{attrs:{href:"https://github.com/isboyjc/vue-cli-plugin-cesium",target:"_blank",rel:"noopener noreferrer"}},[e._v("vue-cli-plugin-cesium"),i("OutboundLink")],1),e._v("是一款针对 Cesium 的 VueCLI 扩展插件，使用它将会让我们在 VueCLI 中零配置使用 Cesium，很长一段时间我都采用的这个插件来完成开发。")])])]),e._v(" "),i("p",[e._v("自己借鉴了cesium官网Webpack配置实例实现了一个简单的Vue+cesium开发模板，"),i("a",{attrs:{href:"https://gitee.com/xkaifeng/vue-cesium-template",target:"_blank",rel:"noopener noreferrer"}},[e._v("码云地址"),i("OutboundLink")],1),e._v("，"),i("a",{attrs:{href:"https://github.com/xkaifeng/vue-cesium-template",target:"_blank",rel:"noopener noreferrer"}},[e._v("github地址"),i("OutboundLink")],1),e._v("。")]),e._v(" "),i("h2",{attrs:{id:"_3-cesium-ion"}},[i("a",{staticClass:"header-anchor",attrs:{href:"#_3-cesium-ion"}},[e._v("#")]),e._v(" 3.Cesium Ion")]),e._v(" "),i("p",[e._v("在码云或github克隆开发模板后启动在浏览器打开一个简单的三维场景初始化完成，页面下方有一行提示信息："),i("strong",[e._v("This application is using Cesium's default ion access token. Please assign "),i("em",[e._v("Cesium.Ion.defaultAccessToken")]),e._v(" with an access token from your ion account before making any Cesium API calls. You can sign up for a free ion account at "),i("a",{attrs:{href:"https://cesium.com/",target:"_blank",rel:"noopener noreferrer"}},[e._v("https://cesium.com"),i("OutboundLink")],1)]),e._v("。如果你需要使用到Cesium Ion托管的影像、地形、模型等数据，则需要申请自己的AccessToken。")]),e._v(" "),i("p",[i("img",{attrs:{src:s(561),alt:"met_2021113001.png"}})]),e._v(" "),i("p",[e._v("Cesium Ion是一个强大、可扩展且安全的 3D 地理空间数据平台，其上托管了许多全球的3D数据，包括Cesium World Terrain、Bing Maps 图像和 Cesium OSM Buildings等，你可以访问https://cesium.com/ion 免费注册并登录至该平台，点击下方My Assets将自己的数据上传到该平台，针对3D Tiles格式数据可以调整模型位置等信息；Asset Depot选项卡中存放了一些全球的3D Tiles、影像和地形数据；在Access Tokens申请访问令牌后才能够正确访问该平台的数据；Usage项则展示了相应的Access Tokens下的数据使用情况。")]),e._v(" "),i("p",[i("img",{attrs:{src:s(562),alt:"met_2021113002.png"}})])])}),[],!1,null,null,null);t.default=n.exports}}]);