关闭

[置顶] OpenLayer3 之 实现拉框放大功能

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

[置顶] GIS 矢量切片(Vector Tile)-地图定制化的时代已经悄悄来临

前言 切片技术的简单介绍,以及传统栅格图片切片的不足 现在最流行的地图底图技术是栅格切片底图,它们本质上是将空间数据分别渲染为不同缩放级别的地图图片,然后将各个级别的图片按照一定规则切分,按照一定的 “规则组织”,存储到硬盘或数据库中,构成一幅完整的地图。 图1 切片概念图相对于其他技术,切片地图有其优越性,例如有效减少了传输数据体积,多级缩放等。然而,栅格地图也有一些短处,缺乏实时性,数据完...
阅读(6546) 评论(16)

[置顶] GIS 算法 之 拉默-道格拉斯-普克算法(ramer-douglas-peucker)

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

[置顶] OpenLayers3 在 Mac 视网膜屏下的响应式设计

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

[置顶] ES5 中的面向对象编程前传 之 深刻理解原型链(prototype)

你懂了原型链了吗?原型链就是对象的 `__proto__` 指针属性连接的对象继承链。既然 JavaScript 本身可以这么做,那为什么我们不可以这样做呢?我们也可以利用这种模式实现继承,但是这种继承只能继承父对象 `prototype` 中的属性和方法,由各个实例共享,那你是不是突然想起我们上一篇文章讲的函数构造作用域?结合文章中 new 操作符的作用及其执行过程,我们可以使用“构造函数”实现对象中属性和方法的继...
阅读(417) 评论(0)

[置顶] ES5 中的面向对象编程前传 之 深刻理解函数

ES5 是现行的 JavaScript,ES6 是 JavaScript 的 2015年版本,现在还没有广泛使用,不过也不远了,这篇文章中我们理解一下 ES5 中的面向对象模拟实现的两个基本技术(函数和原型链)之一:函数,在 JavaScript 中,函数比较难理解,和其它的编程语言中的函数有很多的不同,还会引申出很多很晦涩的知识点。这里我们深入探求一下函数都有哪些有趣的点!...
阅读(468) 评论(0)

[置顶] Flexbox 布局 与 常见布局需求实现对比

Flexbox 布局是 CSS 3 新增的*布局*模式,在 display 中的值是 `display: flex; display: inline-flex;`。flex 具有很好的适应性,在电脑浏览器和手机浏览器中都有很好的表现。虽然其标准仍然是“候选(CR)”,但是在各个浏览器已经得到了很广泛的支持。如图1,从图中我们可以看出,flex模块已经得到了几乎所有浏览器的支持,IE11部分支持,我们可以在实际的项目中...
阅读(4465) 评论(0)

[置顶] Node-mysql 之 使用流重构程序

