从零开始vue项目使用cesium开发三维地图(一)

上图:

参考网上很多文档,都是webpack打包之类的,复杂且容易出错,通过vue-cli-plugin-cesium这个插件可以快速帮你创建一个demo示例,然后根据自己的需要创建三维地图

一、vue-cli快速创建一个vue项目框架必须使用vue-cli3以上版本,要不然不能使用vue-cli-plugin-cesium插件

1、vue --version  查看版本(我这里是最新版4.5)

 2、 若不是vue-cli3版本以上需要安装最新版本    npm install -g @vue/cli3

 3、vue create cesium-demo1 (创建一个项目,名称是cesium-demo1)

因为我使用的是vue2 所以一直回车就好

4、安装完成后出现该画面,因为我喜欢在vscode的终端调试,所以我直接关闭不执行

 然后找到创建的文件拖进vscode并打开终端输入npm run serve

创建好一个 Vue 项目后就可以按照以下步骤使用该插件了

通过ctrl + c 退出

然后输入 vue add vue-cli-plugin-cesium

 完成后下面会让你选择cesium版本,我选择的是1.6版本的

然后一直回车

 发现文件多了一个

二、调试

1 、打开app.vue文件,将helloword组件删掉换成生成的组件

 2、 npm run serve ,看一下结果

 因为我们没设置自己的token,所以地图没出来,我们继续找到这个No01-init.vue,改成如下代码:

  mounted() {
    // 此处填写你在cesium中注册的token
    Cesium.Ion.defaultAccessToken = '你的token'
    //  this.init()
    this.init()
  },
  methods: {
    init() {
      const viewer = new Cesium.Viewer('cesiumContainer', {

        // 我使用高德影像地形地图
        imageryProvider: new Cesium.UrlTemplateImageryProvider({
          url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
        }),
        baseLayerPicker: false, // 如果设置为false,将不会创建右上角图层按钮。
        geocoder: false, // 如果设置为false,将不会创建右上角查询(放大镜)按钮。
        navigationHelpButton: false, // 如果设置为false,则不会创建右上角帮助(问号)按钮。
        homeButton: false, // 如果设置为false,将不会创建右上角主页(房子)按钮。
        sceneModePicker: false, // 如果设置为false,将不会创建右上角投影方式控件(显示二三维切换按钮)。
        animation: false, // 如果设置为false,将不会创建左下角动画小部件。
        timeline: false, // 如果设置为false,则不会创建正下方时间轴小部件。
        fullscreenButton: false, // 如果设置为false,将不会创建右下角全屏按钮。
        scene3DOnly: true, // 为 true 时,每个几何实例将仅以3D渲染以节省GPU内存。
        shouldAnimate: false, // 默认true ,否则为 false 。此选项优先于设置 Viewer#clockViewModel 。
        // ps. Viewer#clockViewModel 是用于控制当前时间的时钟视图模型。我们这里用不到时钟,就把shouldAnimate设为false
        infoBox: false, // 是否显示点击要素之后显示的信息
        sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
        requestRenderMode: false, // 启用请求渲染模式,不需要渲染,节约资源吧
        fullscreenElement: document.body // 全屏时渲染的HTML元素 暂时没发现用处,虽然我关闭了全屏按钮,但是键盘按F11 浏览器也还是会进入全屏
        // terrainProvider: new Cesium.CesiumTerrainProvider({
        //   url: 'http://172.16.70.233:8080/terrain'
        // })
      })
      // 再加上高德影像注记地图
      viewer.imageryLayers.addImageryProvider(
        new Cesium.UrlTemplateImageryProvider({
          url: 'http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
        })
      )
      // 设置初始位置  Cesium.Cartesian3.fromDegrees(longitude, latitude, height, ellipsoid, result)
      const boundingSphere = new Cesium.BoundingSphere(
        Cesium.Cartesian3.fromDegrees(120.55538, 31.87532, 100),
        15000
      )
      // 定位到初始位置
      viewer.camera.flyToBoundingSphere(boundingSphere, {
        // 定位到初始位置的过渡时间,设置成0,就没有过渡,类似一个过场的动画时长
        duration: 0
      })
    },
    initMap() {
      var mymap = L.map('mapid').setView([51.505, -0.09], 13)
      L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'your.mapbox.access.token'
      }).addTo(mymap)
    }

  }

 

 注意这里Ceisum发红是因为插件内部使用了 Webpack 的内置模块 ProvidePlugin 来做到使用 Cesium 对象时将不再需要 import 或 require 引入,而一般我们在使用 VueCLI 创建项目时会默认带上 Eslint,Eslint 语法检验会认为 Cesium 是一个未声明的变量,于是抛出了错误

package.json 中配置 Eslint 规则允许 no-undef ,如下所示,在 package.json 中 eslintConfig 字段下的 rules 配置 "no-undef": 0 ,在不关掉 Eslint 的情况下单独配置允许未声明的变量

{
  "dependencies": {},
  "devDependencies": {},
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "no-undef": 0
    }
  }
}

 

3、保存后回头发现不报红了,点开页面看下结果

token获取:

官方网站组车账号生成token

cesium官方:https://cesium.com/

参考文档:vue-cli-plugin-cesium - npm

  • 9
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值