月份：2014年9月

Git主要操作详细用法

raid 评论

本文列举了Git中常用操作的详细用法，如果您不太了解Git，请先阅读《Git使用入门》。

原理图

+========+
|        |                                                         +---------+
|        |-----------------------------pull----------------------->|         |
|        |                                                         |         |
|        |                +==========+                             |         |
|        |                |          |                             |         |
| Rmote  |                |          |------------checkout-------->|Workspace|
|        |--fetch/clone-->|          |           +========+        |         |
|        |                |Repository|           |        |        |         |
|        |                |          |<--commit--| Index  |<--add--|         |
|        |<------push-----|          |           |        |        +---------+
+========+                +==========+           +========+

Pull操作

# 将origin这个版本库的代码更新到本地的master主支
$ git pull origin master

# 与merge类似，后面单独解释
$ git pull --rebase

继续阅读

使用 gulp 构建工程

raid 评论

Gulp 是一个基于 nodejs 的流式构建工具，它通过代码优于配置的策略不仅使得任务容易写，并且更加容易阅读和维护。Gulp 使用的 NodeJS 的流，无需在硬盘上写入临时文件和目录，让任务构建更加迅速。

下面是一个 Gulp 配置示例：

gulp.task('sass', function() {
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'compressed' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/assets/css'))
});

上面这个例子可以看出，main.css 文件像水流一样经过Sass 和 Autoprefixer 插件的一系列处理，最终输出结果文件，一切是那么的简单，并且执行起来非常的快。 继续阅读

使用 Bower 创建包

raid 评论

bower.json

bower.json 中声明了一系列与包有关的内容，它与 NodeJS 的 package.json 或 Ruby 的 Gemfile  非常类似。我们可以使用 bower init 创建 bower.json。

$ bower init

bower.json 的规范中的选项，主要包括：

  • name 包名，必选。
  • version 有意义的版本号。
  • main 字符串或者数组，指定主要会用到包里面哪些文件。
  • ignore 数组，一系列文件名或者目录，告诉bower在安装包的时候忽略指定的内容。
  • keywords 字符串数组，推荐添加，主要是帮助用户能够搜索到你的包。
  • dependencies 哈希结构，依赖的包，可以指定版本号，版本号范围参考。
  • devDependencies 哈希结构，生产环境下依赖的包，版本号范围参考。
  • private 布尔值，设置为true代表你想保持私有，并且将来不会发布它。

继续阅读

JVectorMap 分级统计图

raid 评论

Choropleth map 即分级统计图。在整个制图区域的若干个小的区划单元内（行政区划或者其他区划单位），根据各分区资料的数量（相对）指标进行分级，并用相应色级或不同疏密的晕线，反映各区现象的集中程度或发展水平的分布差别。
分级统计图法可反映布满整个区域的现象（如地貌切割密度）、呈点状分布的现象（如居民点的密度）或线状分布的现象（如河流密度或道路网密度），但较多的是反映呈面状但属分散分布的现象，如反映人口密度、某农作物播种面积的比、人均收入等。此法因常用色级表示，故亦称色级统计图法。

在创建了世界地图后，我们可以使用其他参数改变地图的外观，具体参数描述请参看 JVectorMap API 。

接下来我们将创建一个 choropleth map ，这个例子中我们将会对2010年各个国家的 GDP 信息进行展示。首先我们需要一些数据，可以从 IMF 网站上去下载得到格式为 XLS 的数据文件，然后将之转化为下面的格式，将文件存储为名字为 gdp-data.js 的文件。 继续阅读

JVectorMap API 之 数据格式

raid 评论

如果你对 JVectorMap 不太了解，请先阅读《开源JS地图插件JVectorMap介绍》。

使用 Converter 生成的 JVectorMap 数据文件大小跟数据源大小和精度相关，数据主要存储于文件中的 path 字段，它代表了地图中所有区域的路径信息。数据文件格式如下：

jQuery.fn.vectorMap('addMap', 'afg_mill_en',
    {
        "insets": [
            {
                "width": 900.0,
                "top": 0,
                "height": 642.33050485257525,
                "bbox": [
                    {"y": -4509613.1491, "x": 6738787.2362},
                    {"y": -3365824.1687, "x": 8341404.6963}
                ],
                "left": 0
            }
        ],
        "paths": {
            "24": {
                "path": "M485.72,476.51l-0.74 ... Z",
                "name": "Paktika"
            },
        },
        "height": 642.33050485257525,
        "projection": {"type": "mill", "centralMeridian": 0.0},
        "width": 900.0
    }
);

下面详细说明这些字段的意义 继续阅读

JVectorMap API 之 Converter

raid 评论

如果你对JVectorMap不太了解，请先阅读《开源JS地图插件JVectorMap介绍》。

Converter 是 JVectorMap 提供给我们把 shapefile 数据文件转化为地图数据的转化器。它是基于 Python 编写的，官方建议版本 >=2.7（貌似 3.x 与 2.x 语法有不少区别，不要使用 3.x 以及以后版本）。另外还需要依赖库 Anyjson ， GDAL 和 Shapely 。

Converter依赖库安装

Linux 下手动安装

# install anyjson
$ wget https://pypi.python.org/packages/source/a/anyjson/anyjson-0.3.3.tar.gz
$ tar zxvf anyjson-0.3.3.tar.gz &amp;&amp; cd anyjson-0.3.3
$ python setup.py build &amp;&amp; python setup.py install
# install Shapely
$ wet "https://pypi.python.org/packages/source/S/Shapely/Shapely-1.4.0.tar.gz#md5=8194c567cfdcfe0b458e041366924270"
$ tar zxvf Shapely-1.4.0.tar.gz &amp;&amp; cd Shapely-1.4.0
$ python setup.py build &amp;&amp; python setup.py install
# install GDAL
$ wget https://pypi.python.org/packages/source/G/GDAL/GDAL-1.11.0.tar.gz
$ tar zxvf GDAL-1.11.0.tar.gz &amp;&amp; cd GDAL-1.11.0
$ python setup.py build &amp;&amp; python setup.py install

继续阅读

JVectorMap API之Proj

raid 评论

如果你对JVectorMap不太了解，请先阅读《开源JS地图插件JVectorMap介绍》。

Proj是投影类，可以进行球面上的点和笛卡尔坐标系的双向转换。目前支持 merc（墨卡托投影），lcc（兰勃特正交投影），aea（阿尔伯斯圆锥等面积投影），mill（米勒圆柱投影）四种投影方式。

Proj支持的方法

Proj提供的方法均为静态<static>方法，下面是支持的方法列表。 继续阅读

开源JS地图插件JVectorMap介绍

raid 2 条评论

jvectormap

JVectorMap是一款优秀的Javascript地图插件。它几乎能够兼容市面上所有主流浏览器，包含移动端浏览器。同时它还提供的地图转化器，可以把shapefile数据文件转化为JVectorMap使用的地图数据。

JVectorMap的功能特点

  • 基于Javascript开发

JVectorMap使用到的有Javascript，HTML，CSS，SVG或者VML，市面上主流浏览器都会支持这些技术，因此使用它描绘地图无需单独安装插件。 继续阅读