qingyafan-CSDN博客

原创 Openlayers - 点聚集，全球地震点聚集为例

GitHub地址：https://github.com/QingyaFan/openlayers-examples1. 描述点聚集指在某个缩放级别下，将临近（一般用像素距离衡量）的点聚合为一个点要素显示，这在房屋中介的等的地图找房功能中很常见，如下图。但是这样的例子并不恰当，地图找房里的聚集确切的说并不是点聚集，他们是在每一级别显示某一级区块，然后在区块多边形的质心或者什么地方设置一个点要...

2018-09-15 12:07:59 3104

原创 Kubernetes - nginx-ingress 配置跳坑指南

GitHub地址： https://github.com/QingyaFan/container-cloud/blob/master/kubernetes-ingress-2018-06-e.mdIngress是Kubernetes集群对外暴露服务的一种推荐方式，Ingress其实是封装了nginx（也可以是traefic），背后还是nginx在发挥作用，Ingress的作用是不断检测服务的e...

2018-09-13 18:12:01 29708 8

原创 NFS - 共享文件

GitHub地址: https://github.com/QingyaFan/effective-backend一、是什么NFS是网络文件系统，用于在多个主机之间进行文件共享。实际的物理文件本身存储在nfs server的共享目录里，nfs client将本地某个目录挂载到nfs server共享的目录，访问本地的挂载目录，实际上都是通过网络访问nfs server的目录，从而达到共享文件...

2018-09-12 17:20:24 341

原创 Docker - Volumes

类比挂载磁盘我们可以把volume看做挂载磁盘，将宿主机的一个目录挂载到容器内的某个目录，那么实际的文件是存储在宿主机的目录的，容器内只是一个挂载目录，并不存储实际文件。用处容器的存储和网络都是和宿主机隔离的，Volume给了从宿主机访问容器内目录的方法。Volume经常用于持久化容器的数据，比如数据库；暴露配置文件，在宿主机方便的修改容器内的文件。持久化数据对于一个数...

2018-09-12 08:31:49 1061

原创 OpenLayer3 之实现拉框放大功能

几天前，有人给我发邮件询问如何实现划定一个矩形区域实现放大功能，即所谓的“拉框放大”，在 ol3 中，其实已有实现鼠标拖拽放大地图功能，默认需要配合 shift，按住shift，拖拽鼠标的同时，地图会放大，该组件名为 ol.interaction.DragZoom，该组件的缺点是不实用（哪一个非专业人员会想的按住shift拖动）。本文首先介绍该组件的实现，随后基于该组件，在地图上放置拉框按钮，实现一

2017-02-25 23:16:37 5874

原创 GIS 算法之拉默-道格拉斯-普克算法(ramer-douglas-peucker)

如今的 GIS 应用离不开互联网，即 “WebGIS”，GIS 一个显著的特点就是数据量大，数据异构，因此在网络中传输数据成为了影响 WebGIS 应用性能的瓶颈。在 Web 浏览器的应用中尤为明显，浏览器下载数据时，等待时间过长，会造成浏览器假死现象。如何减小数据量，用小的数据量做出类似的大数据量效果是一个值得研究的问题，纵观 WebGIS 的发展史，不难得出结论...

2016-11-25 13:58:31 13562

原创 OpenLayers3 在 Mac 视网膜屏下的响应式设计

PPI,DPI与window.devicePixelRatio在谈这个主题之前，首先得明确两个概念：DPI、PPI，首先他们都表示图片的分辨率，其次它们有不同：DPI，Dots Per Inch，表示每英寸有多少个点，是打印的术语；PPI，Pixel Per Inch，表示每英寸有多少个像素，是显示器的术语。对 ppi 的印象，我是从苹果发布视网膜屏幕的 iPhone4 开始的，

2016-10-27 23:23:39 2270

原创 setTimeout, setInterval 与 requestAnimationFrame 隐藏的各种坑

