GeoJSON 简介
GeoJSON 是一种对地理资讯结构进行编码的格式，基于 JavaScript 物件标记的地理空间资讯资料交换格式 ( 所以才会是 Geo + json )，GeoJSON 支援像是点、线、多边形、多点、多线、多个多边形的几何形状，当中也包含了特征或特征的集合资讯。
举例来说，一个 GeoJSON 最外层包含一个 type 为 FeatureCollection 的属性，接著 features 的属性包含了许多 type 为 Feature 的物件，这些 Feature 物件里包含 properties 的属性，可以设定区域的颜色、边框...等样式，也包含了 geometry 的属性，定义地图上形状的面貌，以下面这段 GeoJSON 来说，就是在台北 101 旁的松寿路上，画「一段粗细 10px，透明度 0.5 的红色直线」。
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"stroke": "#ff0000",
"stroke-width": 10,
"stroke-opacity": 0.5
},
"geometry": {
"type": "LineString",
"coordinates": [
[
121.56351685523987,
25.03585799721269
],
[
121.56548023223877,
25.0358093932627
]
]
}
}
]
}
上面的例子中，type 设定为 LineString 呈现的是直线，如果要呈现多边形，就要将 type 设为 Polygon，下面的 GeoJSON 呈现的是台北 101 被一个「黑色实线、红色半透明填满的正方形」围住。
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"stroke": "#000000",
"stroke-width": 2,
"stroke-opacity": 1,
"fill": "#ff2600",
"fill-opacity": 0.5
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
121.56345248222352,
25.03295144714567
],
[
121.5654158592224,
25.03295144714567
],
[
121.5654158592224,
25.03476926411677
],
[
121.56345248222352,
25.03476926411677
],
[
121.56345248222352,
25.03295144714567
]
]
]
}
}
]
}
产生 GeoJSON
虽然说已经知道了 GeoJSON 的格式，但要产生 GeoJSON 最麻烦的仍然是那些小数点好多位数的「座标」，这时候就要透过 geojson.io 这个线上服务，来帮我们产生标准又漂亮的 GeoJSON。
参考连结：http://geojson.io/
打开网页后，映入眼帘的是左右两个视窗，左边的视窗是地图，右上角有绘图的工具，右边的视窗会根据所绘制的图案，自动产生 GroJSON。
用「多边形」工具把台北 101 旁边的台北世界贸易中心框起来，就会看到对应的 GeoJSON 自动产生出来。
用滑鼠点击画好的多边形，就可以修改多边形的属性，修改后在 GeoJSON 里的 properties 也会自动产生，下图就是把绘制的多边形，改成黑色外框红色填满的属性。
透过 geojson.io 这个方便好用的网站，要产生 GeoJSON 已经不再那么困难，接著就来实作如何用 Google 地图显示 GeoJSON 资料。
Google 地图显示 GeoJSON 资料
汇入 GeoJSON 资料其实很简单，每个 Google 地图都有一个 map.data 物件，做为任意地理空间资料（包括 GeoJSON）的资料图层，只要呼叫 data 物件的loadGeoJSON()方法就可以，用法如下：
map.data.loadGeoJson('GeoJSON.json');
举例来说，下面这段程式码，就会在地图上载入上面我们所画好的台北世贸中心。
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: 25.034010, lng:121.562428}
});
map.data.loadGeoJson('geojson.demo.json');
}
不过很神奇的，载入之后我们原本设定的样式反而不见了，这时候就得使用Data.setStyle()方法来指定资料外观，以刚刚的例子来说，只要改写成下面这样，就能让原本的形状多了些色彩。
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: 25.034010, lng:121.562428}
});
map.data.loadGeoJson('geojson.demo.json');
map.data.setStyle({
strokeWeight: 20,
strokeOpacity: .5,
strokeColor: '#f00',
fillColor: '#0c0',
fillOpacity: .35
});
}
如果还是想使用我们自定义的 GeoJSON 样式该怎么做呢？这时就得用到map.data.setStyle(function(feature)){}来取的每笔资料的属性，下面的例子将会把我们自定义的 properties 的样式取出，套用到 Google 地图上。
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: 25.034010, lng:121.562428}
});
map.data.loadGeoJson('geojson.demo.json');
map.data.setStyle(function(feature){
return {
strokeWeight: feature.getProperty('stroke-width'),
strokeOpacity: feature.getProperty('stroke-opacity'),
strokeColor: feature.getProperty('stroke'),
fillColor: feature.getProperty('fill'),
fillOpacity: feature.getProperty('fill-opacity')
}
});
}
同样道理，如果我们手动在 properties 内定义一个名为 name 的属性，就可以在「多个形状」的资料下，指定每笔资料产生的形状样式，以下面的例子来说，透过 name 的属性，就能指定红色和绿色的区块按照 GeoJSON 的配置显示色彩，而另外一个区块就用预设的 Google 形状来显示。
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 17,
center: {lat: 25.034010, lng:121.562428}
});
map.data.loadGeoJson('geojson.demo2.json');
map.data.setStyle(function(feature){
if(feature.getProperty('name')=='red' || feature.getProperty('name')=='green'){
return {
strokeWeight: feature.getProperty('stroke-width'),
strokeOpacity: feature.getProperty('stroke-opacity'),
strokeColor: feature.getProperty('stroke'),
fillColor: feature.getProperty('fill'),
fillOpacity: feature.getProperty('fill-opacity')
}
}
});
}
小结
基本上透过 Google 地图来显示 GeoJSON 资料没有太大的难度，比较难的是读取资料后要怎么用视觉化呈现，让使用者可以一目了然，接下来会再尝试读取资料后再做一些变化，敬请期待啰~ ^_^