
Google Maps API 允许您使用 FusionTablesLayer
对象将 Google Fusion Tables 中包含的数据呈现为地图上的图层。Google Fusion Table 是一种数据库表格,其中每行都包含特定特征的相关数据;对于地理数据,Google Fusion Table 的每行还另外包含位置数据,其中保存有特征的位置信息。FusionTablesLayer
提供了一个 Fusion Table 界面,并支持自动呈现此位置数据,提供显示特征其他数据的可点击叠加层。
下面是显示地理数据的 Fusion Table 示例:
限制
您可以使用 Maps API 向地图最多添加五个 Fusion Tables 图层,每个图层最多可以使用五条样式规则来设置样式。
此外:
- 只有表格中的前 10 万行可以映射或包含到查询结果中。
- 带有空间谓词的查询仅返回这前 10 万行中的数据。因此,如果您对一份较大的表格应用过滤器,且过滤器对前 10 万行之后的行中的数据进行匹配,这些行也不会显示。
- 导入或插入数据时,请谨记:
- 在一次 API 调用中发送的数据总大小不能超过 1MB
- Fusion Table 中一个单元格的数据最多支持 1 百万个字符;有时,它可能需要降低坐标的精准度,或者简化多边形或线的描述
- 每份表格最多支持 5 百万个顶点
- 查看地图时,您可能会注意到:
- 一个由多种几何形状组成的地图,将显示十个所占面积最大的部分
- 进一步缩小地图时,超过 500 个特征的表格将显示点(而非线或多边形)
Fusion Table 设置
Fusion Tables 是数据表格,可提供内置的地理数据支持。有关 Fusion Tables 的完整文档,请参阅Fusion Tables 开发指南。对于要在 Google 地图上显示 API 中的数据的 Fusion Tables 图层,该表格必须满足以下标准:
- 表格必须以Public或Unlisted形式设置为共享
- 表格必须有一个或多个显示为
Location
的列。在 Fusion Tables Web 界面中,选择 Edit >Modify Columns 并选择所需列
Location
列必须遵循以下格式要求。
- 纬度/经度坐标可以输入到一列中,以逗号分隔 (latitude,longitude),也可以分为两列(纬度一列,经度一列)。如需了解详细信息,请参阅 Fusion Tables 文档
- 地址必须先经过地理编码。在 Fusion Tables Web 界面中,选择 File > Geocode
- 支持 KML 几何数据,如点、线和多边形
构建 FusionTables 图层
FusionTablesLayer
构造函数会使用一份公开 Fusion Table 的加密 ID 根据该表创建一个图层。在 Fusion Tables 用户界面中选择 File > About 即可找到此加密 ID。
要向地图添加 Fusion Tables 图层,请先创建图层,然后向其传递一个具有以下属性的 query
对象:
-
select
属性:其值是列名称,其中包含位置信息。如果列名称中包含空格或保留字,或者不是以字母开头,则须用引号括住该名称 -
from
属性:其值为两种加密 ID 之一
然后,将图层的 map
设置为您的 Map
对象,就像任何其他叠加层一样。
注:较旧版本的 Google Maps JavaScript API 是通过 Fusion Table 的数字 ID 引用表格。此方法仍然可用,不过优先使用加密 ID。
下例使用一份公开的 Fusion Table 显示了 2009 年芝加哥发生的凶杀案件:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.850033, lng: -87.6500523},
zoom: 11
}); var layer = new google.maps.FusionTablesLayer({
query: {
select: '\'Geocodable address\'',
from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
}
});
layer.setMap(map);
}
Fusion Table 查询
Fusion Table 还可让您应用强大的查询功能,该功能可根据指定标准对结果进行限制。您可以使用FusionTablesLayerOptions
query
参数指定查询:
query: {
select: locationColumn,
from: fusionTableID,
where: constraintClause
}
其中,locationColumn
为类型 Location
现有的已经过地理编码的列。如果 select
或 where
字段中的列名称包含空格或保留字,或者不是以字母开头,则须用引号括住该名称。
Fusion Tables 文档中列出了支持的搜索运算符。
下例显示了芝加哥高速运输管理局 (CTA) 的红线地铁的沿线站点中,工作日的乘坐人数超过 5000 人次的站点:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 41.948766, lng: -87.691497},
zoom: 12
}); var layer = new google.maps.FusionTablesLayer({
query: {
select: 'address',
from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
where: 'ridership > 5000'
}
});
layer.setMap(map);
}
Fusion Table 样式
Fusion Tables 图层构造函数也接受 FusionTablesLayerOptions
styles
参数,以便向线和多边形应用颜色、描边粗细和不透明度。您也可以通过支持的地图标记或图标名称来指定标记图标。
注:在每张地图中,仅可将样式应用于一个 Fusion Tables 图层。您最多可向该图层应用五种样式。
styles
参数使用以下语法:
styles: [{
where: 'column_name condition',
markerOptions: {
iconName: "supported_icon_name"
},
polygonOptions: {
fillColor: "#rrggbb",
strokeColor: "#rrggbb",
strokeWeight: "int"
},
polylineOptions: {
strokeColor: "#rrggbb",
strokeWeight: "int" }
}, {
where: ...
...
}]
样式会应用到 Fusion Tables Web 界面中所指定的任何样式之上。这些向图层构造函数提供的样式会按照它们的列出顺序进行应用,其中匹配多条规则的任意特征会采用最后一条匹配样式。
要创建应用到所有特征的默认样式,请创建不带 where 子句的样式:
styles: [{
markerOptions: {
iconName: "large_green"
}
}]
下例显示了:
- 默认样式,其中将所有多边形均设置为绿色,不透明度级别设置为 0.3
- 将“鸟类”列超过 300 的所有多边形设置为蓝色,并保留默认样式所设置的不透明度级别
- 将“人口”列超过 5 的所有多边形的不透明度级别设置为 1.0,并保留其 fillColor 值
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -25, lng: 133},
zoom: 4
}); var layer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
},
styles: [{
polygonOptions: {
fillColor: '#00FF00',
fillOpacity: 0.3
}
}, {
where: 'birds > 300',
polygonOptions: {
fillColor: '#0000FF'
}
}, {
where: 'population > 5',
polygonOptions: {
fillOpacity: 1.0
}
}]
});
layer.setMap(map);
}
Fusion Table 热图
Fusion Tables 还对热图提供一定的支持,并会以一组不同的颜色来表示匹配位置的密度。当前热图使用红色(密集)到绿色(稀少)的渐变来表示关联位置的相对份额。要启用热图,请将图层的FusionTablesLayerOptions
heatmap
参数设置为 enabled: true
。
注:Fusion Tables 热图是在服务器端呈现的。如果您想要客户端热图,请改为使用 Heatmap Layer。
下例使用热图显示历史地震数据。
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 10, lng: -140},
zoom: 3
}); var layer = new google.maps.FusionTablesLayer({
query: {
select: 'location',
from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
},
heatmap: {
enabled: true
}
}); layer.setMap(map);
}