做GIS梦的人

一直以来，在Web前端读取文件，都比较麻烦。是一种常用的GIS文件格式，它至少由三个文件组成。前端读取选择多个文件比较麻烦，做成压缩包前端解析难度大。将文件传输到后端解析，传输耗时比较大，效率低。最近发现了一个npm组件——，利用它在前端项目中，可以和input组件配合解析ShapeFile文件。这个组件的很多Demo是基于node.js项目写的，一度导致我很怀疑在Vue项目中，它是否可以使用。最终，证明它是可以使用。它可以读取很多信息，这里我只展示一下如何读取.shp文件里的图形信息为GeoJson。

今天在封装自己的npm模块时，出现了一个问题，如下：之前是可以正常执行的，今天只是将的版本从1.3.0升级到了2.9.1，就无法构建项目了，执行npm run dev是没有问题的。测试更换很多组件都是不解决问题的。extract-text-webpack-plugin这个插件里使用了UglifyJs，而UglifyJs是不支持ES6的语法的。出现这个问题，就是因为mapbox-gl的新版本里使用了ES6的语法。虽然项目里配置了ES6语法自动转ES5，但是看看下面配置就知道了，默认node_modules下

最近在开发vue项目，执行时，出现了关于python的相关错误，如下：原因这个是因为模型需要在本机进行编译，编译的时候，需要的环境，如果它无法获取到Python的路径的话，就会报这个错误。以本人电脑为例，我电脑上同时存在和的环境，导致无法识别了。如果你电脑上已经安装过的环境，可以执行下面的代码，配置python路径，注意这个路径一定要是文件，所在的目录。我的电脑上安装了ArcGIS，使用的是它自带的python环境，我电脑上的路径是。然后删除依赖，重新安装依赖，上面的问题就消失了。...

Cesium在Vue环境下开发时，还是需要做一定的特殊处理，并不是之后，就可以直接使用的，配置起来稍微麻烦一点。网上介绍这一块的，大多是Vue2.0环境的，而且不是非常详细。这里以vue3.0的环境为例，展示一下如何一劳永逸的搭建Cesium三维开发框架，将各种报错扼杀在摇篮里。...

文件上传功能是我们在做开发时经常会遇到的。Spring boot默认上传文件非常小，好像最大可以修改配置文件支持50M。如果太大的文件直接上传，占用内存太严重，很容易造成后台崩溃。这里我在使用前端使用vue-simple-uploader，后台使用Spring boot实现文件分块（分片上传）。同时了为了保障文件的完整性，加入了md5校验。vue-simple-uploader基于Vue的前端上传插件，支持分块和断点上传、自动重传，自带进度条，界面十分友好。在没做分块上传之前，我一直觉得这块很难做，用了

工作流主要解决的主要问题是：为了实现某个业务目标，利用计算机在多个参与者之间按某种预定规则自动传递文档、信息或者任务。工作流概念起源于生产组织和办公自动化领域，是针对日常工作中具有固定程序活动而提出的一个概念，目的是通过将工作分解成定义良好的任务或角色，按照一定的规则和过程来执行这些任务并对其进行监控，达到提高工作效率、更好的控制过程、增强对客户的服务、有效管理业务流程等目的。尽管工作流已经取得了相当的成就，但对工作流的定义还没有能够统一和明确。最近在预研工作量相关的东西，计划前端使用vue+bpmn.

在打包发布Vue前端项目时，每次都需要手动压缩dist文件夹，然后以时间命名，然后部署到web容器中，过程比较繁琐。而且不同的人员打包，命名规则也不一样，这就导致服务器上一堆压缩包文件，排序查找不方便。这里查阅了相关资料，并且亲自测试了Vue项目在npm run build打包时，自动打出时间命名的压缩包。Vue项目build出压缩包，主要依赖于filemanager-webpack-plugin插件。Vue-cli2.0和3.0+的配置方式不一样，接下来针对两种方式创建的Vue项目如何配置打包进行说.

