
Web前端
文章平均质量分 93
qingyafan
分享云原生、GIS相关技术
展开
-
OpenLayers3 在 Mac 视网膜屏下的响应式设计
PPI,DPI与window.devicePixelRatio在谈这个主题之前,首先得明确两个概念:DPI、PPI,首先他们都表示图片的分辨率,其次它们有不同:DPI,Dots Per Inch,表示每英寸有多少个点,是打印的术语;PPI,Pixel Per Inch,表示每英寸有多少个像素,是显示器的术语。对 ppi 的印象,我是从苹果发布视网膜屏幕的 iPhone4 开始的,原创 2016-10-27 23:23:39 · 2246 阅读 · 1 评论 -
GIS 矢量切片(Vector Tile)-地图定制化的时代已经悄悄来临
前言 切片技术的简单介绍,以及传统栅格图片切片的不足现在最流行的地图底图技术是栅格切片底图,它们本质上是将空间数据分别渲染为不同缩放级别的地图图片,然后将各个级别的图片按照一定规则切分,按照一定的 “规则组织”,存储到硬盘或数据库中,构成一幅完整的地图。 图1 切片概念图相对于其他技术,切片地图有其优越性,例如有效减少了传输数据体积,多级缩放等。然而,栅格地图也有一些短处,缺乏实时性,数据完原创 2016-12-09 17:54:11 · 38929 阅读 · 40 评论 -
Openlayers - 点聚集,全球地震点聚集为例
GitHub地址:https://github.com/QingyaFan/openlayers-examples1. 描述点聚集指在某个缩放级别下,将临近(一般用像素距离衡量)的点聚合为一个点要素显示,这在房屋中介的等的地图找房功能中很常见,如下图。但是这样的例子并不恰当,地图找房里的聚集确切的说并不是点聚集,他们是在每一级别显示某一级区块,然后在区块多边形的质心或者什么地方设置一个点要...原创 2018-09-15 12:07:59 · 3064 阅读 · 0 评论 -
Web - Cookie & Session,从Laravel前后端分离遇到的问题说起
从利用PHP的框架Laravel5.2开发后端api说起,前端的应用与api是分离的,本来一起都很顺利,后来部署到ci上时,前端配置了域名,后端的api通过IP地址访问,当然后端的api配置了cors来允许跨域,这时api层的session都失效了。可以观察到的现象是,登录时session设置成功,然而在其它api检查session中存储的登录用户信息时,却为null。再次检查,发现浏览器发出...原创 2019-02-12 21:43:35 · 1647 阅读 · 0 评论 -
setTimeout, setInterval 与 requestAnimationFrame 隐藏的各种坑
使用 JavaScript 做动画时,或者做与时间有关的事情,你有三个选择:`setTimeout`, `setInterval` 和 `requestAnimationFrame` ,这三个函数有点类似,也有点区别,也有一些坑等你来踩。原创 2016-08-31 09:50:49 · 12865 阅读 · 1 评论 -
OpenLayers 3 之 添加地图鼠标右键菜单
添加鼠标右键菜单,首先我们要监听鼠标右键点击的操作,我们知道鼠标右键事件名是 `contextmenu`,当鼠标在 html 元素之上,点击鼠标右键,便会触发 `contextmenu` 事件,在 `contextmenu` 事件的回调函数中实现相应的显示菜单功能即可。那么在 openlayers 中,在地图中添加这个事件,我们从哪里下手呢?首先我们得了解 openlayers 的初始化页面流程...原创 2015-12-29 09:32:35 · 9855 阅读 · 3 评论 -
OpenLayers 3 之 事件体系详解
地图上的各种事件触发到底是怎么回事?熟悉前端的肯定知道 javascript 的事件机制,openlayers 既然是 javascript 实现的,那么它就也不例外,也遵循 W3C 的标准,只不过是 openlayers 进行的简化实现。文章首先讲解 openlayers 的事件结构实现,然后结合“切片WMS数据源”(ol.source.TileWMS)对象的事件机制进行实例分析。一. 介绍事件机原创 2016-05-04 09:19:12 · 23288 阅读 · 12 评论 -
HTML 行内元素 与 块级元素
行内元素一般是内容的容器,而块级元素一般是其他容器的容器。一般情况下,行内元素只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和其它元素和平共处于一行;而块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 width 和 height 属性,浏览器通常会在块级元素前后另起一个新行。原创 2016-08-15 23:38:22 · 13301 阅读 · 3 评论 -
AJAX 数据传输进度条设计与实现
AJAX 无疑是非常主流的客户端和服务器端通信的方式,AJAX 通信方式当然有很多优点,但是缺点也一定程度上是由优点造成的,因为AJAX 通信过程中,页面不会刷新,这在传输的数据量比较小的时候,是没有什么问题的,但是当数据量比较大的时候,页面就会长时间没有任何反应,可能让用户误以为请求失败,所以在数据传输没有完成的等待时间内,我们以一个进度条或者缓冲环给用户以正在通信的可视化效果,这样用户体验就会大大提升。原创 2015-10-15 17:57:07 · 8707 阅读 · 2 评论