さくらのIoT Platform α版準備編その２

第二弾。こちらの記事の続きです。

さくらのIoT Platform α版準備編その１

Home Made Garbage

今回、まず準備段階としてやりたいのは、下記の三点です。

GPSのログから地図に経路の表示
アイコン表示
公開用に地図を非表示にする

1. GPSのログから地図に経路の表示

OpenStreetMap & OpenLayers3

地図は家族内のみで確認したいので、非公開サイトでも使える地図を・・・ということで、 OpenStreetMap & OpenLayers3 を使わせていただく事にしました（※GoogleMapAPIやYahooMapAPIは、非公開サイトでの使用は有償版のみでした。）

札幌中心部の地図を表示

バッチリです。これがオープンソースとはなんともありがたい限りです。

HMTLのheader

    <link rel="stylesheet" href="http://openlayers.org/en/v3.16.0/css/ol.css" type="text/css">
    <style>
      .map {
        height: 700px;
        width: 100%;
      }
    </style>
    <script src="http://openlayers.org/en/v3.16.0/build/ol.js" type="text/javascript"></script>

<style>

.map {

height: 700px;

width: 100%;

}

</style>

必須なのはjsとcssです。ソースは直接でもDLして自分のサイトに上げても良いようです。ひとまずは直接リンクさせて頂いています。ヘッダは基本的にはこれだけでOKです。

HTMのbody

<script type="text/javascript">// <![CDATA[
var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([141.35153532, 43.06645018]),
            zoom: 16
        }),
    });
// ]]></script>

var map = new ol.Map({

target: 'map',

layers: [

new ol.layer.Tile({

source: new ol.source.OSM()

})

view: new ol.View({

center: ol.proj.fromLonLat([141.35153532, 43.06645018]),

zoom: 16

}),

});

// ]]></script>

ここで色々、レイヤーを重ねたり設定を追加していきます。

ログ経路表示

肝心の経路表示は、こちらのサイト様を参考にさせて頂きました。ありがたや・・・！

Matsup's blog: OpenLayers 3 を使ってみよう（その３：地図上に折線を引く）

matsup.blogspot.jp

    // ログ経路
    var lineStrArray = new Array();
    var coordArray = new Array();
    
    coordArray.push([緯度, 経度]);
    （略）
    coordArray.push([緯度, 経度]);
    
    for (i=0; i<(coordArray.length-1); i++) {
        lineStrArray.push([coordArray[i], coordArray[i+1]]);
    }
    
    var lineStrings = new ol.geom.MultiLineString([]);
    
    lineStrings.setCoordinates(lineStrArray);
    
    var lineVector = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: [ new ol.Feature(
            lineStrings.transform('EPSG:4326', 'EPSG:3857')
          )]
        }),
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({ color: '#ff00ff', width: 2 }),
        })
    });

// ログ経路

var lineStrArray = new Array();

var coordArray = new Array();

coordArray.push([緯度, 経度]);

（略）

coordArray.push([緯度, 経度]);

for (i=0; i<(coordArray.length-1); i++) {

lineStrArray.push([coordArray[i], coordArray[i+1]]);

}

var lineStrings = new ol.geom.MultiLineString([]);

lineStrings.setCoordinates(lineStrArray);

var lineVector = new ol.layer.Vector({

source: new ol.source.Vector({

features: [ new ol.Feature(

lineStrings.transform('EPSG:4326', 'EPSG:3857')

)]

}),

style: new ol.style.Style({

stroke: new ol.style.Stroke({ color: '#ff00ff', width: 2 }),

})

});

2. 家、学校、児童館にアイコン表示

公式の OpenLayers 3 Examples を参考にさせて頂きました。

Vector Icon Example

openlayers.org

    // アイコン
    var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([経度, 緯度])),
    });
    
    var iconFeature2 = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([経度, 緯度])),
    });
    
    var iconFeature3 = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([経度, 緯度])),
    });
    
    var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            src: '/wp/wp-content/uploads/map-icon-home.png',
        }))
    });
    
    var iconStyle2 = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            src: '/wp/wp-content/uploads/map-icon-school.png',
        }))
    });
    
    var iconStyle3 = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            src: '/wp/wp-content/uploads/map-icon-jidokan.png'
        }))
    });
    
    iconFeature.setStyle(iconStyle);
    iconFeature2.setStyle(iconStyle2);
    iconFeature3.setStyle(iconStyle3);
    
    var vectorSource = new ol.source.Vector({
        features: [iconFeature,iconFeature2,iconFeature3]
    });
    
    var iconLayer = new ol.layer.Vector({
        source: vectorSource,
    });