使用 JavaScript 做动画时，或者做与时间有关的事情，你有三个选择：`setTimeout`, `setInterval` 和 `requestAnimationFrame` ，这三个函数有点类似，也有点区别，也有一些坑等你来踩。

2016-08-31 09:50:49 12949

原创 HTML 行内元素与块级元素

行内元素一般是内容的容器，而块级元素一般是其他容器的容器。一般情况下，行内元素只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和其它元素和平共处于一行；而块级元素可以包含行内元素和其它块级元素，且占据父元素的整个空间，可以设置 width 和 height 属性，浏览器通常会在块级元素前后另起一个新行。

2016-08-15 23:38:22 13367 3

原创 OpenLayers 3 之添加地图网格

在地图上渲染一层类似于经纬线的网格层，更有利于准确的确定区域，在WGS84坐标系下，以度，分，秒为单位，称之为“经纬网”，其网格是以经纬线来划分的。在OpenLayers3中，渲染网格的类是“ol.Graticule”。本文中，我结合实例，讲解“ol.Graticule”的用法和具体实现。

2016-06-02 13:34:06 16490 7

原创 MapServer 之使用 MySQL 数据

MySQL 从 4.1 开始支持空间数据类型，可能由于历史原因，或者很多技术人员并不了解 GIS，很多空间位置数据存储并没有使用专有的空间数据类型字段，而是使用了两个 float 类型存储，分别代表经度和纬度，经纬度数据一般是来自 GPS 传感器；当然还有一些数据就直接利用了 MySQL 的空间扩展，空间数据表中的 geometry 类型存储空间数据。那么这两种在 MySQL 数据库中存储的空间信息怎么利用呢？

2016-05-14 21:03:25 10452

原创 OpenLayers 3 之事件体系详解

地图上的各种事件触发到底是怎么回事？熟悉前端的肯定知道 javascript 的事件机制，openlayers 既然是 javascript 实现的，那么它就也不例外，也遵循 W3C 的标准，只不过是 openlayers 进行的简化实现。文章首先讲解 openlayers 的事件结构实现，然后结合“切片WMS数据源”（ol.source.TileWMS）对象的事件机制进行实例分析。一. 介绍事件机

2016-05-04 09:19:12 23331

原创 MapServer 之发布网络覆盖数据服务（WCS-Web Coverage Service）

今天我们讲一下使用 mapserver 发布 OGC 的三大网络地图服务的最后一个 - WCS，wcs 主要是规定了通过网络提供访问 coverage 数据的标准，那么什么是 coverage 数据呢？狭义的说，可以认为 mapserver wcs 中发布的 coverage 数据就是卫星影像或者 dem。广义上说，coverage 数据主要是指时空现象的数字表示，可以是多维的，例如一维的传感器

2016-03-01 11:31:42 5216

原创 OpenLayers 3 之实时追踪轨迹-获取最后添加的要素

问题描述有时，往往有这样的需求：每隔一段时间查询一个物体的位置，然后将这个位置绘制在地图上，中间的点用普通的样式标识，当前位置（也就是最新的点位置）使用一个特殊的样式。我们可以这样实现，查询到一个新位置，将改点添加到地图上的同时，赋予其特殊的样式，当再查询到有新的位置时，获取最后添加的要素，删除其特殊样式，然后添加新的要素点位置。那么，问题来了：怎么获取最后添加的要素呢？

2016-01-08 09:09:32 8827

原创 OpenLayers 3 之添加地图鼠标右键菜单

添加鼠标右键菜单，首先我们要监听鼠标右键点击的操作，我们知道鼠标右键事件名是 `contextmenu`，当鼠标在 html 元素之上，点击鼠标右键，便会触发 `contextmenu` 事件，在 `contextmenu` 事件的回调函数中实现相应的显示菜单功能即可。那么在 openlayers 中，在地图中添加这个事件，我们从哪里下手呢？首先我们得了解 openlayers 的初始化页面流程...

