美文网首页开源
vue3引入cesium@1.64.0

vue3引入cesium@1.64.0

作者: 变异宝宝 | 来源:发表于2020-09-10 08:40 被阅读0次
安装cesium
npm install cesium@1.64.0
入口js引入
let Cesium = require('cesium/Source/Cesium');
import 'cesium/Source/Widgets/widgets.css';
// 挂在window上
window.Cesium = Cesium;
vue.config.js引入插件
const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
const cesiumSource = './node_modules/cesium/Source'
const cesiumWorkers = '../Build/Cesium/Workers'
module.exports = {
    ···
    configureWebpack: {
        plugins: [
            new CopyWebpackPlugin([{
                from: path.join(cesiumSource, cesiumWorkers),
                to: 'Workers'
            }]),
            new CopyWebpackPlugin([{
                from: path.join(cesiumSource, 'Assets'),
                to: 'Assets'
            }]),
            new CopyWebpackPlugin([{
                from: path.join(cesiumSource, 'Widgets'),
                to: 'Widgets'
            }]),
            new CopyWebpackPlugin([{
                from: path.join(cesiumSource, 'ThirdParty/Workers'),
                to: 'ThirdParty/Workers'
            }]),
            new webpack.DefinePlugin({
                CESIUM_BASE_URL: JSON.stringify('./')
            })
        ]
    }
    ···
}
创建地图
Cesium.Ion.defaultAccessToken = '你的token';  // 注册地址https://cesium.com/ion/signin/tokens
window.viewer = new Cesium.Viewer('map-container', {
       baseLayerPicker: false,
       geocoder: false, //是否显示地名查找控件
       homeButton: false,
       sceneModePicker: false, //是否显示投影方式控件
       selectionIndicator: false,
       baseLayerPicker: false, //是否显示图层选择控件
       navigationHelpButton: false, //是否显示帮助信息控件
       animation: false, // 是否显示动画控件
       // creditContainer: "credit",
       timeline: false, //是否显示时间线控件
       fullscreenButton: false,
       vrButton: false,
       infoBox: false,  //是否显示点击要素之后显示的信息
       scene3DOnly: true, //每个几何实例将只能以3D渲染以节省GPU内存
       sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
       imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
               url: "http://t0.tianditu.gov.cn/img_w/wmts?tk=b6b320a7ccfabfdc30536330efc07f3e", // 图层地址
               layer: 'img',
               style: 'default',
               tileMatrixSetID: 'w',
               format: 'tiles',
               maximumLevel: 18
        })
})
viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏cesium的logo
viewer.scene.globe.depthTestAgainstTerrain = false;  // 图标被遮挡
// 关闭双击事件viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
// 获取事件手柄
let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
// 点击事件
handler.setInputAction(movement => {
    let pick = viewer.scene.pick(movement.position),
        pickedEntity = Cesium.defined(pick) ? pick.id : undefined; //pick.id即为entity
    if (pickedEntity) {
        // 处理entity的点击事件
    }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
// 鼠标移动事件
handler.setInputAction(movement => {
    let pick = viewer.scene.pick(movement.endPosition),
        pickedEntity = Cesium.defined(pick) ? pick.id : undefined; //pick.id即为entity
    // 移入entity,修改鼠标样式
    if (pickedEntity && pickedEntity._billboard) {
         document.getElementsByTagName('body').item(0).style.cursor = "pointer"
    } else {
         document.getElementsByTagName('body').item(0).style.cursor = "default"
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// 天地图矢量标注图层
window.tdtImgAnnoLayer = viewer.imageryLayers.addImageryProvider(
    new Cesium.WebMapTileServiceImageryProvider({
        url: 'http://t6.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&format=tiles&tk=b6b320a7ccfabfdc30536330efc07f3e',
        layer: 'tdtImgAnnoLayer',
        style: 'default',
        format: 'image/jpeg',
        tileMatrixSetID: 'GoogleMapsCompatible'
    })
)
// 移除图层
// viewer.imageryLayers.remove(window.tdtImgAnnoLayer);

相关文章

  • vue3引入cesium@1.64.0

    安装cesium 入口js引入 vue.config.js引入插件 创建地图

  • vue3 批量注册全局组件(共用组件)

    vue2中引入共用组件 main.js 中引入 就可以了! vue3中引入共用组件 main.js 中引入 就可以...

  • 【浅谈Vue3 effect】

    Vue3 中引入了 proxy进行数据劫持,而effect是响应式系统的核心,而响应式系统又是 vue3 中的核心...

  • Vue3中使用Pinia

    Vue2 中使用Vuex进行状态管理,在Vue3中,引入了Pinia,如果使用Vue3的脚手架搭建项目,其中包含了...

  • Vue3_26(深入v-model)

    Vue3自动引入插件 unplugin-auto-import/vitevite配置 配置完成之后使用ref re...

  • vue2与vue3对比

    vue3发布出来有一段时间了,这篇文章记录一下vue2与vue3的一些区别 1.生命周期 vue3中新引入了set...

  • vue3 5个常用的API

    Vue3之于Vue2最大的变化,当属composition API了,而除了引入composition API外,...

  • Vue3为什么引入composition API

    今天我们来聊聊Vue3为什么引入composition API,或者说composition API解决了什么问题...

  • vue3 引入正确安装

    这种模式安装aioxs ,会报错 报错内容 正确安装 .http.js request.js 页面引入使用

  • Vue3按需引入ElementUI

    1、npm install --save element-ui --legacy-peer-deps2、npm i...

网友评论

    本文标题:vue3引入cesium@1.64.0

    本文链接:https://www.haomeiwen.com/subject/anyuektx.html