做GIS梦的人

问题今天在使用cesium加载全球DEM数据时，出现一个问题，GET https://…json net::ERR_HTTP2_PROTOCOL_ERROR 200。导致地形数据无法加载出来。因为DEM数据太大了，是放在服务器上。直接通过浏览器访问https://…json这个DEM的文件是可以访问到的，但是通过Cesium加载就是报前面的错误。最终，通过网上资料，发现了下面两种解决办法。临时解决办法如果你只能接触到前端代码，无法接触到服务器的话，可以用这种办法，打开 chrome://flag

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

我们在做前后端开发时，必须要了解http请求的各头部参数信息，http的头部信息主要有三部分General（公共头部）Response Headers（响应头）Request Headers（请求头）本人对三部分参数做了相关整理，具体内容如下：General（公共头部）参数名意义备注Request Method页面请求的方式Status Code请求的返回状态Remote Address请求的远程地址HTTP协议在三次握手时使用的就是这个Remo

前言WebAssembly 是一种可以使用非 JavaScript 编程语言编写代码并且能在浏览器上运行的技术方案，通过它可以将c、c++、Rust等语言编译为二进制文件，它们会被编译进你的浏览器，在你的 CPU 上以接近原生的速度运行。这些代码的形式是二进制文件，你可以直接在 JavaScript 中将它们当作模块来用。2017年10月底，谷歌开始支持让 Google Earth 在 Firefox 上运行，其中的关键就是使用了 WebAssembly。之前了解到这个技术之后，才网上找了很多部署方案，

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

文章目录前言实现测试使用前言一直希望创建一个node的全局命令，直接install -g全局安装就可以了。通过这种方式创建一些全局的脚本，操作文件或者其他内容，减少一些繁琐工作。最近正好实现了一下，还是比较简单的。下面只将最简单的内容，多余的不讲，便于大家实现。实现初始化项目直接npm init，然后根据自己的需求输入对应的项目名和其他信息就可以，代码自动生成了一个package.json文件。在项目内创建index.js文件。其中的内容如下，注意第一行一定要有，是使用node的环境变

