VUE3-Cesium(加载GeoJSON数据)

这篇具有很好参考价值的文章主要介绍了VUE3-Cesium(加载GeoJSON数据)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、准备工作

1、新建vue项目

解决报错:使用nvm后找不到vue -V找不到版本

2、安装Cesium插件

3、安装 Element Plus、unplugin-vue-components 和 unplugin-auto-import

4、按需自动导入element-plus

测试按需自动导入element-plus是否配置成功

二、项目代码部分

1、引入sichuan.json文件

2、配置main.js文件

3、配置vue.config.js

4、配置App.vue

5、配置CesiumScene.vue

6、新建common文件夹

三、测试


一、准备工作

1、新建vue项目

首先进入【D:\my\vue-code】路径下(此处创建在D:\my\vue-code下,请根据自身实际情况更改),然后进入此文件夹的cmd命令行窗口。

执行如下命令创建一个名为【vue3-cesium-start-master】的Vue项目,

VUE3-Cesium(加载GeoJSON数据)

直接选择第一个选项,点击回车后,会自动下载所需文件(包括node_modules),创建成功后,用vscode打开文件夹。

解决报错:使用nvm后找不到vue -V找不到版本

场景复现:因为接手的项目有多个node版本不一致,后来就用了nvm 的node.js管理工具,安装好后觉得方便许多,这两天准备搭建一个vue3的项目,但是在cmd输入vue -V 就看不到版本,报了一个“vue不是内部或外部命令”。

原因:nvm中的nodejs版本找不到启动vue的路径,所以报这个错误。

解决方法

(1)找到vue.cmd把对应的路径,复制到我们的环境变量中

VUE3-Cesium(加载GeoJSON数据)

VUE3-Cesium(加载GeoJSON数据)

配置完然后重新打开cmd 看看就可以了。

VUE3-Cesium(加载GeoJSON数据)

2、安装Cesium插件

首先要下载安装Cesium,安装命令:

cnpm i -g cesium

VUE3-Cesium(加载GeoJSON数据)

或者在终端中进入Vue项目目录,运行以下命令,利用npm引入Cesium插件,

npm i cesium vite-plugin-cesium vite -D

然后,安装成功后,前端项目中package.json会自动注册, 

VUE3-Cesium(加载GeoJSON数据)

3、安装 Element Plus、unplugin-vue-components 和 unplugin-auto-import

 Element Plus官网地址:https://element-plus.gitee.io/zh-CN/guide/

(1)使用包管理器(如 NPM、Yarnpnpm)安装 Element Plus

此处我使用的是npm安装,

npm install element-plus --save

VUE3-Cesium(加载GeoJSON数据)

 (2)还需要安装unplugin-vue-componentsunplugin-auto-import这两款插件 ,

npm install -D unplugin-vue-components unplugin-auto-import

VUE3-Cesium(加载GeoJSON数据)

(3)安装成功后,前端项目中package.json会自动注册, 

VUE3-Cesium(加载GeoJSON数据)

4、按需自动导入element-plus

地址:快速开始 | Element Plus

VUE3-Cesium(加载GeoJSON数据)

 此处,我是把下列代码插入到我的 Webpack 的配置文件中,

const { defineConfig } = require("@vue/cli-service");

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack');
const Components = require('unplugin-vue-components/webpack');
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers');

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, // 新增代码
  // 对webpack配置
  configureWebpack: {
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  }
});

测试按需自动导入element-plus是否配置成功

在App.vue中, 添加一个按钮,用来测试是否配置成功,

<template>
  <el-button type="primary">按钮</el-button>
  <router-view />
</template>

<style lang="scss"></style>

在浏览器打开http://localhost:8080/进行访问,效果如下图所示: 

VUE3-Cesium(加载GeoJSON数据)

 ok,配置成功了,说明按需自动导入element-plus已经生效了。

二、项目代码部分

1、引入sichuan.json文件

sichuan.json下载地址:DataV.GeoAtlas地理小工具系列

VUE3-Cesium(加载GeoJSON数据)

2、配置main.js文件

import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/theme-chalk/index.css";


const app = createApp(App)
app.use(ElementPlus)
app.mount("#app")

3、配置vue.config.js

