vue中使用Cesium

npm准备

npm i cesium -D

vue.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
const path = require('path')let cesiumSource = './node_modules/cesium/Source'
let cesiumWorkers = '../Build/Cesium/Workers'module.exports = {// 基本路径publicPath: "./",// 输出文件目录outputDir: "dist",// eslint-loader 是否在保存的时候检查lintOnSave: false,// webpack-dev-server 相关配置devServer: {open: process.platform === "darwin",host: "0.0.0.0",port: 5000,https: false,hotOnly: false},configureWebpack: {output: {sourcePrefix: ' '},amd: {toUrlUndefined: true},resolve: {alias: {'vue$': 'vue/dist/vue.esm.js','@': path.resolve('src'),'cesium': path.resolve(__dirname, cesiumSource)}},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('./')})],module: {unknownContextCritical: /^.\/.*$/,unknownContextCritical: false}}
};

main.js

import * as Cesium from "cesium/Cesium";
import widget from "cesium/Widgets/widgets.css";
// 定义为全局变量，以便调用
Vue.prototype.cesium = Cesium;
Vue.prototype.widgets = widgets;

index.vue

<div id="container" className="box"><div id="trackPopUp" class="trackPopUp"><divid="trackPopUpContent"class="leaflet-popup-m"style="top:15px;left:0;"><div id="trackPopUpLink" class="leaflet-popup-content-m">{{ titleName }}</div></div></div></div>