目录安装依赖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的webview组件引用的网页内如何实时定位。这里简单介绍一下如何在uniapp注入的5+的环境下实现拍照并上传。方法首先调用相机硬件进行拍照，拍照成功会返回一个照片路径 用5+里的uploader进行上传，然后解析返回的报文信息代码 document.addEventListener('UniAppJSBridgeReady', ()=> { let cmr = plus.camera.getCamera(

背景最近需要做一个机遇Mapbox的绘制功能，虽然mapbox-gl-draw这个插件很好，但是不支持撤销和重做功能，于是自己封装了一个Mapbox控件，方便大家使用。主要是练习一下如何封装Mapbox的控件。实现了如下功能：多边形绘制 撤销点 重做点 双击地图完成绘制 右键地图完成绘制代码使用方法安装依赖npm install gykj-map-core --save代码引用 import {DrawAreaControl} from "gykj-map-core".

背景本人使用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.

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

因为，需要在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，以后就可以直接npm install ,直接使用了。这里简单介绍一下这个组件如何使用，可以达到何种效果。location-map-image可以将geoJson格式数据，展示再地图上，并展示坐标信息。部署按钮命令cnpm install location-map-image --save不了解的，可以参考官方文档https://www.npmj.

最近需要使用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开发的项目，部署在nginx容器中，使用IE浏览器访问出现了问题，提示“Access-Control-Allow-Headers 列表中不存在请求标头 content-type”，“XMLHttpRequest: 网络错误 0x80070005, 拒绝访问”。初步估计应该是前端项目和所部署的服务器不在同一域名导致的。解决方案1.在IE浏览器中打开Internet选项2.切换到安全选项卡，点击Internet,取消勾选启用保护模式，然后点击自定义级别3.在

做了很多Vue项目，都有一个通病，随着代码越来越庞大，首页加载越来越慢，有时候出去演示，网络不好的时候，转半天，登录页面还没有出来。这主要是一些大的js文件造成的，这就是Vue的缺点吧，所有的代码都打包到一个JS文件里，网络传输太慢，有的项目都十几兆。gzip的本质，个人觉得是在build的时候打包两份代码，一份压缩的，一份未压缩的，然后nginx在接收请求时，优先选择压缩后的格式返给客户端。这里主要测试了使用gzip进行压缩，来压缩js和css文件大小，提升加载速度。配置Vue项目1.安装

使用MapBox的queryRenderedFeatures进行地图查询的时候，会遇到一个问题，就是只能查询当前屏幕范围内渲染的要素，没有渲染出来的要素就查询不到。MapBox的fitBounds是一个过程，地图会进行缩放，如果在开始的时候，fitBounds后面直接进行要素查询，就会产生查询不到的结果，因为目标要素还没有渲染。这时候就需要给fitBounds加一个回调，MapBox.js加回调的...

当处理大型的系统项目，或者保密性要求高的项目。是要解除一些加密算法的，非对称加密肯定比对称加密更加安全，但是也更消耗性能。这里就展示一下前端使用Vue，后端使用Spring boot的情况下，进行前后端交互的情况。前端安装加密插件cnpm install jsencrypt --save在main.js中全局绑定加密方法，全局设置公匙import { JSEncrypt }...

因为项目需要，要实现在浏览器端在线预览word文档，根据文档url动态预览文件内容。因为浏览器不支持word格式。所以在浏览器端语言word的方法也就有以下几种。转为pdf，然后预览因为浏览器支持pdf预览，这种方法也不错，缺点是需要开发后端代码转为html，然后预览缺点是转为html后格式混乱，十分麻烦，图片也是问题利用微软提供的接口“https://view.officeap...

Element ui 虽然用起来方便，但是调整就比较麻烦了，尤其是这个table组件，一旦设定了height属性，数据多的时候就会自动出现滚动条，如果你改了其他的样式，这个滚动条就是十分难看，可以用下面的代码隐藏或修改滚动条样式 .el-table__body-wrapper::-webkit-scrollbar{ /*width: 0;宽度为0隐藏*/ width...

利用地图下载器下载的已经切好的Google影像切片TMS格式，如何发布供本地使用呢？图片格式如下：解决方案本地安装tomcat或者其他的web容器，将文件放在tomcat的webapps文件夹下然后启动tomcat，就可以访问到了在openlayers访问该服务器的地址代码如下所示：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;...

在很多个Html页面中都可以看到下面这句，那么具体是什么意思呢？ width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。height：和 width 相对应，指定高度。initial-scale：初始缩放比例，也即是当页面第一次 load

最近接触了一个需求，在WebView中嵌入H5网页，无法正常显示。在WebView开发assets中的html，有本地文件访问权限，在调试模式下浏览器报错cannot fetch to... 在WebView中打开远程html，提示ERR_CLEARTEXT_NOT_PERMITTED最终html均无法显示，这个问题只发生在Android9.0的真机上，模拟器上都无法发现。最终搜索到，...

在使用MapBox和Vue进行开发时，发现了一个问题，设置地图容器宽高均为100%，但是地图的宽度却只占屏幕的一半大小，各类空间的位置却非常正确。情况如下图所示，在IE浏览器中却正常显示。最后在经过多番查找发现，是CSS样式的问题，在vue中引发了样式问题添加如下代码就解决了： .mapboxgl-canvas { position: relative !import...

这是在android中的webview加载本地html页面时产生的问题，原本网页时可以显示的，但是我在网页中加入了就产生了这个问题。解决方案：将webView.setWebChromeClient(new WebChromeClient());更换为webView.setWebViewClient(new WebViewClient());

使用zepto.js写的纯js登录界面

在别人博客的基础上改写了一个js实现鼠标滚轮事件的监听：

帮朋友做的，顺便记录下来，以后使用，主要是在腾讯地图上点选、主要是在屏幕点选坐标，线选坐标，多边形坐标，代码写的优点乱，也没时间整理了，下面是图，觉得适合自己了，再向后看代码

实现Android与node.js的上传与返回

很好的在移动端嵌入了Hmtl页面，并且通过Android代码将本地图片赋给了html页面中的img标签

用Three.js实现的粒子系统，主要是用图片做的纹理，有下雨、下雪、星空等效果，很多参数可以自己控制。 --> var scene, camera, renderer, spot1, stats; var cloud, controls;

Three.js中的场景移动主要是通过摄像机移动来实现的。下面是自己写的代码，主要是鼠标滚轮实现前进与后退和四个方向的移动。

Leaflet调用各种地图的功能十分复杂，幸好有leaflet.ChineseTmsProviders这个插件，这四种地图直接就可以加载进来，十分方便。下面是我做的例子：

如上图，在html页面中，图片和文字被选中将影响外观。解决方案，在元素对应的CSS样式中加入：-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none;

最近用js和html5写出的弹出多个对话框，并且可以自动排列，占满屏幕时会自动从新开始，话不多说直接上图：用起来还是十分方便的，如果你感兴趣，代码在后面首先是Html页面 Title然后是jsfunction creatDialog() { // 获取屏幕的宽度和高度 var wid=document.body.clie

在做一个视频项目时，在android和ios使用video标签播放视频，均失败。代码如下： 最后经过长时间测试终于解决 你的浏览器不支持H5播放器 这样之后，在ios和android都可以播放了