JVectorMap API 之 数据格式

如果你对 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

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

Converter 是 JVectorMap 提供给我们把 shapefile 数据文件转化为地图数据的转化器。它是基于 Python 编写的,官方建议版本 >=2.7(貌似 3.x2.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 && cd anyjson-0.3.3
$ python setup.py build && 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 && cd Shapely-1.4.0
$ python setup.py build && 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 && cd GDAL-1.11.0
$ python setup.py build && python setup.py install

继续阅读

JVectorMap API之Proj

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

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

Proj支持的方法

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

开源JS地图插件JVectorMap介绍

jvectormap

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

JVectorMap的功能特点

  • 基于Javascript开发

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

JVectorMap API之WorldMap

如果你对JVectorMap不太了解,请先阅读《开源JS地图插件JVectorMap介绍》。WorldMap非常重要的类,它可以创建地图、画路径、绑定事件。

WorldMap构造方法参数

名称类型描述
mapString地图数据的名称。格式一般为:territory_proj_langterritoryISO 3166 标准定义的国家代码,proj 为投影名称,lang为国家或地区语言。
backgroundColorString地图背景色。
zoomOnScrollBoolean如果为true可以使用鼠标滚动缩放,默认为true。
zoomMaxNumber表示地图可以缩放的最大比例,默认为8。
zoomMinNumber表示地图可以缩放的最小比例,默认为1。
zoomStepNumber表示使用+ / -按钮缩放地图的倍数,默认是1.6。
regionsSelectableBoolean如果设置为true,区域可以被选择,默认为false。
regionsSelectableOneBoolean同时只可以选择一个区域,默认为false。
markersSelectableBoolean标记是否可选,默认为false;
markersSelectableOneBoolean同时只可以选择一个标记,默认为false。
regionStyleObject为地图区域设置样式。每个区域或者标记有四种状态:initial (默认状态), hover (鼠标经过区域或者标记时), selected (区域或标记被选择时), selectedHover (区域或标记被选择时鼠标经过)。每个状态都可以设置样式,默认参数值为:{initial:{fill:'white',"fill-opacity":1,stroke:'none',"stroke-width":0,"stroke-opacity":1},hover:{"fill-opacity":0.8},selected:{fill:'yellow'},selectedHover:{}}
markerStyleObject给标记设置样式。其中r代表圆的半径,默认参数值为:
{initial:{fill:'grey',stroke:'#505050',"fill-opacity":1,"stroke-width":1,"stroke-opacity":1,r:5},hover:{stroke:'black',"stroke-width":2},selected:{fill:'blue'},selectedHover:{}}
markersObject | Array地图初始化时设置标记。如果值为数组,标记的codes将会使用数组索引作为字符串表示。一般每组标记都会包含latLng (数字数组,纬经度), name (标记上现实的名字) 和样式内容。
seriesObject这个对象包含 markersregions 键值,请参看DataSeries
focusOnObject | String这个参数用来设置地图viewport的初始positionscale。例如设置焦点为地图中心并且放大2倍可以使用下面的值:
{x: 0.5,y: 0.5,scale: 2}
selectedRegionsArray | Object | String设置初始选择区域
selectedMarkersArray | Object | String设置初始选择标记
onRegionLabelShowFunction(Event e, Object label, String code)将在区域标签将被显示前调用。
onRegionOverFunction(Event e, String code)鼠标悬停在区域标签上方时调用。
onRegionOutFunction(Event e, String code)鼠标从在区域标签移走时调用。
onRegionClickFunction(Event e, String code)将在区域标签将被点击时调用。
onRegionSelectedFunction(Event e, String code, Boolean isSelected, Array selectedRegions) 区域被选择时调用。回调方法里面的参数isSelected表示区域是否被选择。参数selectedRegions被选择区域的代码。
onMarkerLabelShowFunction(Event e, Object label, String code) 标记被展示前调用。
onMarkerOverFunction(Event e, String code)鼠标在标记上面悬停时触发。
onMarkerOutFunction(Event e, String code)鼠标从标记上方移出时触发。
onMarkerClickFunction(Event e, String code)点击标记时触发。
onMarkerSelectedFunction(Event e, String code, Boolean isSelected, Array selectedMarkers) 标记被选择时触发。回调方法里面的参数isSelected表示区域是否被选择。参数selectedRegions被选择区域的代码。
onViewportChangeFunction(Event e, Number scale)地图的窗口改变时触发(地图移动或缩放视图)。
继续阅读

JVectorMap API之DataSeries

如果你对JVectorMap不太了解,请先阅读《开源JS地图插件JVectorMap介绍》。DataSeries也就是数据序列,它主要包含了标记(markers)和区域(regions)信息内容。

DataSeries构造参数

params为构造数据序列的参数,类型为对象,其内部属性信息如下:

名称类型描述
valuesArray设置可视化数据
attributeString表示可视化数据数字或者颜色属性,内容通常为:1,标记(markers)和区域(regions)共有属性:fill, stroke, fill-opacity, stroke-opacity;2,仅限于标记(markers)属性:r (radius)。
scaleArray用来表示不同范围的数据表现方式,不同范围数据将会有不同颜色。其中第一个代表数值最小的颜色,依次推断,最后一个代表数值最大的颜色。默认为['#C8EEFF', '#0071A4']
normalizeFunctionFunction|String这个参数可能是方法或者字符串。如果是字符串会有两个值:linear 或者 polynomial,默认为linear。如果是方法则表示用来映射输入数据到提供的scale数据。
minNumber数据集的最小值。如果没有提供,将会自动运算。
maxNumber数据集的最大值。如果没有提供,将会自动运算。
继续阅读

Twitter的包管理工具 Bower介绍

bower

Bower是什么?

前端开发常会用到主流的框架和库,如:AngularBootstrapJquery等,项目开发中经常需要我们去官方下载或者更新,更麻烦的是如果有依赖包还需要单独下载。BowerTwitter 推出的一款包管理工具,它的出现就是为了解决这些问题。

Bower安装

与其他前端工具一样,Bower运行于Nodejs,通过NPM来管理,安装非常简单:

$ npm install -g bower

继续阅读

认识Google Polymer

polymer

Polymer是什么?

Polymer是一个使用Web组件构建Web应用的类库,同时也使用了为Web构建可重用组件的新的HTML 5标准。它是由加盟Google的原Palm webOS开发团队打造,是一套以“一切皆组件、最少化代码量、最少框架限制”为设计理念的Web UI框架。Web Components则提供了一种更彻底的解耦方式,更加方便了UI的开发和模块化,可以说是Polymer的基础之一。Polymer为大部分Web组件技术提供了polyfills功能,它能让开发者在所有的浏览器支持新特性前创建自己的可重用组件。此外,Polymer提供了一系列的部件的例子,其中包括天气、时钟、股票行情和线型图。

鉴于许多Web框架通过暴露JavaScript API来构建用户界面,而构建用户界面实际上就是生成一堆div和spans标记,Web 组件是原生浏览器的解决方案因此不依赖于一个完整的框架。因此,与现在的一般依赖某个Javscript框架的HTML组件相比,Web组件希望能减少碎片。

尽管Web组件是一项有趣的新技术,但在浏览器们都支持它们(并且大部分用户都开始使用这些浏览器们)之前,其中的大部分功能还派不上用场。解决这个问题的一种方法是使用polyfills(译者注:polyfills原指一种墙面填料)。polyfill指的是一段代码,它能实现期望最终由浏览器自身实现的功能。如果浏览器本身已经实现了该功能,则polyfill什么都不做。否则,它模拟其实现而不依赖API。例如,webshims库实现了HTML5中各种功能,包括canvas、HTML5表格和在某些尚不支持地理位置定位的浏览器中实现地理位置定位功能。

继续阅读

Java项目开发规范

为何制定开发规范

定义规范的目的是增加程序和文档可读性,减少出现错误的几率。

  1. 减少维护成本;一个软件的生命周期中,80%的花费在于维护,另一方面,几乎没有任何一个软件,在其整个生命周期中,均由最初的开发人员来维护,规范的编码减少人员变动带来的维护成本。
  2. 改善软件的可读性;可以让程序员尽快而彻底地理解新的代码。

开发中需要避免的问题

  1. 在循环中对字符串操作时用String;
  2. 滥用synchronized 关键字;
  3. 对文件或者数据库的操作不及时关闭;
  4. 一个方法的代码过长,超过1000行;
  5. 不写注释,或者注释不清晰;命名不规范;排版格式混乱,不注意缩进与对齐等;
  6. 滥用public公共类定义;
  7. 在程序中使用硬编码;
  8. 在程序代码中存在垃圾数据文件(例如.bak,.svn文件夹等);
  9. 所有调试信息直接System.out.print打印到控制台;
  10. 对数组为空、数组越界、页面传递的参数为空等异常情况不做任何处理;
  11. 方法的参数很多,不要超过5个;

继续阅读