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">
<div
id="trackPopUpContent"
class="leaflet-popup-m"
style="top:15px;left:0;"
>
<div id="trackPopUpLink" class="leaflet-popup-content-m">
{{ titleName }}
div>
div>
div>
div>
js
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 position
return 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