使用Google Maps API处理GeoJSON数据

GeoJSON是一种对各种地理数据结构进行编码的格式,基于Javascript对象表示法的地理空间信息数据交换格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型:点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性,特征集合表示一系列特征。

也因为GeoJSON是一种基于JSON 的公开标准,其结构简单且容易读取的特性也广受开发者的欢迎,有不少库开始支持处理GeoJSON,也有许多开放数据(官方或非官方)开始提供GeoJSON作为其数据格式。

一个简单的GeoJSON长得像这样:

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [102.0, 0.5]
        },
        "properties": {
            "prop0": "value0"
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "LineString",
            "coordinates": [
                [102.0, 0.0],
                [103.0, 1.0],
                [104.0, 0.0],
                [105.0, 1.0]
            ]
        },
        "properties": {
            "prop0": "value0",
            "prop1": 0.0
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [100.0, 0.0],
                    [101.0, 0.0],
                    [101.0, 1.0],
                    [100.0, 1.0],
                    [100.0, 0.0]
                ]
            ]
        },
        "properties": {
            "prop0": "value0",
            "prop1": {
                "this": "that"
            }
        }
    }]
}

如上所示,每一个数据都是一个Feature对象,地理位置相关数据会存放在geometry对象内,其中分别有type以及coordinates属性,type用来表示数据类型,可以是点,线,甚至是多边形等;而coordinates用来存放经纬度座标。而其他的相关数据则会放在properties内,以key: value方式呈现。

简单介绍就到此,有兴趣的朋友可以参考http://geojson.org/ 注:这里有网友翻译的GeoJSON格式规范:http://www.oschina.net/translate/geojson-spec

回到主题。Google Maps导入GeoJSON的方式非常简单,如果已经有一个完整的GeoJSON文件的话,那么通过

map.data.loadGeoJson(FILE-URL);

这一行代码就可以导入GeoJSON至Google Maps的Data Layer 了。

简单范例:

var map;
function initMap() {
    // 地图初始设定
    var mapOptions = {
        center: new google.maps.LatLng(25.04674, 121.54168),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // GeoJSON file
    var url = 'https://dl.dropboxusercontent.com/u/12537630/geo.json';

    var mapElement = document.getElementById("mapDiv");

    // Google 地图初始化
    map = new google.maps.Map(mapElement, mapOptions);

    // 导入 GeoJSON 数据
    map.data.loadGeoJson(url);
}

1.png

如果希望导入的数据可以使用自定义样式的话,可以通过map.data.setStyle在导入前设置好期望的style,这里以marker的图标为例:

图示信息我放在GeoJSON的·properties.icon·内,如下:

"type": "Feature",
"geometry": {
    "type": "Point",
    "coordinates": [ 121.51771545410156, 25.028294990979614 ]
},
"properties": {
    "icon": "http://google-maps-icons.googlecode.com/files/vegetarian.png"
}

于是我们可以通过feature.getProperty('icon')去指定每一个point的图标:

// 自定义样式
map.data.setStyle(function(feature) {
  return { 'icon': feature.getProperty('icon') };
});

// 导入 GeoJSON 数据
map.data.loadGeoJson(url);

2.png

如果希望通过ajax方式导入GeoJSON的话也非常简单,在取得ajax回传数据时,用map.data.addGeoJson(res);这行就可以导入数据了。

以jQuery 为例,如:

$.get(FILE-URL, function(res) { map.data.addGeoJson(res); });

有个整理好的GeoJSON,只需要一行就可以很轻松地在Google Maps 产生想要的地图了。如果想在图表上处理点击等等的事件,还是得另外处理。

参考资料:
  1. https://developers.google.com/maps/documentation/javascript/examples/layer-data-simple
    2. https://developers.google.com/maps/documentation/javascript/examples/layer-data-quakes
最后修改:2017 年 12 月 14 日 04 : 57 PM
如果觉得我的文章对你有用,请随意赞赏