dmap v0.2.9

dmap

高性能、通用的 webgl地图组件库

简介

dmap是一种3d的地理类可视化引擎（一些非地理相关的功能也能实现）

dmap依赖开源、通用的jquery 和 three.js。

dmap基于webgl，性能合表现比svg、canvas等其他dom元素形成的可视化更好。但webgl非所有浏览器支持，如需兼容性更好的2d地图，可以使用ldmap

安装

tnpm install @ali/ldmap

启动

dmap的组件采用require机制，你可以用 node-cube 启动

sudo npm install node-cube -g
cd your_dir
cube start

浏览demo http://localhost:9999/demo/

绑定

一些地理数据放在内部服务器，需日常环境绑定

10.189.224.26 daily.s.aliyun.com# daily

引入:

可以整体引入

var D = require('@ali/dmap');
var map = new D.Map(container, options);

也可部分引入

var Map = require('@ali/dmap/map/map');
var map = new Map(container, options);

为了选择性引入，可以了解dmap的目录组织 ↓↓↓

目录:

d-map目录组织如下：

数据:

组件开发主要涉及地理数据和可视化数据。

地理类：

地理类数据组要为geojson格式，如地理边界、公路数据等。 详细

可视类：

在javascript语法层面上，可视类数据一般有2层结构，如:

[[]] 型:

[['上海', 222], ['宁波市':111], ...]

{} 型:

[{name: '上海', value: 222}, {name: '宁波市', value:111}, ...] 

{{}} 与 {[]}型数据同理。

从展现形式区分 分为连接型数据、与点状、面状、轨迹数据。

点状数据（点图、热力图等）:

[{name: '上海', value: 222}, {name: '宁波市', value:111}, ...]

连接型数据（飞线数据等）:

[{name: '上海', value: 222, from: { lat: 30, lng: 120}, to: { lat: 30.5, lng: 120.6}], {name: '上海', value: 222, from: { lat: 30, lng: 120}, to: { lat: 30.9, lng: 120.8}], ...]

map

map是地图的核心，包含: 1、初始化三维环境 2、与输入进行交互 3、定义了地理投影 4、触发各类事件等

当移动或缩放map结束，鼠标离开时，map默认会打印现在的位置信息。

map的交互方式有2种，平移和旋转，敲击键盘自动切换(外部禁了敲击事件除外)。

map的初始化:

var Map = require('@ali/dmap/map/map');
var container = $('#map-container');
var map = new Map(container, {});

map的配置:

projection的分类:

map的方法:

layer

layer是3d地图的层，层即具有独立意义的整体。

和数据一样，layer可分为地理展现和可视展现。

地理展现包括贴图地球、太阳、地理边界、建筑层等。

可视展现包括点图、热力图、飞线图、区域热力图等。

但对于组件而言，一个组件也许兼具两种类型,如/layer/area.js 其可以勾勒地理边界，也可以填充颜色形成区域热力图(即所谓Choropleth map)

大部分可视化图层，都能跟随map的投影方式，如平面图和地球。

layer/addons目录存放不常用的，辅助性的图表，如标注、辅助线等。

部分layer会分为2个层次，如 flying_lines 和 flying_line。 flying_lines管理一组飞线，而flying_line管理一根飞线。

layer分类:

layer初始化:

var Map = require('@ali/dmap/map/map');
var Solar = require('./../layer/solar');
//初始化地图
var container = $('#map-container');
var map = new Map(container, {});
//各种不同的组件 构造的方式都很类似
var scatter = new Scatter();
scatter.addTo(map);
scatter.render([{lat:30, lng: 120}]);

layer的配置:

配置采用多层的配置结构，传入组件后和组件的配置深度合并。

普通通用配置:

函数型通用配置:

各组件配置中，有许多函数型配置，如颜色对应函数，经纬度提取函数等，以经纬度提取函数为例: 在我们传入render函数的data，组织结构也许非常多变，如:

//案例1
{
  lat: 30,
  lng: 120,
  value:1
}
//案例2
[30, 120, 1]
//案例3
{
  cp:{
  lat: 30,
  lng: 120
  },
  value: 1
}
//案例4
{
  cp:[30,120],
  value: 1
}

我们很难枚举这些常用的经纬度组合，为了获得数据中的经纬度，我们通过函数传入:

var getLat = function(d){
    var lat = d.lat || d.latitude || d[0];
    if(lat) return lat;
    var center = d.cp || d.center || d.c || d.pos || d.position;
    if(center) return center.lat || center[0] || center.latitude;
  };
//
var options = {
  lat: getLat
};
......

这些常用的字段可以为函数， 其中，d为可视数据中的一项，id为其序号或id。v为提取出来的可视化字段，min, max为其中的最值,feature为geojson的单元。

特殊对象型通用配置:

配置中有一些具有普遍的特殊对象: gradient对象：

{
    'from': '#001f6b',//起始颜色
    'to': '#e4f2f1',//结束颜色
    'easing': 'Quadratic.Out.1.1',//过渡函数
    'space': 'hsl'//色彩空间
  }

gradient对象到组件内部，会通过内置的高阶函数构造一个颜色映射函数，当输入0-1的数值，返回相应的颜色。 easing字段用.隔开成3段， 前两段采用 TWEEN.js中描述过渡函数的记号，如线性变换Linear.None:

function(k){
  return k;
}

后者在这个基础上进行乘方，如 Linear.None.2.2:

function(k){
  return Math.pow(k, 2.2);
}

sprite对象: 经过内部处理，生成粒子系统、2d点图等的贴图，如:

var options = {
  'sprite': {
    'drawN': 1.15,
    'color': {
        'from': 'hsla(20,100%,75%,0.8)',
        'to': 'hsla(120,100%,50%,0.1)',
        'easing': 'Linear.None.1.7',
        'space': 'rgb'
      }
  }
};

layer的方法:

不同组件有些公共的方法

layer_2d

layer层基本是通过在3维空间里建立实体实现，另外有一种可视化方案，在贴图中实现可视化，贴入3d的实体表面，甚至与shader进行交互，layer_2d内的组件就是为了实现这种贴图。