张景源-CSDN博客

原创常用的前端地图框架（WebGIS框架）

1. LeafletLeaflet 是最著名的前端地图可视化库，它开源、体积小、结构清晰、简单易用。2. Mapbox GL JSMapbox GL JS 是目前最新潮的前端地图库，它的矢量压缩、动态样式和三维性能令人印象深刻。它本身是开源的，但一般依赖于Mapbox公司提供的底图服务。3. ArcGIS API for JSArcGIS API for JS 是较为学院派的前端地图库，它是ArcGIS开发套件中的一部分，和桌面端和服务器端ArcGIS软件有较好的协作。它不开源且收费不低，在学术场

2020-11-20 18:59:33 21578 4

原创使用MCD12C1数据绘制全球土地覆盖类型图

使用MCD12C1数据绘制全球土地覆盖类型图MCD12数据是利用Terra和Aqua两颗卫星遥感获得的土地覆盖类型数据，MCD12C1是其中分辨率约为0.05°的版本，适合做全球尺度的绘图。MCD12Q1为与之相似的但精度更高的数据。该数据可以在USGS或NASA中下载，格式为HDF。使用matlab(R2017b)。clear;clc;首先读取数据（HDF格式） ...

2018-04-13 19:56:26 11322 13

原创【Element-UI】el-cascader 组件删除异常

使用 Element-UI 的 el-cascader 组件时，删除回显的选项，会出现排列顺序的异常。中被修复，即升级 Element-UI 到 2.15.7 之后的版本即可。

2023-06-25 16:42:07 594

原创使用 whistle 在 macOS 上进行抓包

使用 whistle 在 macOS 上进行抓包

2023-02-16 19:31:27 1193 1

原创 nuxt 不支持 replaceAll 方法

nuxt 不支持 replaceAll 方法

2022-10-08 21:25:01 579

原创微信小程序 FileSystemManager.rmdir 安卓兼容性问题

微信小程序 FileSystemManager.rmdir 安卓兼容性问题

2022-10-01 00:00:00 773

原创 JS Array 的 map() 方法和 await 一起使用