const { defineConfig } = require('@vue/cli-service')
const path = require('path')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    },
    amd: {
      toUrlUndefined: true,
    },
    module: {
      unknownContextCritical: false,
    },
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: 'node_modules/cesium/Build/Cesium/Workers',
            to: 'cesium/Workers',
          },
          {
            from: 'node_modules/cesium/Build/Cesium/ThirdParty',
            to: 'cesium/ThirdParty',
          },
          {
            from: 'node_modules/cesium/Build/Cesium/Assets',
            to: 'cesium/Assets',
          },
          {
            from: 'node_modules/cesium/Build/Cesium/Widgets',
            to: 'cesium/Widgets',
          },
        ],
      }),
      new webpack.DefinePlugin({
        // Define relative base path in cesium for loading assets
        CESIUM_BASE_URL: JSON.stringify('./cesium'),
      }),
    ],
  },
})

4、配置App.vue

<template>
  <div id="app">
    <CesiumScene />
  </div>
</template>

<script>
import CesiumScene from './components/CesiumScene.vue'
export default {
  name: 'App',
  components: {
    CesiumScene
  }
}
</script>

<style>
html, body, #app {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

VUE3-Cesium(加载GeoJSON数据)

5、配置CesiumScene.vue

<template>
  <div style="height: 100vh">
    <el-button type="primary" @click="addGeoJson()" round>addGeoJson</el-button>
    <div id="cesiumContainer" style="height: 100%"></div>
  </div>
</template>
<script>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import { CesiumIonDefaultAccessToken } from '@/common/js/config'
// 没有CesiumIonDefaultAccessToken则使用官方示例中的Token
Cesium.Ion.defaultAccessToken =
  CesiumIonDefaultAccessToken ||
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2YmRiNjM4MC1kMDZkLTQ2NDQtYjQ3My0xZDI4MDU0MGJhZDciLCJpZCI6MzIxMzAsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1OTY1MjM4NzZ9.A3FBZ6HjKkTsOGnjwWWeO9L10HQ9c-wcF4c3dtTc4gQ'
// let viewer = null
// const initCesium = () => new Cesium.Viewer('cesiumContainer')
// onMounted(() => {
//   viewer = initCesium()
// })
export default {
  data() {
    return {
      viewer: {},
    };
  },
  mounted() {
    this.viewer = new Cesium.Viewer("cesiumContainer");
  },
  methods: {
    // 给图层添加颜色
    async addGeoJson() {
      // 这里的load()函数返回的是一个promise 
      let res = await Cesium.GeoJsonDataSource.load("sichuan.json", {
        stroke: Cesium.Color.WHITE,
        fill: Cesium.Color.BLUE.withAlpha(0.3), //注意:颜色必须大写,即不能为blue
        strokeWidth: 5,
      });
      console.log(res)
      // cesium提供的api加载方式
      this.viewer.dataSources.add(res);
 
      let entities = res.entities.values;
      let colorHash = {};
      for (let i = 0; i < entities.length; i++) {
        let entity = entities[i];
        let name = entity.name;
        let color = colorHash[name];
        if (!color) {
          color = Cesium.Color.fromRandom({
            alpha: 1,
          });
          colorHash[name] = color;
        }
        entity.polygon.material = color;
        entity.polygon.outline = false;
        entity.polygon.extrudedHeight = entity.properties.childrenNum * 5000; //高度扩大5000倍,便于观察
      }
    },
  },
};
</script>

<style scoped>
@import 'cesium/widgets.css';
#cesiumContainer {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

VUE3-Cesium(加载GeoJSON数据)

6、新建common文件夹

common文件夹的目录结果如下:

VUE3-Cesium(加载GeoJSON数据)

 其中有两个文件:

VUE3-Cesium(加载GeoJSON数据)

 VUE3-Cesium(加载GeoJSON数据)

 

三、测试

首先vscode进入【D:\my\vue-code\vue3-cesium-start-master】文件夹,目前的目录结构,如下所示:

VUE3-Cesium(加载GeoJSON数据)

 然后vscode进入此文件夹的终端命令行窗口,执行如下指令运行该项目:

npm run serve

VUE3-Cesium(加载GeoJSON数据) 

在浏览器打开http://localhost:8080/进行访问,效果如下图所示: 

VUE3-Cesium(加载GeoJSON数据)

点击按钮之后,效果如下图所示: 

VUE3-Cesium(加载GeoJSON数据)

如上图,说明项目启动成功了。文章来源地址https://www.toymoban.com/news/detail-500203.html

