geojson の simplestyle （Google Maps 実装）

14784 ワード
GIS JavaScript 地図 GoogleMapsAPI geojson JavaScript テキストリンク

こんにちは。
geojson の simplestyle（geojson のスタイル指定）の Google Maps 実装（JavaScript ）を作ってみました1。

下記はこれを使った表示例です。この geojsonデータ2 を使用しました。

var styleDefaultMarker = {
    symbol: '',
    color: '#7e7e7e',
    size: 'medium'
};
var anchors = {'medium': -30, 'small': -20, 'large': -40};
var styleDefault = {
    title: "",
    description: "",
    icon: markerImage(styleDefaultMarker),
    strokeColor:  "#555555",
    strokeOpacity:  1.0,
    strokeWeight:  2,
    fillColor:  "#555555",
    fillOpacity:    0.6,
//  draggable: true,
//  editable: true,
};
var keyStyle = {
    'title': 'title',
    'description': 'description',
    'stroke': 'strokeColor',
    'stroke-opacity': 'strokeOpacity',
    'stroke-width': 'strokeWeight',
    'fill': 'fillColor',
    'fill-opacity': 'fillOpacity'
};

function markerImage(properties) {
    for (var k in styleDefaultMarker) {
        if (properties[k] === undefined) {properties[k] = styleDefaultMarker[k];}
    }
    var siz = properties["size"][0];
    if (properties["symbol"] != "") {siz += "-";}
    var pinUrl = 'https://api.tiles.mapbox.com/v3/marker/pin-' + siz + properties["symbol"] + '+' + properties["color"].replace(/^#/,"") + '.png';
    var img = new google.maps.MarkerImage(pinUrl, null, new google.maps.Point(0, anchors[properties["size"]]), null);
    return img;
}

function copyObject(obj){
    var newObj = {};
    for(var i in obj){newObj[i] = obj[i]}
    return newObj;
};

var styleFeature = function(feature) {
    var style = copyObject(styleDefault);
    for (var i in keyStyle){
       var x = feature.getProperty(i);
       if (x != undefined) {style[keyStyle[i]] = x;}
    }
    var markerProperties = copyObject(styleDefaultMarker);
    for (var k in markerProperties) {
        markerProperties[k] = feature.getProperty("marker-" + k);
    }
    if (markerProperties["symbol"]) {style['icon'] = markerImage(markerProperties);}
    return style;
}

var map;
function init() {
    map = new google.maps.Map(...);
    map.data.setStyle(styleFeature);
//  map.data.setControls(['Point', 'LineString', 'Polygon']);
}

function loadGeoJson(geojsonData) {
    map.data.addGeoJson(geojsonData);
}

  1. なお本当はマーカーの style 指定に関して、simplestyle として正しいことのチェックを加えるべきだと思っています（参考：Leaflet.MakiMarkers ）。 ↩

  2. このデータは "Diffable, more customizable maps"（Github の blog）でも表示例に使われています。しかしこの Github での表示の実装は specification に忠実ではないです（色など）。 ↩