- 博客(21)
- 收藏
- 关注
RSS订阅原创 JavaScript笔记之indexedDB的轻量化使用(增删改查)
前些日子尝试使用 HTML5 的 indexedDB，发现标准提出来的非关系型数据库真的很难用，根据自己理解基于 indexedDB 封装了一个轻量级的数据库管理类，能够快速的建表、存数据。1.需求分析介于 indexedDB 不人性化的事务操作，以及神奇的建表逻辑（只能通过升级数据库，在升级事件内建表！），考虑自己实际需求做了以下的取舍：因为轻量级原因，我只需要建多张表而不需要建数据库，因此全局只要维护一个数据库实例即可；因其离谱的建表逻辑（也有可能我没把握住），通过多次尝试，最终选择在需要.
2022-05-04 22:17:25
2014
原创 JavaScript笔记之Promise接口封装（deffer）
近期工作需要大量封装 promise 对象异步访问接口，考虑到之前的接口封装过于冗余，在学习了一些项目源码后，结合自己理解编写了适合快速 promise 封装的接口形式。具体代码如下：1.原先的接口封装通过返回 promise 对象进行函数返回值的异步封装。/** 这种 `promise` 接口封装方法，优点是结构清晰，缺点是不利用做内部链式调用，通过代码风格较差*/function test (_items) { return new Promise((resolve, reject).
2022-05-03 11:05:54
1514
原创 JavaScript笔记之队列与事件队列
最近根据工作需要参考网上资料编写了 JavaScript 的队列，并根据实际需求增加事件队列机制。具体代码如下：1.构建 队列 数据结构对象按照以往原型实现方式构建接口。/** 队列*/let Queue = function () { // 存储 this._items = []}/** 元素添加到队列中*/Queue.prototype.enqueue = function (element) { this._items.push(element)}/**.
2022-05-02 18:03:42
1696
原创 JavaScript笔记之实现事件的发布订阅
最近根据工作需要重新梳理了旧的前端事件发布订阅机制，完善了订阅流程。具体代码如下：1.创建 event 父级对象因本人个人喜好，目前仍然使用 es5 的 原型继承模式 设计类，并未直接使用 es6 的 class。如有需要，简单适配下即可。/** 事件对象*/let Event = function () { // 订阅事件列表 // 通过对象存储事件的 key 与 value，方便进行存储与管理 this._eventHandlerList = {}}2.注册事件确保先.
2021-12-19 16:12:00
1236
原创 Openlayers笔记之图片偏移的完整解决方案
本文介绍 Openlayers 如何实现图片偏移标注的功能，同时提供在图片缩放比例变化时纠正偏移的解决方法。1.创建矢量图层// 创建矢量源window.vectorSource = new window.ol.source.Vector({ features: []})// 创建并添加矢量标注图层window.olMap.addLayer(new window.ol.layer.Vector({ source: window.vectorSource, zIndex: 2}).
2021-12-19 15:52:38
4951
原创 Openlayers笔记之实现卷帘查看功能
在 Web GIS 的开发中，总是会遇到很多新奇的需求，比如卷帘查看功能。卷帘查看是为了方便比较不同时间、不同类型的两张地图在同一地点的差异性，通过卷帘操作能够快速对比出两张地图的差异性。1.实现思路Openlayers API文档中提供了控制地图范围的接口(Extent)。通过加载两张地图，移动前端绘制的卷帘轴，实时获取卷帘轴当前的屏幕坐标（x, y)，并实时控制上面层级地图的显示范围，即可实现该功能。2.具体实现首先创建图层，加载两张在线地图：/** 初始化地图*/function.
2021-08-16 16:24:31
1690
原创 Cesium笔记之加载GIF图
Ceisum 的 BillboardGraphics 方法支持加载并显示 jpeg png 等格式的图片资源。实际开发中我们经常会有 GIF 图加载的需求，而 Cesium 没有直接支持 GIF 格式的图片格式，那么怎么加载 GIF 图呢?1.解决思路GIF 图是通过时间轴叠加 N 张图片实现图片的动态变化。因此如果能够通过某种方式将 GIF 图再解构成一张张的图片，并通过 Cesium 的 BillboardGraphics 按照时间顺序更新图片，即能实现 GIF 图的加载！经过调研发现，第三方.
2021-08-13 17:04:03
3648
原创 利用iconv批量修改文件编码格式
iconv是linux系统命令，用于转换文件编码。当中文文件需要从gbk编码转为utf-8编码时，使用该命令能够快速的转换编码。使用如下：iconv -f 原编码 -t 新编码 originfile -o newfile利用bash脚本实现某个文件夹下批量文件的转码：#!/bin/bash# 转换编码方法function transferFile (){ for file...
2019-09-19 10:51:53
1002
原创 Python编码错误UnicodeEncodeError的一种解决方案
写完python自动构建脚本后，将其部署到docker中报了这么个错：UnicodeEncodeError: 'ascii' codec can't encode characters in position: ordinal not in range后来发现是python中zipFile压缩文件中有中文文件名，导致编码错误。一开始考虑是python自身的编码问题后，尝试：import ...
2019-09-19 10:05:08
1168
原创 一个简单的Node服务器
部署一个最简单的静态服务器'use strict';var url = require('url'), fs = require('fs'), http = require('http'), path = require('path');var server = http.createServer(function (req, res) { var pathn...
2019-07-24 18:55:07
178
原创 JavaScript笔记之简单实现一个ColorPicker
最近在开发中想要使用一个简单的颜色选择器，上网搜索之后发现大部分都是基于jQuery的，一些基于原生的选择器功能又很冗余。于是自己基于原生js写了一个只为实现简单pick功能的颜色选择器。1.创建面板容器// 创建一个div容器let edit_color_panel = document.createElement("div");2.简单设置容器样式edit_color_pan...
2019-05-05 14:58:27
832
原创 JavaScript笔记之对象赋值
前端开发中经常会遇到对象的拷贝赋值，因为JS对象的特殊原因，直接赋值其实传递的是地址而不是传值。很多时候我们并不希望传地址，下面介绍关于数组和对象的赋值小技巧：1.数组的赋值数组在JS中是一个特殊的对象，对数组的赋值操作实际上等同于对对象的赋值。// 循环赋值是最简单的一种赋值：let a_arrs = [1, 2, 3, 4, 5];let a_arrs_copy = [];...
2019-05-05 14:57:29
2325
原创 JavaScript笔记之编程规范
一份简洁自用的JavaScript编码规范。1.命名规范变量名、属性名、对象名、方法名等统一采用小驼峰式命名规范：let thisIsValue = "hello";let myObject = { firstKey: "", secondKey: ""};类名、文件名使用大驼峰命名规范：MyTest.jsclass MyClass { }function M...
2019-05-05 14:56:53
317
原创 Git笔记之简单入门
我所在的公司曾经长期使用SVN，SVN足够优秀但过于传统且多人合作效率很低。后来大佬们忍受不了低效的开发效率，在内网搭建了git服务器。Git无疑是现在最流行的版本控制系统，在全面推广使用git之后，大家开发都是：）的，少了很多不必要的麻烦和冲突。刚开始学习Git的时候，上网搜了很多教程发现介绍的都很复杂且晦涩（当然肯定有很多优秀的git入门教程，可能是我没有找到:( ），后来在自己琢磨下才慢...
2019-05-05 14:51:09
189
原创 Cesium笔记之地图清晰度解决方案
最近发现Cesium加载瓦片地图数据清晰度很差，特别是地图上的文字加载十分模糊，有的人说是Cesium引擎导致模糊，也有说是浏览器的原因导致模糊。在研究了很久之后，也找到了一些方法能够改善一下地图的清晰度。1.改善实体的文字和图片清晰度viewer.scene.fxaa = false;fxaa确实能够改善文本和图片的清晰度，API文档上fxaa属性的介绍：When true, ena...
2019-05-05 14:48:25
13165
6
原创 Cesium笔记之自定义镜头缩放
之前一直使用Cesium提供的官方插件进行镜头缩放控制，但是该插件居然有几千行代码，这中间包含了很多我用不到的功能。本文介绍如何利用Cesium接口，自定义开发一个简单的镜头缩放的插件。注：示例代码基于Vue框架1.思路要想实现镜头缩放控制，首先我们需要能够获取当前的镜头中心的位置，其次需要能够控制镜头根据指定中心位置和高度进行缩放。所幸的是这些Cesium都提供了接口给我们使用，虽然A...
2019-05-05 14:47:52
7752
5
原创 Cesium笔记之实体编辑
上文讲的是如何通过Cesium来完成一个实体的标绘，本文介绍如何对实体进行编辑。注：示例代码基于Vue框架。1.思路如果要对一个已经标绘完成的实体进行编辑，那么首先我需要获取到该实体的对象，同时应当生成编辑点进行拖拽编辑。Cesium提供了充分的监听器供我们使用，灵活的使用监听器和接口可以轻松的完成实体的编辑。下面是具体实现：2.初始化变量// 创建监听的handlerthis.h...
2019-05-05 14:47:07
5599
7
原创 Cesium笔记之标绘实体
在Ceisum开发中我们常常需要标绘实体，实体主要分为三类：点标（如点、图片、文本、音频、视频等）、线标（如多边形、贝塞尔等复杂曲线）、面标（如面、椭圆、矩形等）。本文主要介绍如何利用Cesium进行面的标绘，其他类似，具体可参考接口文档。注：示例代码基于Vue框架。1.理清标绘逻辑要在地球上标一个面标，那么首先需要开启一个监听器，监听地球的点击事件。点击事件获取点的位置后，应该转换成实...
2019-05-05 14:46:33
4581
3
原创 Cesium笔记之加载三维地图
Cesium提供了展示三维地形数据的接口，同时也提供了丰富的接口调用。但是由于API文档过于碎片，经过蛮长时间的研究学习，也算是掌握了如何利用Cesium在三维地形上进行标绘。注：示例代码基于Vue框架。1.加载三维地形地图网上可以下载多种高程数据，如果找不到也可以点击这个链接下载免费的数据gscloud.cn。下载好数据之后，调用接口加载地形数据。// 创建地形图层对象let t...
2019-05-05 14:45:42
3621
原创 Cesium笔记之小技巧
Cesium官方文档目前只支持全英文，加上大部分资料都是英文的，对于新手有些不太友好。鉴于在学习与工作中的经验，这边分享一些Cesium开发的小知识点和小技巧。1.去除Cesium图标和版本信息如果利用Cesium进行商业开发，那么Cesium的图标最好是要去掉的。viewer._cesiumWidget._creditContainer.style.display = "none"...
2019-05-02 20:36:35
5119
原创 Cesium笔记之快速入门
快速开始1.创建放置地图的容器<div id='map'></div>设置样式，使之全屏显示#map { position: absolute; width: 100%; height: 100%;}2.创建全局的Cesium视图对象window.viewer = new Cesium.Viewer('map', { animation...
2019-05-02 20:31:28
684
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人