Three.js 实现点击模型改变颜色想实现点击模型，改变模型颜色的效果。在网上看了一些代码，发现特别搞笑，很多的博客给出的计算代码都是错误的，根本无法实现点击效果，还在不同的博客相互的复制，只能感叹抄袭党太多。下面我简单的介绍一些我的方法，我是在Vue中开发的。文章目录Three.js 实现点击模型改变颜色三维空间点击事件的原理环境准备代码实现效果展示注意事项三维空间点击事件的原理在三维空间内判断鼠标点击的是哪个模型，核心的原理还是射线碰撞，*即从相机（camera）的中心点到屏幕上鼠标点组成

three.js 实现管道流动特效想在系统里实现在管道上指示水或液体的流向，在网上查阅了很多资料，也是经历的比较多的麻烦。网上部分代码不可用，还有一部分代码使用定时器实现，流动效果比较卡段这里给大家分享一下。文章目录three.js 实现管道流动特效环境准备代码展示效果展示注意环境准备基于vue的环境准备，可以参考我之前的博文基于管道体模型的加载，可以参考这篇使用Three.js 展示管道体TubeGeometry代码展示<template> <div id="a

使用Three.js 展示管道体TubeGeometry网上关于使用Three.js加载管道体的demo，不少，但是没有完整的例子，很多都是基于老旧代码运行的，。这里我使用基于Vue的场景，展示一下如何显示管道体。文章目录使用Three.js 展示管道体TubeGeometry环境准备编码1. 自定义随机路径类2. 场景展示效果展示环境准备基于vue的环境准备，可以参考我之前的博文编码1. 自定义随机路径类import { Vector3, Curve} from 'th

前言微服务在后端Java开发中，已经广泛应用，而且其概念已经趋于成熟，大家对微服务已经有了深入的了解。微前端的概念也出来很多年了，应用的普及程度远远不及微服务。最近，在网上看到，微前端已经有一些解决方案了，总结一下目前比较主流的几种微前端方案：基座模式：主要基于路由分发，由一个基座应用监听路由，按照路由规则去加载不同的应用，以实现应用间解耦。EMP：Webpack5 Module Federation，去中心化的微前端方案，可以在实现应用隔离的基础上，轻松实现应用间的资源共享和通信；下面以基于

问题今天在使用vue开发大屏时遇到一个奇怪的问题，使用官方给的例子（不带描边效果），结果放到我的项目中，label就自带描边效果。没有更改任何代码。效果如下图官方例子我的效果因为这简单的不能再简单了，不应该有任何问题，完全照抄效果居然不一样，网上也没有什么有效的答案。废了半天功夫终试出了答案。解决方案给label增加颜色。虽然它默认是#fff，你的配置项里必须把color写出来，写成label:{ color:"#fff" }，然后就正常显示了，文字描边效果消失了。完整配置项如下：

前言在做前端开发时，总想借助一些方法，让代码更可靠。Vue这块前端的自动化测试主要包括：单元测试、端对端测试（e2e）、和快照测试，今天这里主要记录一下，基于Vue2.0的e2e测试。依赖安装在使用Vue-Cli创建Vue2.x的项目时，会有一个选项是否加入e2e测试，这里不建议使用使用这种方法，因为这种方法nightwatch的版本比较老，需要安装额外依赖。这里采用创建项目又自己配置的方法实现，也比较简单。# 建议直接指定版本npm install nightwatch@^1.7.8 --sav

前言在打包自己vue组建时，遇到一个问题，项目内的css文件无法单独打包出去。看到其他人的项目，都是install之后，可以引入一下js，引入一个css文件，就可以使用了。这块自己也研究了一下，如何vue组件项目中样式单独打包出一个css文件。实现方式主要是使用 extract-text-webpack-plugin 这个插件实现，但是如果你是webpack4以上版本，只能考虑使用 mini-css-extract-plugin 这个插件，具体使用方法类似。这里我的webpack是 3.6.0 版

目录安装依赖Puppeteerprerender-spa-plugin修改配置文件测试使用问题预渲染解决SEO(Search Engine Optimization),首屏问题 , 页面较少，且预渲染相对于SSR比较简单，预渲染可以极大的提高网页访问速度。而且配合一些meat插件，完全可以满足SEO需求。在webpack打包结束并生成文件后（after-emit hook），会启动一个server模拟网站的运行，用puppeteer（google官方的headless 无头浏览器）访问指定的页面rout

