赞
踩
前前后后写了3篇vue使用cesium的博文了,我都写烦了,因为我用的挺好,但是仅限于我自己。
主要是之前写的我觉得确实有瑕疵,今天这个我实验了,没有那么多的配置,而且还很顺利,没有任何错误提示,稍微写一下吧再,这篇写完,在也不写了。
直接使用npm安装,一行命令安装完成!
npm install cesium --save
我安装的版本是这个 1.93.0 。
好,到这里安装就完成了。
接下来就是使用,很多人卡在这个地方,要不是不会用,要不是 Cesium 找不到,按照下面的步骤,就没问题。不需要移动什么文件夹之类的,安装完直接配置。
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 } } };
使用的话直接把我测试的demo放进来了
<template> <div id="map"></div> </template> <script> import * as Cesium from "cesium/Cesium"; import widget from "cesium/Widgets/widgets.css"; export default { name: "Home", data() { return { } }, mounted() { this.init() }, methods: { init() { window.earth = new Cesium.Viewer("map", { // 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, //是否显示指示器组件 // 加载天地图 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=你的天地图tk", layer: "tdtBasicLayer", style: "default", format: "image/jpeg", tileMatrixSetID: "GoogleMapsCompatible", show: false, mininumLevel: 0, maximumLevel: 16 }) }); }, }, }; </script> <style scoped> #map { width: 100%; height: 100%; background-color: azure; } </style>
好,就这样。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。