// アイコン

var iconFeature = new ol.Feature({

geometry: new ol.geom.Point(ol.proj.fromLonLat([経度, 緯度])),

});

var iconFeature2 = new ol.Feature({

geometry: new ol.geom.Point(ol.proj.fromLonLat([経度, 緯度])),

});

var iconFeature3 = new ol.Feature({

geometry: new ol.geom.Point(ol.proj.fromLonLat([経度, 緯度])),

});

var iconStyle = new ol.style.Style({

image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({

src: '/wp/wp-content/uploads/map-icon-home.png',

}))

});

var iconStyle2 = new ol.style.Style({

image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({

src: '/wp/wp-content/uploads/map-icon-school.png',

}))

});

var iconStyle3 = new ol.style.Style({

image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({

src: '/wp/wp-content/uploads/map-icon-jidokan.png'

}))

});

iconFeature.setStyle(iconStyle);

iconFeature2.setStyle(iconStyle2);

iconFeature3.setStyle(iconStyle3);

var vectorSource = new ol.source.Vector({

features: [iconFeature,iconFeature2,iconFeature3]

});

var iconLayer = new ol.layer.Vector({

source: vectorSource,

});

通常の緯度経度で設定するには ol.proj.fromLonLat([経度, 緯度]) で指定する必要がありました。

3. 公開用に地図を非表示にする

地図の透明度を追加。

またまたMatsup’s blog様を参考にさせて頂きました。日本語情報が少ないなか大変ありがたいです。

Matsup's blog: OpenLayers 3 を使ってみよう（その２：地図の不透明度を変える）

matsup.blogspot.jp

    var opacity = 0
    // 地図
    var map1 = new ol.layer.Tile({
        opacity: opacity,
        source: new ol.source.OSM()
    });

var opacity = 0

// 地図

var map1 = new ol.layer.Tile({

opacity: opacity,

source: new ol.source.OSM()

});

その他の設定

マウスホイールでのズームを解除する処理を追加しました。

    var map = new ol.Map({
        layers: [map1,lineVector,iconLayer],
        target: 'map',
        interactions: ol.interaction.defaults({mouseWheelZoom:false}),
        view: new ol.View({
          center: ol.proj.fromLonLat([経度, 緯度]),
          zoom: 17
        }),
    });

var map = new ol.Map({

layers: [map1,lineVector,iconLayer],

target: 'map',

interactions: ol.interaction.defaults({mouseWheelZoom:false}),

view: new ol.View({

center: ol.proj.fromLonLat([経度, 緯度]),

zoom: 17

}),

});

参考にさせていただきました。
OpenLayers 3 Disable Mouse Wheel on Zoom

完成した地図とソースコード

地図

map

公開用では、地図の透明度を0にしてアイコンと経路だけが表示されるようにします。画像の取得は、地図上で通常の画像同様に「名前を付けて画像を保存…」が出来ました。

ピンクの線はお父ちゃんが歩きまわったログの経路です。起動直後はちょっと不安定？とかで若干正確じゃないデータが入っているそうですが。

ソースコード

<div id="map" class="map"> </div>