2015-12-29 09:32:35 9894 3

原创 OpenLayers 3 之扩展自定义控件--以切换图层控件为例

openlayers 中的控件，是一个固定在页面某个位置的可见的DOM元素，它们可能包含可操作的按钮，也可能只是单纯的展示信息，它们的位置及其样式是由与其关联的CSS样式决定的。默认情况下，它们都位于一个CSS 类（class）为`ol.overlaycontainer-stopevent`的元素内，当然也可以使用其他的自定义的DOM容器元素。

2015-12-21 08:47:34 10503 1

原创 MapServer 之绘制地图图例

MapServer 渲染的地图中，颜色与种类的对应是用图例表示的，图例是多个符号与种类对应的图片，在 GIS 制作的专题图中图例很常见。如下图就是一个比较常见的图例，壁挂的中国地图中都会有，主要是标识作用。那我们在 MapServer 中怎么根据其渲染的地图，动态生成一个图例呢？这篇文章主要涉及这些内容。

2015-12-14 09:22:53 7035

原创论解决问题的一般做法 - 以 MapServer 为例

当你使用一个开源软件时，遇到问题，是不是一筹莫展呢？因为我们对使用的软件不了解，不出问题还好，如果出了问题，如果没有调试信息，那我们只能自行百度、Google，就算你连 Bing 都用上，如果你用的软件使用不是很广泛，那找到解决方案的希望也是很渺茫。然后，你就不断搜索答案，一遍一遍的尝试错误的解决方案，到头来时间都浪费了，你将会感慨你虚度了一天，第二天你去问论坛的大神，问 QQ 群里的大牛，然而没有人“理你”，可能

2015-12-05 00:07:55 2172

原创 MapServer 之发布网络要素服务（WFS-Web Feature Service）

上一篇关于 MapServer 的文章，我们主要配置了 MapServer 支持 WMS，这篇文章中我主要讲怎么配置 MapServer 支持 WFS（网络要素服务），WFS 是 Web Feature Service 的简写，也就是网络要素服务，提供地图数据要素一级数据的服务，例如接受客户端请求要素、编辑要素和删除要素等于要素有关的操作的请求。

2015-12-03 10:51:02 5700

原创 OpenLayers 3 之 Overlay（覆盖物）详解

Overlay 从名字看，是覆盖图、覆盖物的意思，主要的用途就是在地图之上再覆盖一层，用以显示额外的可见元素，可见元素一般是 HTML 元素，利用 overlay，可以将可见元素放置到地图的任意位置，形成地图上再浮动一层的效果。例如在地图上相应的坐标放置一个标志，标签，利用 overlay 都可以做到，具体来说，点击地图上某位置，在点击位置弹出弹出框就是利用了 overlay。

2015-11-20 16:25:01 22888 4

原创 MapServer 之发布 WMS GetFeatureInfo 服务

对于一张图片地图，如果想实现点击地图上一点，地图在相应位置弹出小窗口，显示所点区域的信息这样的功能。要首先获取鼠标点击的坐标，然后在数据库中判断该点在哪个要素的范围内，最后返回包含该点的要素信息。然而我们既然懂这个原理，就可以先看看有没有实现，没必要去重新造轮子。MapServer 就已经实现了该服务，因为这是 WMS 的 GetFeatureInfo 操作。

2015-11-16 08:54:43 5025

原创 MapServer 之 mapfile 配置文件

MapServer 是一个 web 程序，遵循基本的 CGI 规范，接受输入，返回输出。它的输入参数并不是通过 url 传递，而是由 mapfile 指定，mapfile 是一个文本文件，后缀名为 .map，严格的说，这个 mapfile 是一个配置文件，告诉 MapServer 主程序（也就是渲染程序）输入的空间数据的位置、输出地图的格式，样式等等。

2015-10-19 09:10:14 7129 6