vue2+webpack用了几年时间了，现在vue3越来越火，据说vite的打包速度非常快，这里就记录一下vue3+vite的一些简单的入门内容项目创建项目创建也是通过npm命令就可以了npm init vite-app demo #demo是项目名 #跳转到项目的根目录，然后installnpm install# 本地运行npm run dev这样项目就创建好了必备工具eventBus不能用的解决方案用习惯vue的人，肯定经常使用eventBus。在刚刚创建的项目中

背景本人使用uniapp开发了一个app，其中App有个页面是地图界面（Mapbox开发），因为uniapp无法直接实现地图，最后用Webview组件嵌套了一个vue开发网页。其中有一个定位功能，最开始是用uniapp的getLocation方法，在非地图界面进行定位，然后把定位结果以url参数的方法传递到地图界面。后来客户就开发反馈了，说地图界面的定位不会更新。为了解决在Webview里定位定位更新的问题，做了很多尝试，最开始以为因为uniapp打包成App时，其实所有的页面都是在Android的

1.前言最近发现一个比较好的，前端监控框架zanePerfor，可以监控前端渲染、接口请求、报错等信息，同时可以对PV、UV、用户行为、用户分布这些参数进行分析与统计，对原有代码侵入量也不大。自己部署测试了一下：2.部署2.1环境准备node.js。这个框架是基于node.js进行开发的，需要部署node.js开发环境，这个网上资料很多。 redis。自己根据情况部署。 monogdb。自己根据情况部署。2.2代码配置运行从https://github.com/wangweian.

前言前面的博文介绍了用standardJS进行vue项目的规范https://blog.youkuaiyun.com/GISuuser/article/details/114034641。但是发现有一个问题，无法修改规则，有一些规则不适合公司现有项目，又尝试了使用EsLint。配置也非常简单。配置安装依赖。最好用下面的方法，因为只安装Eslint，在初始化的时候会提示你安装下面剩余的，到时候非常麻烦，npm速度也慢。cnpm install --save-dev babel-eslint esli

因为，需要在vue项目中实现markdown的编辑与展示，调研了很多markdown的编辑插件和一些富文本编辑工具，最后还是选择了mavonEditor，比较简洁，需要基本可以满足安装npm install mavon-editor --save使用<template> <div style="width: 100%;height: 100%"> <mavon-editor v-model="value" @save="save" :toolba

在使用Vue封装UI组件时，出现了如下问题：ERROR in ./node_modules/_mavon-editor@2.9.1@mavon-editor/dist/font/fontello.woff2Module parse failed: Unexpected character '' (1:4)You may need an appropriate loader to handle this file type.初步判断是webpack的配置里缺少了对字体文件的处理，经过多次尝试最.

前言在做前端开发的过程中，有很多重复的代码，尤其是vue项目，不同项目之间相互拷贝代码实在太麻烦了。这里研究一下，如何将自己的代码打包发布到npm，方便以后直接npm install 再次使用。账号准备发布到npm，是需要账号的，首先可以先去https://www.npmjs.com/去注册一个账号，注意记住用户名和密码。然后在本地电脑打开命令窗口，输入npm login ,然后根据提示输入刚刚申请的npm用户名、密码、邮箱。注意一定要输入命令时，自己的npm镜像源地址一定得是官方地址，不能

最近需要使用npm login 进行登录，然后发布vue组件。因为我之前用的全局镜像源是淘宝的，使用npm login时遇到了错误，然后又切换回官方的镜像源，使用npm login，直接产生了下面的错误npm ERR! Unexpected end of JSON input while parsing near" "解决方案使用下面命令查询npmrc文件位置npm config ls -l 直接删除图中位置的文件，然后就可以正常使用npm login 了...

背景一些长期维护和升级的项目，因为人员的变动，代码格式会各种各样。最近一直在忙着查找vue开发的代码规范相关问题，希望借助于EsLint 对vue项目代码进行规范，借助于prettier将代码格式统一。找到最后，发现网上介绍二者配置的特别多，都不是很详细，走的最后都走不下去了。最后找到了Standardjs，发现部署和配置特别简单。解决方案部署安装命令cnpm i eslint-config-standard-vue-ts --save-dev在项目根目录下创建.eslintrc.