流(stream)最适合的就是进行大量的查询,对得到的记录进行 IO 操作,防止内存不够用的场景。因为在 Node 中, IO 操作是异步的,因此就会造成大量 IO 的堆积,势必造成内存的占用,这对其他的脚本(比如PHP)也许不是问题,但是 Node 不行,Node 是基于 V8 的,V8 在 64 位的机器上的内存上限只有 1.4 G,超过 1.4 G 就会溢出。当然这可以通过` --max-old-space-...
阅读(632) 评论(0)

[置顶] Web前端 之 RequireJS

随着互联网的发展,浏览器端的应用越来越多,单个应用规模越来越大,逻辑也越来越复杂,从最初的页面动态效果,到与服务器异步通信,也就是以AJAX为代表的通信技术,允许在不刷新页面的情况下动态请求服务器的服务,再到复杂的交互,使得JavaScript代码里剧增,因此,代码如何有效组织容易维护,如何应对需求改变的要求。...
阅读(606) 评论(0)

[置顶] Web前端 之 CommonJS 模块化规范与Node实现

上一篇文章中,我们主要介绍了AMD规范的实现RequireJS对前端模块化做出的努力,RequireJS更适合前端的JavaScript,而CommonJS更适合作为后端脚本的JavaScript,所以RequireJS在浏览器端的应用非常火热,并且名噪一时,而作为后端JavaScript的代表Node则遵循CommonJS规范。这篇文章中,我们谈谈经常和AMD一起提到并比较的CommonJS规范,node遵循CommonJS规范,并结合Node实现模块化实例,讲解CommonJS对于模块化管理的思想和实践...
阅读(1388) 评论(0)

[置顶] OpenLayers 3 之 添加地图鼠标右键菜单

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

[置顶] OpenLayers 3 之 切换图层控件

在 openlayers 2中,是默认有切换图层控件的,但是由于某种原因,openlayers 3中并没有默认实现,但却给我们很容易扩展的基类(ol.control.Control),我们可以自定义实现,并不是很难,这我会在其他文章中讲解。这篇文章中,我利用一个 GitHub 中的一个开源项目(这个项目就是扩展了`ol.control.Control`,自定义了切换图层控件),添加切换图层控件,并探索其用法。...
阅读(4069) 评论(3)

[置顶] OpenLayers 3 之 扩展自定义控件--以切换图层控件为例

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

[置顶] OpenLayers 3 之 动态点扩散效果

当某个地方发生一些事情之后,如果我们添加一个静态点在地图上,并不能引起注意,那我们可以放置一个动态的点,类似于在水中投入一个石头,水波扩散的效果,象征发生的事件有一定的影响区域,那么,我们如何利用 OpenLayers3 做出这样的效果呢?我们要实现的效果如下图,之前雅安发生过地震,我们在雅安放置一个这样的点,表示雅安发生了地震。 如何实现呢?...
阅读(6467) 评论(4)

[置顶] OpenLayers 3 之 Overlay(覆盖物)详解

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

[置顶] OpenLayers 3 之 加载天地图

要使用 OpenLayers 3 加载天地图,首先要弄清楚天地图发布的原理,以及遵循的发布规范,上一篇中我们提到了使用 OpenLayers 3 加载百度地图,我们提到一般网络地图为了加快访问速度,都采用缓存切片地图的方式,天地图也不例外,而且原理极其类似,但是其切片的索引组织方式还是有一些不同,虽然都是切片,但是切片的起始坐标原点不一致,百度地图是屏幕的左下角,而天地图是屏幕的左上角(与谷歌地图一致)......
阅读(9885) 评论(11)

[置顶] OpenLayers 3 之 加载百度地图

很多人想使用 OpenLayers 调用百度地图、腾讯地图等国内地图,本文就讨论一下其可能性和实现原理。我们以百度地图为例,分析其地图调用原理,我们都使用过百度地图,在网速不快的情况下,肯定有过感受,地图是一块一块加载的,从这里我们就可以看出,地图是被切成了很多块的小图片,调用时按照一定规则请求需要的“切片”,可视区域以外的“切片”不加载,这样可以减小数据传输数据量,使地图加载更快。...
阅读(13386) 评论(7)

[置顶] OpenLayers 3 之 绘制图形(ol.interaction.Draw)详解

在地图上绘制各种各样的矢量图形,很多应用场景都需要用到,比如可以实现在客户端勾绘矢量图形并将结果保存到数据库以待后续编辑和可视化等等很多有用的功能。这次我们看看怎么利用 OpenLayers 3 绘制各种各样的图形,并添加到图层显示。在 OpenLayers 3 中负责绘制任务的是 ol.interaction.Draw 类,下面介绍这个类和功能的用法。...
阅读(8473) 评论(5)

[置顶] OpenLayers 3 之 绘制图形(ol.interaction.Draw)原理解析

在 OpenLayers 3 中,负责交互的模块中,有一个负责绘制图形的交互模块,这个交互子模块是 ol.interaction.Draw。该模块允许用户通过鼠标点击(PC浏览器环境)或者手指触摸( 触屏手机浏览器环境)在地图上绘制点、线 和 面,上一篇文章 中主要介绍了绘制功能的用法,这次我们看看其底层实现及其原理。注:绘制完成之前的要素图形我们称之为草图(sketch),绘制完成的图形称为要素(feature)。...
阅读(7095) 评论(4)

[置顶] OpenLayers 3 之 地图矢量图层(ol.layer.Vector)详解

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

[置顶] OpenLayers 3 之 地图样式(ol.style)详解

地图样式是由 style 类控制的,其包含了地图样式的方方面面,例如,填充色、图标样式、图片样式、规则图形样式、边界样式、文字样式等,样式一般针对矢量要素图层。      矢量图层样式可以事先写好,写成静态的,矢量图层直接按照定义好的样式渲染,也可以动态使用样式的 set() 方法,但是要注意刷新矢量图层,重新渲染,否则动态样式不生效。...
阅读(8529) 评论(10)

[置顶] OpenLayers 3 之 地图图层数据来源(ol.source)详解

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

[置顶] OpenLayers 3 之 地图交互功能(interaction)详解

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

[置顶] OpenLayers 3 之 地图控件(control)详解

每一个地图应用都应该有一些工具方便用户控制地图的行为,比如缩放,全屏,坐标控件等等,在 OpenLayers 中怎么添加这些工具呢?下面我给大家介绍一下 OpenLayers 中包含的控件种类,并介绍其使用方法。对控件的定制化,和对 OpenLayers 增加控件和优化控件等超出了本文范围。...
阅读(8021) 评论(8)

[置顶] OpenLayers 3 之 地图视图(View) 详解

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

[置顶] OpenLayers 3 之 地图图层(Layers) 详解

如果不是专业的地图工作者,看到地图,可能觉得地图就是一张将三维世界映射到二维空间,很多信息混杂在一起表示空间信息的动态可交互图片,其实这只是表面现象。实际上地图是由一个或多个图层组成的,使用不同的图层存储不同类型的地物,比如由存储道路的图层,有展示拥堵情况的图层,通常还有一个含有基础地理信息(比如政区划分)的底图图层。...
阅读(17973) 评论(11)

[置顶] OpenLayers 3 之 使用 AJAX 通信

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

[置顶] OpenLayers 3 之 使用地理数据传输格式GeoJSON

用户请求地理数据或者其他数据,服务器要以一定的客户端能够识别的数据格式返回,数据格式是否高效,直接影响用户的体验!首先要求数据格式要是轻量级的,还要求客户端处理数据方便快捷,相较于XML,JSON满足这两个要求,且目前应用广泛,非常流行。而在传输地理信息方面,相应有GeoJSON。下面咱就来了解一下GeoJSON,并看看它怎么应用到应用里!...
阅读(5690) 评论(11)

[置顶] OpenLayers 3 之 使用矢量图层(Vector)

摘要         矢量图层:矢量图层是用来渲染矢量数据的图层类型,在OpenLayers里,它是可以定制的,可以控制它的透明度,颜色,以及加载在上面的要素形状等。         常用于从数据库中请求数据,接受数据,并将接收的数据解析成图层上的信息。如将鼠标移动到中国,相应的区域会以红色高亮显示出来,高亮便是矢量图层的行为。 主要内容 1、 HTML文件的进化         这...
阅读(8192) 评论(7)

JavaScript 内部对象结构

Function 内置 length 和 prototype 属性,prototype 属性是一个对象,负责保持继承关系,确立父子关系(isPrototypeOf)。它是 Object 的实例,而 Object 是一个构造函数,是 Function 的实例;其他的内置对...
阅读(285) 评论(0)

setTimeout, setInterval 与 requestAnimationFrame 隐藏的各种坑

使用 JavaScript 做动画时,或者做与时间有关的事情,你有三个选择:`setTimeout`, `setInterval` 和 `requestAnimationFrame` ,这三个函数有点类似,也有点区别,也有一些坑等你来踩。...
阅读(2221) 评论(1)

前端图形技术 之 CSS 实现标签容器

只要你理解了盒模型,你可以把任何一个元素以一定的图形外观显示,比如常见的三角形、梯形、圆形,甚至平行四边形、五角星等你觉得不可能实现的图形,那么咱就来看看它们怎么实现的吧!本文只讲注重讲原理,只是实现一种三角形来应用到标签容器。 先看看下面的预备知识。。很重要的,知道了这些基础知识,说不定你还可以创新出其他的实现呢!!...
阅读(559) 评论(0)

你也应该使用的响应式技术

现在能访问网络的设备的屏幕多种多样,屏幕尺寸和屏幕分辨率各式各样,能否写一套代码,对所有的屏幕都完美显示,有相同的表现呢?不行!我还要再补一句,尝试这样做有点天真幼稚。那么,退一步,一套代码在大部分设备下布局不会乱是可行的。用到的技术主要就是响应式技术,本文主要讲了一些常用的响应式技术:HTML meta、媒体查询、流式布局。需要指出的是,响应式技术不仅包含页面结构和样式,还包含一些工程方面的考虑......
阅读(507) 评论(0)

ES5 中的面向对象编程实现

定义类之前铺垫了函数和原型链的相关知识,有了这些,就具备了实现面向对象程序设计的两项基本技术:封装和继承。封装就是抽象出类型,封装成一个类。例如水果,我们构造一个水果类,函数作为构造函数,容纳私有属性和方法,原型对象容纳公用方法和属性。/** * 水果类 * @param {string} name * @constructor */ function Fruit (name) { th...
阅读(655) 评论(0)

OSI 七层模型 VS TCP/IP 协议族

OSI 七层模型OSI 七层模型的本意是为OSI 框架中的各种协议的创建提供基础,七层由底层到上层依次为 物理层、数据链路层、网络层、运输层、会话层、表现层 和 应用层,各层之间通过接口通信,接口定义了相应层对上层提供什么样的信息和服务,只要提供了符合接口规定的数据,就可以替换相应的层。 这不是软件工程中松散耦合的实践么 ^_^,谈到这里,不得不提一下 CSS 3 中的模块式迭代的规范草案,一个...
阅读(480) 评论(0)

gulp 与 前端流程自动化

gulp 是一个构建工具,构建什么? 前端优化中的一条是,尽量缩小JavaScript、html,css 和 图片等静态文件的尺寸,因为每个文件都将会有一个 http 请求,在下载过程中,浏览器会停止所有手头工作,专心下载,直到完成,才会做其他事情,这就意味着这个时间内浏览器页面会一片空白,或者停止响应,而 gulp 主要就是自动化压缩静态文件的工具。 相对于其他的构建工具(grunt),gulp 以“管道和文件...
阅读(653) 评论(0)

HTML 行内元素 与 块级元素

行内元素一般是内容的容器,而块级元素一般是其他容器的容器。一般情况下,行内元素只能包含内容或者其它行内元素,宽度和长度依据内容而定,不可以设置,可以和其它元素和平共处于一行;而块级元素可以包含行内元素和其它块级元素,且占据父元素的整个空间,可以设置 width 和 height 属性,浏览器通常会在块级元素前后另起一个新行。...
阅读(2772) 评论(2)
60条 共4页1 2 3 4 下一页 尾页
    个人资料
    • 访问:257002次
    • 积分:3305
    • 等级:
    • 排名:第11278名
    • 原创:60篇
    • 转载:0篇
    • 译文:0篇
    • 评论:175条
    博客专栏
    文章分类
    最新评论