在对数组进行逐个异步操作的时候，想使用 await 来获取操作后的数组，尝试了如下的写法：const resArr = await arr.map(async (item)=>{ const resItem = await query(item) // 异步操作 return resItem})这样的写法是不正确的，因为 Array.prototype.map() 不会返回一个 Promise。可以采用如下的写法const promiseArr = arr.map((item)=&gt

2022-04-28 22:12:09 1329

原创前端使用 UserAgent 判断是否是移动端

直接上代码function isUserMobile() { const ua = navigator.userAgent.toLowerCase(); return /mobile|android|iphone|ipod|phone|ipad/i.test(ua);}

2022-03-16 23:28:29 2332

原创 npm install 报错 node_modules 中 no such file or directory 的一种可能原因

在 npm install 安装依赖时，始终出现node_modules 中 no such file or directory，经过切换 node 版本、删除重新 install 等操作后，不能解决问题。经过排查，发现是 npm workspaces 配置出现问题。在 npm 7.x 以上版本中，npm install 时会检查 package.json 中的’workspaces’字段，并将其中的子项目链接到 node_modules 中，相当于自动的 npm link。此时，若子项目未预先编译，则会

2022-01-26 11:40:24 12486 3

原创 npm 将全局安装的包安装在哪里？

使用npm root -g命令查看 npm 全局包安装的地址例如，在mac上使用 nvm 时，npm 全局包的安装地址为:➜ ~ npm root -g/Users/you/.nvm/versions/node/v14.18.3/lib/node_modules

2022-01-26 10:17:14 2784

原创前端跨域问题

什么是跨域问题？跨域问题，即浏览器报 Error: Access to XMLHttpRequest at ‘http://example1.com’ from origin ‘http://example2.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 这个错误。这是因为：处于安全原因，浏览器会限制由脚本发起的

2021-10-08 04:25:24 321

原创使用 appendChild 添加 SVG 元素不生效

在使用 SVG 时，需要使用 appendChild 来添加元素。但是如下的写法是不生效的：let newElement = document.createElement('rect');newElement.setAttribute('fill','orange');newElement.setAttribute('width','200');newElement.setAttribute('height','200');document.getElementById('svg-drawing

2021-07-23 11:33:13 1386 1

原创在 Next 页面中添加 meta 信息

Next.js 暴露了一个内置组件 head，用于将 HTML 标签添加到页面的 head 中，可以借用此添加 meta 信息。例如：import Head from 'next/head'function IndexPage() { return ( <div> <Head> <title>My page title</title> <meta name="viewport" conten

2021-05-12 14:50:58 2046

原创 2021 前端校招面试知识点（八股文）整理

1. JavaScript基本数据类型 (7种)this 的指向 (new, 隐式绑定, 显式绑定)Function 的 call, apply, bind 方法Promise, eventloop, 宏任务和微任务闭包 (概念, 用途, 手写)原型链继承 (extends, 原型链继承, 构造函数继承, 组合继承, 寄生组合继承)深拷贝和浅拷贝事件冒泡/捕获, 事件委托, 阻止冒泡, 哪些事件不能冒泡sort() 的复杂度2. 浏览器回流和重绘http 缓存, 协商缓存c

2021-04-12 14:06:55 12205

原创 [Mapbox v2] y is not defined / _createClass is not defined

在 React 或 Vue 使用 Mapbox GL JS v2 时出现了如下的错误：这是 Babel 的转译所导致的（Github 中的 Issue：Uncaught ReferenceError: _createClass is not defined (after transpiling with Babel)）可以通过设置 webpack ，用 ! 来禁用所有 loaders 来避免，即，在 import 时在 mapbox-gl 前加一个 ‘!’（用上一行的 // eslint-d

2021-03-24 18:13:25 1389 1

原创 Python 爬取 Google Map POI

Google Map 的 API文档：https://developers.google.com/maps/documentation/places/web-service/search#PlaceSearchRequests这里使用的其中的 Place Search Requests 接口。需要先注册原理上是按照一定的格点来请求周围的POI。每次请求会返回大约十几个POI点信息，类似于一种采样，如果在POI比较密集的地区，格网比较大会漏过许多POI。下面这段代码爬取的是曼谷城区的部分POI# 从谷

2021-03-08 19:15:58 8730 31

原创 paramiko sftp 创建一个多级路径

在 linux 中我们可以通过 mkdir -p 路径的方式来创建一个多级路径，但在 paramiko sftp 中似乎没有对应的方法可以直接使用。我们可以通过通过如下的方法来创建目录并存储文件。 mysftp = paramiko.Transport((SFTP_HOST,SFTP_PORT)) mysftp.connect(username=SFTP_USERNAME, password=SFTP_PASSWORD) sftpClient = paramiko.SFTPC

2021-02-24 10:39:00 3314

原创在新线程中使用 apscheduler 时，报错: There is no current event loop in thread

在 Python 后端程序中需要使用定时任务时，我们考虑在一个新线程中使用 apscheduler 设置定时任务。出现了RuntimeError: There is no current event loop in thread 'Dummy-1'.的错误。而在主线程中使用 apscheduler 则不会。这是因为，apscheduler 中使用了 asyncio.get_event_loop() ，而此时不存在 event loop。默认情况下，在主线程中时，若没有event loop

2021-02-02 15:27:40 5773

原创 Python Flask 后端动态生成 csv 文件并返回

# 测试数据data = [ ['Jack','jack@abc.com'], ['Ben','ben@abc.com'], ['jerry','jerry@abc.com'] ]@app.route('/api/exportEmails', methods=['GET'])def exportEmails(): # 定义一个生成器 (generate)，逐行生成，实现流式传输 def generate(): # 用 StringIO 在内存中写，不会生成实际文件

2021-01-29 12:10:19 3048

原创 Vue 报错 Unexpected side effect in “...“ computed property

Vue 的计算属性 (computed) 中应当仅包含用于返回值的计算，不应该包含 DOM操作，修改外部变量，异步操作等。这些操作应该在侦听器 (watch) 中实现

2021-01-27 11:28:46 19492 3

原创 nginx: 413 Request Entity Too Large

Request 的体积超过了 Nginx 的限制在 nginx.conf 中的 http{} 中添加（或修改）client_max_body_size 10m;设置 request 的最大体积为 10m (或根据需要设置)参考文档 http://nginx.org/en/docs/http/ngx_http_core_module.html#client_max_body_size...

2021-01-21 16:13:06 160

原创 React 中实现滚轮触发的横向滚动

在要滚动的组件上添加 onWheel事件回调函数yWheel <div ref={this.container} className={style.container} onWheel={this.yWheel}> {this.listDom()} </div>定义yWheel yWheel(e) { e.currentTarget.scrollLeft += e.deltaY; }...

2021-01-19 15:25:32 1654

原创 Axios 取消前一次请求

在对一些按钮点击或者输入事件绑定API请求的时候，当点击、输入过快时，可能出现后一次请求会比前一次请求先到达的情况，导致页面显示的信息没有更新到最后一个请求的结果。对于这种情况，Axios 提供了 cancel token，我们可以用它来实现：在发送后一个请求的时候，终止前一个请求的回调。Axios 的 cancel token 文档代码如下：import axios from 'axios'const CancelToken = axios.CancelToken;let cancel =

2021-01-18 16:36:42 2678

原创 v-charts 报错: Cannot read property ‘scale‘ of undefined

是 echarts 的版本问题，可以npm remove echarts再指定安装 echarts 4.9 版本npm install echarts@4.9.0即可解决问题

2021-01-11 15:56:48 891 1

原创 Canvas 获取点击事件的相对位置

function handleClick(e){ myCanvas = document.getElementById("myCanvas") const localXY = { x: e.clientX - myCanvas.getBoundingClientRect().left y: e.clientY - myCanvas.getBoundingClientRect().top }}

2021-01-07 11:59:43 1410

原创 Vue CLI 的 env 文件中定义的环境变量不生效

自定义的变量必须以 VUE_APP_ 开头官方文档：https://cli.vuejs.org/zh/guide/mode-and-env.html#环境变量

2020-12-30 15:41:36 6372 1

原创 Python 后端 Flask 返回静态文件

后端from flask import Flaskfrom flask import send_from_directoryapp = Flask(__name__)app.run(debug=False)#......@app.route('/getLogFile', methods=['GET'])def getLogFile(): try: return send_from_directory('','log.txt') else:

2020-12-29 10:15:17 7499

原创向 Vuex 的 Actions 中的方法添加回调

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在 Vuex 中，我们会使用 Actions 进行一些异步操作，例如 API 请求。在许多情况下，我们需要对这样的操作添加回调，在此，我以登录提示为例介绍三种方法：第一种（不推荐）App.vuemethods: { ...mapActions([ 'login' ]), logSuccess(){ cons

2020-12-23 11:46:27 2158

翻译了不起的GIS：GIS相关软件、框架、代码、资源等的合集

本文的原文地址是 Awesome GIS，是由 sshuair 同学维护的GIS资源列表。该文件执行 MIT 开源协议，以下是其截至 2020年12月20日的备份。十分感谢 sshuair 同学整理的资源。Awesome GIS 是一个地理空间相关资源的集合，包括制图工具、空间分析工具、开发工具、数据、会议和组织、新闻机构、开放课程、一些精美的地图网站。Please contribute. Let’s make this guide better! Please follow the Contrib

2020-12-20 20:06:10 5253 1

空空如也

空空如也