<script type="text/javascript">// <![CDATA[
    var opacity = 0;
    
    // 地図
    var map1 = new ol.layer.Tile({
        opacity: opacity,
        source: new ol.source.OSM()
    });
    
    // アイコン
    var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([経度, 緯度])),
    });
    
    var iconFeature2 = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([経度, 緯度])),
    });
    
    var iconFeature3 = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([経度, 緯度])),
    });
    
    var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            src: '/wp/wp-content/uploads/map-icon-home.png',
        }))
    });
    
    var iconStyle2 = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            src: '/wp/wp-content/uploads/map-icon-school.png',
        }))
    });
    
    var iconStyle3 = new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
            src: '/wp/wp-content/uploads/map-icon-jidokan.png'
        }))
    });
    
    iconFeature.setStyle(iconStyle);
    iconFeature2.setStyle(iconStyle2);
    iconFeature3.setStyle(iconStyle3);
    
    var vectorSource = new ol.source.Vector({
        features: [iconFeature,iconFeature2,iconFeature3]
    });
    
    var iconLayer = new ol.layer.Vector({
        source: vectorSource,
    });
    
    // ログ経路
    var lineStrArray = new Array();
    var coordArray = new Array();
    
    coordArray.push([緯度, 経度]);
    （略）
    coordArray.push([緯度, 経度]);
    
    for (i=0; i<(coordArray.length-1); i++) {
        lineStrArray.push([coordArray[i], coordArray[i+1]]);
    }
    
    var lineStrings = new ol.geom.MultiLineString([]);
    
    lineStrings.setCoordinates(lineStrArray);
    
    var lineVector = new ol.layer.Vector({
        source: new ol.source.Vector({
          features: [ new ol.Feature(
            lineStrings.transform('EPSG:4326', 'EPSG:3857')
          )]
        }),
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({ color: '#ff00ff', width: 2 }),
        })
    });
    
    // 地図表示
    var map = new ol.Map({
        layers: [map1,lineVector,iconLayer],
        target: 'map',
        interactions: ol.interaction.defaults({mouseWheelZoom:false}),
        view: new ol.View({
          center: ol.proj.fromLonLat([経度, 緯度]),
          zoom: 17
        }),
    });

// ]]></script>

var opacity = 0;

// 地図

var map1 = new ol.layer.Tile({

opacity: opacity,

source: new ol.source.OSM()

});

// アイコン

var iconFeature = new ol.Feature({

geometry: new ol.geom.Point(ol.proj.fromLonLat([経度, 緯度])),

});

var iconFeature2 = new ol.Feature({

geometry: new ol.geom.Point(ol.proj.fromLonLat([経度, 緯度])),

});

var iconFeature3 = new ol.Feature({

geometry: new ol.geom.Point(ol.proj.fromLonLat([経度, 緯度])),

});

var iconStyle = new ol.style.Style({

image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({

src: '/wp/wp-content/uploads/map-icon-home.png',

}))

});

var iconStyle2 = new ol.style.Style({

image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({

src: '/wp/wp-content/uploads/map-icon-school.png',

}))

});

var iconStyle3 = new ol.style.Style({

image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({

src: '/wp/wp-content/uploads/map-icon-jidokan.png'

}))

});

iconFeature.setStyle(iconStyle);

iconFeature2.setStyle(iconStyle2);

iconFeature3.setStyle(iconStyle3);

var vectorSource = new ol.source.Vector({

features: [iconFeature,iconFeature2,iconFeature3]

});

var iconLayer = new ol.layer.Vector({

source: vectorSource,

});

// ログ経路

var lineStrArray = new Array();

var coordArray = new Array();

coordArray.push([緯度, 経度]);

（略）

coordArray.push([緯度, 経度]);

for (i=0; i<(coordArray.length-1); i++) {

lineStrArray.push([coordArray[i], coordArray[i+1]]);

}

var lineStrings = new ol.geom.MultiLineString([]);

lineStrings.setCoordinates(lineStrArray);

var lineVector = new ol.layer.Vector({

source: new ol.source.Vector({

features: [ new ol.Feature(

lineStrings.transform('EPSG:4326', 'EPSG:3857')

)]

}),

style: new ol.style.Style({

stroke: new ol.style.Stroke({ color: '#ff00ff', width: 2 }),

})

});

// 地図表示

var map = new ol.Map({

layers: [map1,lineVector,iconLayer],

target: 'map',

interactions: ol.interaction.defaults({mouseWheelZoom:false}),

view: new ol.View({

center: ol.proj.fromLonLat([経度, 緯度]),

zoom: 17

}),

});

// ]]></script>

やっとできたー！GPSやら地図のことやらわからないことだらけなので何日もかかりました。

さて、これからどうするか・・・！

近々やっとモジュールも届くそうなので楽しみです。

コメントはこちらからコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

今回、まず準備段階としてやりたいのは、下記の三点です。

1. GPSのログから地図に経路の表示

OpenStreetMap & OpenLayers3

札幌中心部の地図を表示

HMTLのheader

HTMのbody

ログ経路表示

2. 家、学校、児童館にアイコン表示

3. 公開用に地図を非表示にする

その他の設定

icon-map-marker 完成した地図とソースコード

地図

ソースコード

関連記事

コメントはこちらから コメントをキャンセル

完成した地図とソースコード

コメントはこちらからコメントをキャンセル