![](https://img-blog.csdnimg.cn/20190927151026427.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
Vue开发总结
碰碰qaq
前端GIS领域
展开
-
OpenLayers6(9):Vue中使用ol-ext插件中的PrintDialog打印控件
0 版本 OpenLayers:6.14.1 ol-ext:3.2.24(条件:"ol": ">= 5.3.0")1 相关配置// 1、安装ol-extnpm i ol-ext // 2、在main.js中引入样式import 'ol-ext/dist/ol-ext.min.css';// 3、安装jspdf用于导出pdfnpm install jspdf --save// 4、安装FileSaver.js用于导出数据npm i file-saver2原创 2022-05-18 17:25:37 · 1141 阅读 · 2 评论 -
sass:&符号的用法
一、使用&连接符//sass.side-container { float: left; height: 100vh; transition: width 0.5s; background-color: #263238; &.unfolded { width: 195px; .logo { width: 195px; height: 64px; } } &.folded { width: 64原创 2021-07-14 09:25:25 · 5176 阅读 · 1 评论 -
jdk、tomcat、maven、idea、vscode、jar、springboot 等开发环境安装配置
一、mavenmaven官网:https://maven.apache.org/download.cgi下载 系统变量:MAVEN_HOME = D:\apache\apache-maven-3.6.1 系统变量:path = %MAVEN_HOME%\bin win+R 运行cmd 输入 mvn -version测试是否安装成功二、tomcat依赖环境:已经安装JDK、解压免安装版Tomcat安装包; 进入解压版Tomcat安装路径的bin目录下,shift+右键启动,点击‘在此处.原创 2020-10-13 18:11:46 · 322 阅读 · 0 评论 -
OpenLayers6(6):绘制图形工具条封装(Draw、Snap、Modify)
1 版本 OpenLayers:6.14.1 2 说明Draw:绘制图形 Snap:捕捉图形 Modify:修改图形3 绘制图形组件将绘制界面直接封装成vue单文件组件,上代码:<template> <div class="ol-draw-collapse"> <el-collapse :value="['1']"> <el-collapse-item name="12"> <temp原创 2022-04-29 09:25:39 · 2251 阅读 · 0 评论 -
OpenLayers6(4):Vue中使用ol-ext插件中的Legend图例控件
1 版本 OpenLayers:6.4.3 ol-ext:3.2.22(条件:"ol": ">= 5.3.0")2 配置ol-ext// 1、安装ol-extnpm i ol-ext // 2、在main.js中引入样式import 'ol-ext/dist/ol-ext.min.css';3 使用Legend控件3.1 说明ol.control.Legend:Create a legend for styles. ol.legend.Legend:Legen原创 2022-04-25 16:21:31 · 4518 阅读 · 2 评论 -
OpenLayers6(3):Vue导出图片时报错“Uncaught DOMException: Failed to execute ‘toDataURL on ‘HTMLCanvasElement”
1.版本 OpenLayers:6.4.3 2.导出时候遇到报错3.原因分析原因:openlayers中加载的图层中存在不允许跨域的图层;解决:找到相应的图层,添加crossOrigin:'anonymous',处理跨域问题;// 切片-图层export function addlocalTileLayer(title, url, proj = 'EPSG:3857') { const tileLayer = new TileLayer({ ....原创 2022-04-23 12:51:17 · 1960 阅读 · 0 评论 -
OpenLayers6(2):Vue中使用ol-ext插件中的LayerSwitcher图层控制控件
1.版本 OpenLayers:6.4.3 ol-ext:3.2.22(条件:"ol": ">= 5.3.0")2.配置ol-ext// 1、安装ol-extnpm i ol-ext// 2、在main.js中引入样式import 'ol-ext/dist/ol-ext.min.css';3.使用LayerSwitcher控件3.1 先看LayerSwitcher构造函数的参数LayerSwitcher控件的构造函数参数 selection enabl原创 2022-04-22 15:08:44 · 4774 阅读 · 1 评论 -
Three.js(6):vue中基于worker-loader使用web worker设置动态模型的移动路线
1 版本vuecli:4.5.7three.js:0.131.02 使用worker-loader2.1 安装worker-loadernpm install worker-loader --save-dev2.2 vue.config.js中进行配置chainWebpack: config => { // 设置解析以worker.js 结尾的文件使用worker-loader 解析 config.module.rule('worker-loader').原创 2022-04-15 11:07:38 · 1788 阅读 · 0 评论 -
vue开发案例:基于Three.js搭建三维数字化场景
0、场景涉及的关键技术点GLTFLoader加载gltf模型,并解析模型动画; 基于worker-loader在vue中使用web worker; 基于web worker动态设置模型(鸟、牛)的移动路线; 基于geotiff.js与DEM生成三维地形场景; threejs中加载geojson生成ShapeGeometry; 使用BufferGeometryLoader加载风机模型,并设置风机动态转动; 基于DataTexture3D生成三维云; 基于Sprites实现树木、草地、向日葵等原创 2022-03-04 11:09:04 · 1894 阅读 · 1 评论 -
vue系列(12):强制更新dom元素
1 问题当更新mPano.mSrc.attr 中的属性值时,v-pannellum没有进行相应的界面更新。<v-pannellum :src="mPano.mSrc" :hfov="120" :key="mPano.mKey"></v-pannellum>2 解决用 :key 来阻止“复用”,当key变化时dom会被刷新。一般情况下,key可以使用当前的时间。...原创 2021-12-13 15:20:39 · 3957 阅读 · 0 评论 -
Cesium(2):ThirdParty/zip.js
1.版本vue/cli 4.5.7cesium 1.87.12.启动会出现问题in ./node_modules/cesium/Source/ThirdParty/zip.js3.原因由于在 ./node_modules/cesium/Source/ThirdParty/zip.js 文件中使用了 import.meta 语法,webpack默认不支持,在进行项目构建时,会报如下错误,提示信息需要添加 loader。4.解决(1)安装loadernpm inst.原创 2021-12-02 08:58:30 · 621 阅读 · 0 评论 -
vue系列(11):vue-router报错:NavigationDuplicated: Avoided redundant navigation to current location.
1、原因这个报错是重复路由引起的。2、解决在push方法内添加query参数:this.$router.push({ path: this.getTo, query: { timestamp: Date.now() } // changes every time when clicked called })原创 2021-12-01 18:11:02 · 84 阅读 · 0 评论 -
vue系列(10):router-view阻止复用
1、问题在使用Vue-router做项目时,会遇到如/serviceId/:id这样只改变id号的场景。由于router-view是复用的,单纯的改变id号并不会刷新router-view。2、解决:用 :key 来阻止“复用”<router-view :key="key"></router-view>computed: { key() { return this.$route.name !== undefined ? this原创 2021-12-01 18:01:05 · 1111 阅读 · 0 评论 -
vue系列(9):ref的用法
作用1、获取本页面的dom元素<template> <div> <div ref="threeContainer"></div> </div></template><script>export default { name: "threeApp", components: {}, data() { return { }; }, mounted() {原创 2021-08-27 09:35:58 · 153 阅读 · 0 评论 -
vue系列(8):elementUI及css总结
1、消除router-link 的下划线a { text-decoration: none;}.router-link-active { text-decoration: none;}2、ElementUI:NavMenu 导航菜单样式类// navMenu 折叠时候样式类.el-menu--collapse// navMenu 右侧箭头类el-submenu__icon-arrow.el-menu--inline// navMenu submenu标题类..原创 2021-07-15 15:42:27 · 1207 阅读 · 0 评论 -
vue系列(7):内置标签的使用总结
1、component:用于动态组件,可以动态绑定我们的组件,根据数据不同更换不同的组件;2、template:模板占位符,可帮助我们包裹元素,但在循环过程当中,template不会被渲染到页面上;3、transition:过渡和动画;...原创 2021-07-15 08:58:39 · 332 阅读 · 0 评论 -
vue系列(6):组件间传值总结
一、vuex同级组件间传值1、vuex存储需传递的值import Vue from 'vue'import Vuex from 'vuex'//全局静态变量的角色Vue.use(Vuex)export default new Vuex.Store({ //存储全局状态 state: { titleText: "XXX系统", }, //state的计算属性 getters: { getTitle: state => { retur原创 2021-07-09 11:16:28 · 141 阅读 · 0 评论 -
vue系列(5):常见问题集合
1、node.js 执行 npm/cnpm命令时提示:Unexpected end of JSON input while parsing near解决:命令行执行npm cache clean --force2、vue-cli项目修改运行端口号:解决:vuecli3中的端口文件存放目录为:node_modules/@vue/cliservice/lib/commands/serve.js,修改 port 对应的值即可3、提示"Failed to resolve loader: les原创 2021-07-05 15:17:14 · 2042 阅读 · 0 评论 -
vue系列(4):常用的命名规范
一、组件名官方推荐的组件名:每个单词首字母大写(PascalCase)或者全小写用 - 连接(kebab-case)。在DOM中使用的时候, 改为全小写,单词之间用 - 连接。Vue.component('MyComponent', {}); 或者 Vue.component('my-component', {});import MyComponent from 'MyComponent.vue';export default { name: 'MyComponent'}//在.原创 2021-06-23 16:25:49 · 156 阅读 · 0 评论 -
vue系列(3):svg-sprite-loader制作svg-icon组件
1、使用版本vue 2.6.11、vue提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言 一、pandas是什么? 二、使用步骤 1.引入库 2.读入数据 前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、pandas是什么?示例:pandas 是基..原创 2021-06-23 16:05:06 · 197 阅读 · 0 评论 -
vue开发案例:vue、elementUI、openlayers、cesium、echarts整合开发
基于vue + elementUI + openlayers + cesium开发 功能展示:风场可视化原创 2020-11-01 13:08:57 · 2347 阅读 · 10 评论 -
vue系列(2):vuecli4+Cesium开发环境配置
版本:vuecli4.5.7、Cesium1.69 vue.config.js配置: const CopyWebpackPlugin = require("copy-webpack-plugin");const webpack = require("webpack");module.exports = { configureWebpack: { plugins: [ //copy-webpack-plugin 6.x 的写法 // new Copy..原创 2020-10-25 10:31:18 · 1281 阅读 · 0 评论 -
vue系列(1):vuecli-项目搭建全过程
1、问题:Unexpected end of JSON input while parsing near解决:执行 npm cache clean --force原创 2020-09-29 10:53:38 · 200 阅读 · 0 评论