我最经的项目中要使用cesium，cesium使用起来倒是简单原生的话直接复制就可以用了，但是在vue上就有点麻烦了。
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="utf-8">
<!-- Include the CesiumJS JavaScript and CSS files -->
<script src="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.92/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer"></div>
<script>
Cesium.Ion.defaultAccessToken =
'you token';
const viewer = new Cesium.Viewer('cesiumContainer', {
});
const tileSet = new Cesium.Cesium3DTileset({
url: "./terra_b3dms/tileset.json"
});
</script>
</div>
</body>
</html>
VUE_CESIUM
因为我的情况不太一样，我的项目是用的vue2.6和vue-cil2建立的，现在网上的插件和教程多半都是新的，不太能通用。然后如果自己手动配置cesiumjs的话极其麻烦，要在webpack配置，本人水平不够。cesium版本间的区别还挺大的，后来我发现了一个我可以用的插件了就是VUE CESIUM。这个插件是有2.x和3.x版本的2.x就是vue2版本，其实我用这个插件就是不想自己配置cesium，导入这个就可以直接用了，你甚至可以直接写原生，不用他的组件。
<template>
<div class="viewer">
<vc-viewer ref="vcViewer" @ready="ready">
<vc-layer-imagery :sort-order="10">
<vc-provider-imagery-amap
:map-style="mapStyle"
:projection-transforms="projectionTransforms"
>
</vc-provider-imagery-amap>
</vc-layer-imagery>
<!-- <vc-primitive-tileset :url="url"> </vc-primitive-tileset> -->
</vc-viewer>
</div>
</template>
<script>
export default {
data() {
return {
baseLayerPicker: true,
mapStyle: "6",
projectionTransforms: {
form: "BD09",
to: "WGS84",
},
url: "http://localhost:9003/model/dZGhGwL9/tileset.json",
};
},
mounted() {
this.$refs.vcViewer.createPromise.then(({ Cesium, viewer }) => {
console.log("viewer is loaded.");
console.log({ Cesium, viewer });
});
},
methods: {
ready(cesiumInstance) {
console.log("cesiumInstance", cesiumInstance);
const { Cesium, viewer } = cesiumInstance;
viewer.scene.globe.depthTestAgainstTerrain = true;
viewer.scene.globe.enableLighting = true;
this.fullscreenElement = this.$refs.viewerContainer;
const tileSet = new Cesium.Cesium3DTileset({
// url: "http://localhost:9003/model/dZGhGwL9/tileset.json"
url: "http://192.168.50.149/static/terra_b3dms/tileset.json"
});
const tx = 0;
const ty = 0;
const tz = -80;
tileSet.readyPromise.then(function (argument) {
viewer.scene.primitives.add(tileSet);
const cartographic = Cesium.Cartographic.fromCartesian(tileSet.boundingSphere.center);
const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic
.height);
const m = Cesium.Transforms.eastNorthUpToFixedFrame(surface);
//平移
const _tx = tx ? tx : 0;
const _ty = ty ? ty : 0;
const _tz = tz ? tz : 0;
const tempTranslation = new Cesium.Cartesian3(_tx, _ty, _tz);
const offset = Cesium.Matrix4.multiplyByPoint(m, tempTranslation, new Cesium.Cartesian3(0, 0, 0));
const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
tileSet.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
viewer.flyTo(tileSet);
//参照点
});
// viewer.camera.flyTo({
// destination: Cesium.Cartesian3.fromDegrees(119.85331, 28.42777, 1000),
// });
},
},
};
</script>
<style>
.viewer {
width: 100%;
height: 90vh;
}
</style>
注意：如果要用的话使用2.8版本的前面的版本bug比较多