原创 AJAX 数据传输进度条设计与实现

AJAX 无疑是非常主流的客户端和服务器端通信的方式，AJAX 通信方式当然有很多优点，但是缺点也一定程度上是由优点造成的，因为AJAX 通信过程中，页面不会刷新，这在传输的数据量比较小的时候，是没有什么问题的，但是当数据量比较大的时候，页面就会长时间没有任何反应，可能让用户误以为请求失败，所以在数据传输没有完成的等待时间内，我们以一个进度条或者缓冲环给用户以正在通信的可视化效果，这样用户体验就会大大提升。

2015-10-15 17:57:07 8731

原创 MySQL Server 解压包配置安装

MySQL 有两种安装方式，直接解压包安装和 .msi 安装包，安装包没什么好说的，我们说说直接解压包怎么配置。首先官方下载 Zip Archive，然后解压到想要安装的路径，如果你使用安装包，默认是安装到 C:/Program Files/MySQL目录，所以你可以按照这个路径新建文件夹，解压到该目录。解压后就要通过修改 MySQL 的默认配置文件，然后执行相应的

2015-08-10 17:13:12 1367

原创 MapServer 之发布网络地图服务（WMS-Web Map Service）

WMS（Web Map Service）从地理信息产生包含空间数据的地图，WMS将地图定义为适合在电脑屏幕上的数字图片，地图并不是数据本身，而是将原来的数据渲染成图片格式（PNG、GIF、JPEG）、基于矢量的元素SVG，或者WebCGM格式。MapServer发布WMS，是通过一个map格式的文件来定义WMS的访问路径；数据源的来源，包含数据库的和本地的文件；还包含一些WMS图层的样式，包含配色，线条粗细，是否用相

2015-06-15 09:23:59 17046

原创 ArcGIS 制作 “地图切片（tile）”

地图切片简介地图切片，就是将一幅地图切成很多大小一致的小块，调用时候，只有需要的部分才会发送过去，节省带宽的同时，还节省了服务器端实时渲染地图的时间。但是地图切片有一个特点，就是不适合经常变动，或者说实时动态的数据，因为地图切片是地图服务器端事先渲染好的，而且制作地图切片是一个漫长的过程，可以说真的需要很长时间，但是用一次的耗费，换来性能的提升和节省多次渲染的时间是值得的。切

2015-06-07 07:51:24 20925 6

原创 OpenLayers 3 之地图矢量图层（ol.layer.Vector）详解

在 GIS 中，地图一般分为两大类：栅格地图和矢量地图，栅格地图其实就是数码照片，只不过有的是卫星拍的。它们有一个共同特征，就是它们都是由很多个像素组成，像素大小是一致的，行高和列宽是一致的，从这个角度看，一幅遥感影像就像栅格。矢量地图，是由很多要素组成的，每个要素都有自己的地理坐标，基于数学规则，无论矢量地图怎么放大，地图都不会失真。它是 OpenLayers 中非常重要的一种图层类型

2015-06-07 07:50:22 20580

原创 OpenLayers 3 之地图图层数据来源（ol.source）详解

source 是 Layer 的重要组成部分，表示图层的来源，也就是服务地址。除了在构造函数中制定外，可以使用 layer.setSource(source) 稍后指定。一、包含的类型ol.source.BingMaps ，必应地图的切片数据，继承自ol.source.TileImage；ol.source.Cluster，聚簇矢量数据，继承自ol.source.Vector；ol.sourc

2015-05-24 10:27:16 30155 2

原创 OpenLayers 3 之地图交互功能（interaction）详解

地图交互功能和上一篇讲的地图控件有些混淆，它们都控制着用户与地图的交互，区别是地图控件的触发都是一些可见的 HTML 元素触发，如按钮、链接等；而交互功能都是一些设备行为触发，都是不可见的，如鼠标双击、滚轮滑动等，手机设备的手指缩放等。地图的交互功能包含很多，如地图双击放大，鼠标滚轮缩放，矢量要素点选，地图上绘制图形等等。只要是涉及到与地图的交互，就会涉及到 intercation ...

