- 博客(324)
- 资源 (8)
- 收藏
- 关注
RSS订阅原创 自定义地图底图制作思路
第一步：准备业务底图（一般是客户提供的航拍图、CAD图纸、其他平面图）第二步：将业务底图对应区域的地图底图（如百度、天地图路图）截图（地图放大层级根据业务底图的分辨率判断，找最接近的层级截图），然后用PS拼接好。拼接好的地图底图：第三步：将地图底图和业务底图放在PS同一个画布，然后处理业务底图，使大小、方向、线路与地图底图对齐吻合调整原始图与地图底图齐（可用画笔画一些红色参考线，方便参考对齐）调整完成后的图第四步：百度坐标切图示例：BaiduMapTileCutter切百度地图瓦片W
2022-02-22 12:33:33
1475
原创 BaiduMapTileCutter切百度地图瓦片
准备工作1.安装好MapTiler Desktop切图工具2.准备好要切的图片3.获取图片中心点在地图上对应的经度和纬度值获取方式：先将百度地图底图与业务底图放在PS同一个画布，然后拉参考线标出中心点再将业务底图隐藏，可以看到标记的点在地图的位置然后打开百度地图拾取坐标系统在地图上找到标记的位置，点击获取经纬度（例子：116.403263,39.92455）设置切图参数1.打开BaiduMapTileCutter软件，选择业务底图文件，然后跟着下一步操作2.将之前复制的经纬度
2022-02-22 12:31:24
2614
1
原创 Nodejs koa2使用koa2-proxy-middleware实现代理
安装npm install --save-dev koa2-proxy-middleware使用const Koa = require('koa');const proxy = require('koa2-proxy-middleware');const bodyparser = require('koa-bodyparser'); const app = new Koa(); const options = { targets: { '/user': { //
2021-12-22 10:02:46
2420
原创 VSCode设置Live Server https
一、准备证书OpenSSL生成本地https测试证书阿里云免费SSL证书申请二、安装Live Server三、配置setttings.jsonsetttings.json中增加一下配置"liveServer.settings.https": { "enable": true, "cert": "C:\\cert\\server.pem", // 证书 "key": "C:\\cert\\privkey.pem", // 私钥 "passphrase": ""}
2021-12-16 14:27:04
7938
原创 OpenSSL生成本地https测试证书
一、准备工作1.本地安装好git工具2.创建一个cert文件夹用来放证书文件二、创建证书第一步：使用openssl生成密钥privkey.pem1.操作系统说明windows系统：在cert目录中打开git命令窗口（注意：不是CMD窗口）linux或mac系统：cd定位到cert目录cd /xxx/cert2.然后执行以下命令生成privkey.pemopenssl genrsa -out privkey.pem 1024/2038如果出现提示：genrsa: Can’t pa
2021-12-16 13:59:31
8423
3
原创 Windows本地Nginx搭建https测试环境
第一步：使用openssl生成密钥privkey.pem1.在nginx安装目录下conf文件夹创建cert文件夹2.在cert目录下中打开git命令窗口（不是CMD窗口），然后执行以下命令生成privkey.pemopenssl genrsa -out privkey.pem 1024/2038如果出现提示：genrsa: Can’t parse “1024/2038” as a number，请删除命令最后面的/2038再执行第二步：使用密钥privkey.pem生成证书server.p
2021-12-14 17:35:59
2561
原创 Nodejs koa2上传文件
1.创建项目目录nodejs-koa-upload/├── public/│ ├── upload/│ └── index.html└── src/ └── app.js2.初始化项目npm init -y3.安装依赖包cnpm install koa koa-router koa-body koa-static -S包名作用koaweb服务koa-router路由koa-body解析请求koa-static静态资源服务
2021-11-19 20:16:21
1220
原创 Leaflet地图标记旋转角度、线条方向箭头示例
标记旋转角度<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
2021-11-03 11:12:37
2484
原创 Nginx中proxy_pass末尾带斜杠/和不带的区别
如果带/，表示根目录，忽略loacation的路径如果不带/，则将location后面的路径加进去一、proxy_pass末尾有斜杠location /api/ { proxy_pass http://127.0.0.1:8000/;}请求地址：http://localhost/api/test转发地址：http://127.0.0.1:8000/test二、proxy_pass末尾无斜杠location /api/ { proxy_pass http://127..
2021-10-29 16:19:09
13032
4
原创 Nodejs原生实现开发生产环境编译打包
一、创建项目结构1.创建项目根目录比如项目命名为test，创建一个test文件夹2.初始化项目在test目录下终端执行命令初始化项目npm init -y3.创建业务源码1.在项目根目录下创建src文件夹2.在src目录下创建index.js// index.jsexport default { baseUrl: $$APP_BASE_URL$$,}4.创建编译程序1.在项目根目录下创建build文件夹2.在build目录下创建build.js// build.js
2021-10-22 20:04:02
4927
原创 Nodejs原生实现搭建静态资源web服务器
一、编写服务程序const http = require('http'); const fs = require('fs'); const path = require('path');const url = require('url');const zlib = require('zlib'); // gzip压缩模块const mime = require('mime-types'); // 需npm安装/** * 静态服务器 * @param {String} options.ho
2021-10-22 18:55:12
881
原创 Nodejs同步异步批量复制删除替换文件/文件夹
1.复制文件或文件夹const fs = require('fs'); //文件模块const path = require('path'); //系统路径模块/** * 复制文件或文件夹 * @param {*} sourcePath 源始路径，参数可以是文件或文件夹 * @param {*} targetPath 目标路径，参数可以是文件或文件夹 */function copyFile(sourcePath, targetPath) { const fromPath = pat
2021-10-18 17:00:44
2412
1
原创 Nodejs环境变量process.env打包
一、processprocess 对象是一个（global）全局变量，提供有关当前 Node.js 进程的信息并对其进行控制。process官方文档二、process.envprocess.env 属性会返回包含用户环境的对象，能返回项目运行所在环境的一些信息。process.env官方文档三、process.env.NODE_ENVNODE_ENV是一个用户自定义的变量，它的用途是判断生产环境或开发环境。通过加载.env文件方式配置环境变量1.在项目根目录创建 .env 文件
2021-10-09 10:48:25
3301
原创 Leaflet地图常用插件
Leaflet地图常用插件 插件名称 功能 地址 Leaflet.markercluster marker聚合 https://github.com/Leaflet/Leaflet.markercluster Leaflet.PolylineDecorator 线条加箭头 https://github.com/bbecquet/Leaflet.PolylineDecorator Leaflet.rotatedMarker mar
2021-09-28 16:35:11
736
原创 npm源及代理镜像设置
查看代理信息（当前配置）npm config list设置http/https代理npm config set proxy=http://代理服务器地址:端口npm config set https-proxy http://server:port设置需要用户名和密码的http/https代理npm config set proxy http://username:password@server:portnpm confit set https-proxy http://username:
2021-08-25 10:59:52
1681
1
原创 VSCode设置代理
1.打开系统设置2.选中扩展项，点击编辑配置json文件3.在配置中末尾加上这两句"http.proxy": "http://10.78.64.3:8080","http.proxyStrictSSL": false
2021-08-25 10:45:20
33035
原创 MapTiler Desktop切leaflet地图瓦片
准备工作1.安装好MapTiler Desktop切图工具2.准备好要切的图片3.获取图片三个角（左上角、右上角、右下角）在地图上对应的经度和纬度共六个值，记录备用格式：左上角经度 左上角纬度 右上角经度 右上角纬度 右下角经度 右下角纬度例子：116.385340 39.921487 116.396348 39.921487 116.396348 39.911299注：获取方式可自行百度，如通过在线地图坐标拾取系统获取、地图工具获取等设置切图参数1.打开MapTiler Deskto
2021-08-17 17:49:31
2595
1
原创 Leaflet地图加载百度底图
源代码<!DOCTYPE html><html style="padding:0;margin:0;"><head><meta charset="utf-8"/><title></title><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css"><script src="http.
2021-08-11 16:33:18
863
原创 Leaflet地图基础示例
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <.
2021-08-11 15:59:22
1827
原创 select事件监听及选中
change事件<select onchange="selectChange"> <option value="500">500米</option> <option value="1000">1000米</option> <option value="3000">3000米</option> <option value="5000">5000米</option>&l
2021-06-10 11:29:24
12764
原创 计算两个经纬度坐标点之间的距离
/** * 计算两个经纬度坐标点之间的距离 * @param {object} lnglatA 起点坐标点 * @param {object} lnglatB 终点坐标点 * @return {number} 计算后得出两点之间的距离 */function getDistance(lnglatA, lnglatB) { var radLat1 = getRad(lnglatA.lat); var radLat2 = getRad(lnglatB.lat); var a
2021-06-07 18:07:32
997
原创 两个经纬度之间补点
先调用百度的API计算2个点之间的距离,再根据拆分后每个点的距离(如20),计算这2个点之间有多少个点,设为n,再后一个点减去前一个点计算2个点的经纬度差,再用经度和纬度去除以n计算出每段经度和纬度的数据,然后就根据n进行循环,在第一个点的基础上加上经纬度差*n,大概就这样...
2021-06-07 17:54:55
3040
2
原创 经纬度坐标小数位与精度的对应关系
小数点后位数 精度(约等于) 第1位 10000米 第2位 1000米 第3位 100米 第4位 ...
2021-05-31 16:20:59
35885
1
原创 地图坐标系
坐标系代号 中文名称 地图引擎 WGS-84 地心坐标系，GPS原始坐标体系 谷歌地图、微软bing地图、leaflet(可转) GCJ-02 国测局坐标，火星坐标系 高德地...
2021-05-27 12:28:57
217
原创 vue v-html新增点击图片放大预览功能组件
封装组件 PicturePreview<template> <div v-if="visible" class="preview-container" @click.stop="previewClick($event)"> <span class="preview-close" @click.stop="closeClick"></span> <img class="preview-img" :src="src"
2021-04-15 11:57:43
1265
1
原创 vue项目添加百度统计
第一步：准备工作1.使用百度账号登录百度统计平台(没有百度账号先注册一个)https://tongji.baidu.com/web/welcome/login2.登录后进入管理 >账户管理 > 网站列表 > 新增网站3.录入网站信息后保存4.代码管理 > 代码获取 > 复制代码第二步：vue项目配置1.打开public/index.html，把复制的代码粘贴到<div id=“app”></div>后面，然后在粘贴后的script标
2021-04-08 17:25:25
5929
原创 vue-cli在index.html判断环境变量加载不同代码
index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale
2021-04-08 12:07:49
4254
2
原创 Leaflet使用Nginx代理，实现内网访问外网百度地图瓦片
解决思路：1.在瓦片地址前加上内网ip和端口2.在可同时访问内网和外网的机器上部署nginx3.通过nginx监听内网端口，把瓦片的请求转发到外网地图页面<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Leaflet使用Nginx代理实现内网访问百度地图瓦片</title><link rel="stylesheet" href="js/leaf
2021-04-01 15:10:56
1198
原创 地图瓦片服务地址
高德http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}Leaflethttp://{s}.tile.osm.org/{z}/{x}/{y}.png百度http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z
2021-03-30 14:17:17
2255
2
原创 Vue中使用Prismjs高亮TinyMCE富文本编辑保存的代码
1.安装Prism.jscnpm install prismjs -S2.安装prismjs编译器cnpm install babel-plugin-prismjs -D3.编辑babel配置不同cli版本或模式的babel配置文件名不同，一般是放在babel.config.js、.babelrc、package.json这些文件中的某一个文件中主要代码是plugins属性下包裹prismjs的这个数组，以下babel.config.js文件示例：module.exports = {
2021-02-25 19:55:42
1676
1
原创 vue路由导航方法 router.push，router.replace，router.go，router.back，router. forward
方法说明 router.push(url) 导航到新url，向 history栈添加一条新访问记录，等同于window.history.pushState router.replace(url) 导航到新url，替换 history 栈中当前记录，等同于window.history.replaceState router.go(num) 导航到指定步数的记录，num为正数是前进，为负数是后退，为0的时候是刷新当前页面，等同于window.histo...
2020-12-30 15:04:28
2731
原创 CSS Flex布局
换行垂直居中CSS.flex-center-vertical { display: flex; flex-flow: column; align-items: center;}
2020-12-29 17:19:33
1100
原创 前后端请求设置签名验证，提升接口安全
前端请求设置签名签名生成import md5 from 'js-md5';export default { //请求头header配置，data是请求的参数 getBaseHeaders(data) { let dataSort = this.sortByKey(data); let dataStr = this.strJoin(dataSort); let urlStr = window.location.origin; le
2020-12-19 10:51:36
5116
7
原创 elementui快捷时间
private pickerOptions: any = { shortcuts: [ { text: '最近1小时', onClick(picker: any) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 1000 *
2020-12-18 10:58:37
196
原创 Hosts+Nginx+Nodejs 实现本地项目模拟域名调试单点登录
处理思路示意图第一步：修改hosts文件1.以管理员权限打开C:\Windows\System32\drivers\etc\hosts文件2.在文件内容最后新增以下两行：127.0.0.1 lihefei.com127.0.0.1 blog.lihefei.com第二步：修改nginx.conf文件1.打开nginx安装目录\conf\nginx.conf文件2.新增和修改server代理配置：server { listen 80; server
2020-12-14 12:39:34
774
原创 elementui日期时间选择限制
参考文章https://blog.youkuaiyun.com/qq_36747046/article/details/106946325https://blog.youkuaiyun.com/super__code/article/details/107098295https://linzhji.blog.youkuaiyun.com/article/details/105373318https://blog.youkuaiyun.com/chi1130/article/details/88806673
2020-11-20 20:02:03
171
转载 全球最火的程序员学习路线！
国外有一个爆火的开发人员学习路线，目前已经在 Github收获了 131 k+ star，Star 数量在 Github 所有仓库中排名第 9 。这个仓库有多火就不用说了吧！这仓库的名字叫做“developer-roadmap”，其包括的学习路线涵盖：前端、后端、DevOps、Android、React、PostgraSQL DBA。另外，测试的学习路线还在路上。前端学习路线下图就是这个仓库关于前端的学习路线的中文翻译版本。有了这个学习路线之后，学习前端的话再也不怕不知道学啥了！![在这里插入图
2020-10-30 15:00:56
2803
原创 Electron-builder打包vue桌面程序安装包
准备工作已完成Electron打包vue项目成桌面端程序此文章一、二、三、四步一、安装打包工具 electron-packagercnpm install electron-builder -g二、修改package.json在package.json的基础上新增"build": { "productName": "electron桌面端", "appId": "com.lihefei.electron", "copyright": "© lihefei", "
2020-09-27 17:12:28
1005
原创 Electron程序用Inno Setup或NSIS生成安装包
绿色程序文件比较多，而且体积较大不利于文件传输打包成安装包是一个不错的选择，下面介绍Inno Setup和NSIS两种软件的打安包方式方法一：用Inno Setup打安装包1.软件下载地址：https://files.jrsoftware.org/is/6/innosetup-6.0.5.exe2.下载安装完成后开始打包步骤添加开机自动启动注册表[Registry]Root: HKLM; Subkey: "SOFTWARE\Microsoft\Windows\Curre
2020-09-25 15:40:25
1960
HTML5压缩图片.zip
2019-10-15
React Native基础视频教程
2018-12-11
听晴明老师从头讲React Native
2018-12-11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人