到了这里,关于VUE3-Cesium(加载GeoJSON数据)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WebGL,Cesium以及GeoJSON数据的简单介绍

    目录 一、WebGL 二、Cesium (1)Cesium:一个用于显示三维地球和地图的开源js库。 (2)Cesium的基本功能: (3)cesium的依赖性与技术标准 (4)Cesium与周边产品的关系 (5)Cesium viewer界面部件介绍 三、GeoJSON数据 【GeoJSON数据】 【GeoJSON 对象 】 1 几何图形 2 Feature 3 特征集合 【可

    2024年02月12日
    浏览(59)
  • 在vite创建的vue3项目中使用Cesium加载czml路径信息和无人机模型

    用到的区域文件、地图标记文件、路径信息文件、模型文件 提取码:99jq 使用vite创建vue3项目 cd到创建的项目文件夹中 安装Cesium 配置 vite.config.js文件:添加Cesium并设置反向代理实现跨域。 style.css(可选):修改#app样式 代码 App.vue 解读 加载token 创建查看器viewer,加载世界街道地

    2024年02月16日
    浏览(43)
  • 第六章 Cesium学习入门之添加Geojson数据(dataSource)

    第一章 Cesium学习入门之搭建Vite+Vue3+Cesium开发环境 第二章 Cesium学习入门之搭建Cesium界面预览和小控件隐藏 第三章 Cesium学习入门之地形数据(DEM)的加载 第四章 Cesium学习入门之加载离线影像图(tif) 第五章 Cesium学习入门之加载影像WMTS切片服务(ArcGIS/Geowebcache) 第六章 Ce

    2024年02月16日
    浏览(43)
  • vite+vue3+cesium大屏数据可视化项目——第一章:搭建项目

    目录 系列文章目录 前言 一、搭建项目 1.检查node版本号 2.搭建vue3项目 二、配置cesium 1.前期准备 2.安装cesium 3.引入cesium 4.初始化页面 总结   这几年智慧城市、数字孪生、数字可视化这些高级词汇可太多啦,招聘简介上也有很多要求会webGis等相关经验,所以我觉得最近来学一

    2024年02月07日
    浏览(67)
  • 【THREE.JS学习(3)】使用THREEJS加载GeoJSON地图数据

    本文接着系列文章(2)进行介绍,以VUE2为开发框架,该文涉及代码存放在HelloWorld.vue中。 相较于上一篇文章对div命名class等,该文简洁许多。 接着引入核心库 其中,{OrbitControls}为控制器,加载后可以通过鼠标来移动加载数据的方向、放缩等 Three.js中的坐标系是以单位为米(

    2023年04月09日
    浏览(47)
  • 050:mapboxGL加载geojson数据,同时包含点、多边形的处理示例

    第050个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+mapbox中加载geojson数据,既显示点又显示多边形。这个示例是显示了一种处理方式,通过过滤的方式将数据分离化,点和多边形通过两个不同的图层来加载表示。 直接复制下面的 vue+mapbox源代码,操作2分钟即可运行

    2024年02月07日
    浏览(46)
  • vue结合Cesium加载gltf模型

    Cesium支持什么格式?         Cesium支持的格式包括:3D模型格式(如COLLADA、gITF、OBJ)、影像格式(如JPEG、PNG、GeoTIFF)、地形格式(如STL、Heightmap)、矢量数据格式(如GeoJSON、KMZ)、时间动态数据格式(如CZML),以及其他各种数据格式。此外,Cesium还通过插件支持其他特

    2024年02月01日
    浏览(38)
  • vue中使用cesium 加载shp文件

    在cesium中加载shp文件,将shp文件打包为zip,直接加载zip文件,shp文件中需包含这四个文件 加载代码  

    2024年02月12日
    浏览(39)
  • vue3+cesium项目搭建

    最近需要在一个Vue3的项目中使用到cesium,对于一个cesium没有太多了解的人来说,还是比较麻烦的,本篇博文就将自己在这个过程踩的坑记录下来,有需要的可以看一下 1、vue+cesium框架搭建 2、项目运行起来后,球体不出现,只出现星空 持续ing… 1、初始化vue3项目框架 vue cre

    2024年02月15日
    浏览(45)
  • Cesium引入vite + vue3

    卸载命令 使用 vite.config.js 组件使用 加载高德地图 高德地图的加载方便很多,并不需要申请key,可以直接加载到我们的Cesium中。 加载ArcGISMap地图

    2024年02月14日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包