2015-05-21 09:07:28 31646 12

原创 OpenLayers 3 之地图视图（View）详解

初始化一幅地图，必备的三要素之一就是视图（view），这个对象主要是控制地图与人的交互，如进行缩放，调节分辨率、地图的旋转等控制。也就是说每个 map对象包含一个 view对象部分，用于控制与用户的交互。主要介绍 view 的作用和用法，并分析商用的地图应用中的相关的功能。功能的具体的实现与如何进行定制和优化，就超过了这篇文章的范围了。

2015-05-09 18:21:34 38264 1

原创浏览器定位原理与实现

获取用户位置，并进行个性化推荐，是一个位置应用非常重要的功能，也是目前 LBS 应用的基石。如果没有用户的位置，例如百度地图等应用就不能进行周边搜索，更不用说要持续跟踪用户位置的导航功能。目前使用浏览器获得设备地理位置，有两种方法：第一种是使用 JavaScript Geolocation API 直接编程获取；第二种是首先获取设备的 IP 地址，然后通过查询相应的 IP 与地理位置的数据库，得到用户的地理位置。

2015-04-16 09:14:15 9057

原创 OpenLayers 3 之使用 AJAX 通信

地图应用是大流量应用，如果频繁刷新页面，造成的数据传输也必然是很大的，这在你的网络不是很好的时候，你就醉了，这时候便是 AJAX 显现优势的时候了。这里我们把 AJAX 应用在地图搜索中，下面看看怎么做到的吧！

2015-04-08 14:29:10 10508 3

原创 OpenLayers 3 之弹出框（popup）

摘要上回说到，加载完地图后，我们想更多一点交互，而不仅仅是缩放和平移，赋予地图多一点的生命 ~-~！点击地图，它至少应该知道我是在哪里点击了，并且弹出一个气球类似的框框告诉我！这次，我们就来尝试给我们的地图加上这个能力！ PS：这次的例子是基于上一篇的加载地图的代码的哦！在上一篇的基础上增删修改，所以读读前一篇是很有必要的哦！正文

2015-03-18 17:05:11 21043 1

原创分水岭算法（Watershed algorithm）与OpenCV实现

前言分水岭算法主要用于图像的分割！这个算法需要输入一个灰度图，在接下来的洪水漫堤过程中，相邻的积水盆地之间的分水岭便慢慢构建起来。一般情况下，这会引起过分割，尤其是具有噪声的图像。图像必须要预处理，以消除噪声；分割结果必须要基于一些根据进行区域合并，以减小过分割造成的影响！技术假设我们要将下面这幅图像进行分

2015-03-14 16:42:38 13730 2

原创 OpenLayers 3 之加载地图

摘要一个加载地图的小例子，分析原理，并解析源码！正文例程如下： .map { height: 400px; width: 100%; } OpenLayers 3 example My Map

2015-03-12 18:59:28 8602 11

原创 OpenLayers 3 简介

摘要主要聊聊OpenLayers是啥，咋用！~-~ 还介绍了OpenLayers 3相对于以前的版本有啥改进不。 OpenLayers是干什么的？要想在浏览器中显示交互式的地图很难，因为浏览器默认的只是显示静态的图片，如PNG、JPEG等格式，要交互式很难，因为每一个点击和缩放，地图都要做出正确的反应。OpenLayers是一个JavaScript 类库包，主要是用于开发We

2015-03-12 09:52:12 6221 1

原创 WebGIS系统的搭建

在这里挖个坑，这个博客主要是记录GIS相关的技术。下周的博文将是一篇介绍浏览器端构建地图应用的开源JS框架：OpenLayers。

2014-12-29 22:18:43 6931 3

研究与专注