window.earth = new Cesium.Viewer("container", {// terrainProvider: Cesium.createWorldTerrain(),animation: false, //是否显示动画控件homeButton: true, //是否显示home键geocoder: false, //是否显示地名查找控件        如果设置为true，则无法查询baseLayerPicker: false, //是否显示图层选择控件timeline: false, //是否显示时间线控件fullscreenButton: true, //是否全屏显示scene3DOnly: false, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源infoBox: false, //是否显示点击要素之后显示的信息sceneModePicker: false, //是否显示投影方式控件  三维/二维navigationInstructionsInitiallyVisible: true,navigationHelpButton: false, //是否显示帮助信息控件selectionIndicator: false, //是否显示指示器组件//1 加载天地图imageryProvider: new Cesium.WebMapTileServiceImageryProvider({url:"http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=*******",layer: "tdtBasicLayer",style: "default",format: "image/jpeg",tileMatrixSetID: "GoogleMapsCompatible",show: false,mininumLevel: 0,maximumLevel: 16})
});
// 2 加载高德地图
let layer = new Cesium.UrlTemplateImageryProvider({url:"https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",subdomains: ["1", "2", "3", "4"],mininumLevel: 0,maximumLevel: 16,
});
window.earth.imageryLayers.addImageryProvider(layer);// 3 加载本地wms服务
let layer = new Cesium.WebMapServiceImageryProvider({url: "http://localhost:8080/geoserver/topp/wms",layers: "topp:states",proxy: new Cesium.DefaultProxy("/proxy/")
});
window.earth.imageryLayers.addImageryProvider(layer);// 4 加载离线切片服务
//需要在根目录下有tilemapservice.xml文件，可以通过切片下软件生成，具体可以看 参考资料2
let layer = new Cesium.createTileMapServiceImageryProvider({url: "本地离线切片服务地址"
});
window.earth.imageryLayers.addImageryProvider(layer);//修改主按钮的文字
window.earth.homeButton.container.childNodes[0].title = "2D地图";
//修改主按钮跳转
window.earth.homeButton.viewModel.command.beforeExecute.addEventListener(e => {e.cancel = true;//你要飞的位置this.$router.push({name: "****"});}
);// 隐藏版权
window.earth._cesiumWidget._creditContainer.style.display = "none";// 增加3DTileset设置进入是飞入模式
this.tileSet = new Cesium.Cesium3DTileset({url: "http://******.json", // 市区maximumScreenSpaceError: 8,maximumNumberOfLoadedTiles: 100,maximumMemoryUsage: 2048
});/* 二选一 */
/* 设置3DTileset进入*/// 飞入模式 this.earthFly();  // 直接进入定位到相关区域 window.earth.zoomTo(this.tileSet,new Cesium.HeadingPitchRange(0.0, Cesium.Math.toRadians(-90.0), 3000));/* 设置经纬度进入为飞入模式 */window.earth.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(120.21201, 30.2084, 3000.0),duration: 4,orientation: {heading: Cesium.Math.toRadians(175.0),pitch: Cesium.Math.toRadians(-35.0),roll: 0.0,},});

3DTileset飞入模式方法

earthFly() {let Cesium = this.cesium;let flyPromise = window.earth.flyTo(this.tileSet, {duration: 4,offset: new Cesium.HeadingPitchRange(0.0,Cesium.Math.toRadians(-35.0),2000.0)});// 飞行完后，移除 markerXY，否则，不能完成飞行。flyPromise.then(function(flyPromise) {if (flyPromise) {// 移除this.tileSet &&(viewer.entities.remove(this.tileSet), (this.tileSet = null));}}).otherwise(function(error) {console.log(error);});
}

根据数据进行打点

setMarker(v) {let Cesium = this.cesium;v.map(item => {let image = "";if (item.deviceType === "1") {image = "static/images/jkgun.png";} else if (item.deviceType === "2") {image = "static/images/jiankong.png";} else {image = "static/images/jkeye.png";}let height = item.height ? item.height : 0;window.earth.entities.add({position: Cesium.Cartesian3.fromDegrees(item.longitude,item.latitude,height),billboard: {//图标image: image,horizontalOrigin: Cesium.HorizontalOrigin.CENTER,verticalOrigin: Cesium.VerticalOrigin.BOTTOM,scale: 1,// clampToGround: true,disableDepthTestDistance: Number.POSITIVE_INFINITY // 解决被遮挡问题},// point: {//   color: Cesium.Color.RED, //点位颜色//   pixelSize: 20, //像素点大小//   disableDepthTestDistance: Number.POSITIVE_INFINITY // 解决被遮挡问题// },name: item.name,channelCode: item.channelCode,videoCode: item.videoCode,id: item.id,deviceType: item.deviceType // 2球});});// 鼠标移上点位显示点位信息this.onMouseFunctions();
}

onMouseFunctions() {let _this = this;let Cesium = this.cesium;let handler3D = new Cesium.ScreenSpaceEventHandler(window.earth.scene.canvas);let scene = window.earth.scene;handler3D.setInputAction(movement => {var picked = scene.pick(movement.endPosition);if (picked && picked.id) {setTimeout(() => {$("#trackPopUp").show();}, 500);if (Cesium.defined(picked)) {var id = Cesium.defaultValue(picked.id, picked.primitive.id);if (id instanceof Cesium.Entity) {for (let key in id) {if (key === "_name") {_this.titleName = id["_name"];}}function positionPopUp(c) {var x = c.x - $("#trackPopUpContent").width() / 2;var y = c.y - $("#trackPopUpContent").height() - 50;$("#trackPopUpContent").css("transform","translate3d(" + x + "px, " + y + "px, 0)");}var c = new Cesium.Cartesian2(movement.endPosition.x,movement.endPosition.y);setTimeout(() => {$("#trackPopUp").show();}, 500);positionPopUp(c); // Initial positionreturn id;}}} else {$("#trackPopUp").hide();}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);},handleClose() {this.showVideo = false;}
}

鼠标左键单击事件
Cesium.ScreenSpaceEventType.LEFT_CLICK鼠标左键双击事件
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK鼠标左键按下事件
Cesium.ScreenSpaceEventType.LEFT_DOWN 鼠标左键抬起事件
Cesium.ScreenSpaceEventType.LEFT_UP 鼠标中键单击事件
Cesium.ScreenSpaceEventType.MIDDLE_CLICK 鼠标中键按下事件
Cesium.ScreenSpaceEventType.MIDDLE_DOWN

css

<style>
#container {width: 100%;height: 100vh;margin: 0;padding: 0;
}#trackPopUp {display: none;z-index: 2001;
}.leaflet-popup-m {position: absolute;background: #2d8cf0;z-index: 2001;
}.leaflet-popup-content-m {line-height: 30px;color: #fff;font-size: 14px;
}
</style>

vue中使用Cesium相关推荐

vue 中使用 cesium
vue 中使用 cesium 我是在 vue 项目里面使用的 cesium,但是呢,有点问题,就是有些语法在js转vue的时候有些许的限制,比如说js中相对路径引入文件是一切OK的,vue 也能解决, ...
Cesium 开发笔记-Vue 中使用 Cesium（vue-cli-plugin-cesium）
Cesium 开发笔记-Vue 中使用 Cesium(vue-cli-plugin-cesium) 通常情况下,我们要在 Vue 中使用 Cesium,首先要安装 Cesium,然后要在 vue-cl ...
Vue中使用Cesium.js的库
点击进入 Vue Cesium官网 //vc-navigation <template><el-row ref="viewerContainer" class=& ...
VUE中实现三维地图Cesium加载全国地质管地质地图
1.Vue中使用脚手架npm安装Cesium,安装命令:npm install cesium,加载三维地图Cesium,下载Cesium相关文件,安装成功后如下图所示: <div id=&quo ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
props写法_简单理解vue中Props属性
本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用 Props 传递数据组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 pr ...
vue ts 设置tslint提示_Typescript 在 Vue 中的实践(包含2.x、3.x)
1 使用 typescript 的优势聊到 ts 时有一个不能规避的问题:为什么要使用 ts ,相比 js 有什么优势吗?下面我从两个方面试着回答一下这个问题: 1.1 项目开发时的便利避免低级 ...
VUE中使用Echarts绘制地图迁移
踩坑说明很久以前写jsp时使用过echarts的china.js插件,不过echarts是2.0的,目前vue项目中使用echarts3.8.5,直接将china.js插件引入,代码复制,运行一看, ...
vue中动态样式不起作用？ scoped了解一下
vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped 转载于:https://www. ...

vue中使用Cesium

vue中使用Cesium相关推荐

最新文章

热门文章