More than 5 years have passed since last update.

YOLPで地図上に手書きの図形描画をしてみる

Posted at 2016-12-13

今回はこーいうやつのサンプルです。

ポイントは

地図と同じサイズの透明のレイヤーを地図の上に敷く
透明レイヤーにmousedown / mousemove / mouseupのイベントを記述し、ピクセルを緯度経度に変換
polylineを書く。

だけです。

コード上のポイントはfromContainerPixelToLatLng関数です。
これのおかげで実装できています。

全文を下記に掲載しておきます。
YOLPのAPIキーの取得が必要ですので、そちらは別途取得ください。
サンプルはまだスマホやタブレットのタップには対応できていませんが。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
    <title></title>
<body>
    <form id="form1">
    <div>
        <input type="button" name="btn" value="Clear" onclick="mapInit(!$('#is_select_click').is(':checked'));" />

        <div id="map" style="width: 900px; height: 600px;"></div>
        <div id="dragLayer" style="background-color: transparent; width: 900px; height: 600px; display: none; position: absolute;"></div> 
    </div>
    </form>
        <script src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid={ご自分のAPIキーを貼り付けてください}-" type="text/javascript"  charset="UTF-8" ></script>
	    <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
    <script type="text/javascript" >
        var ymap;
        var dragStartPos;
        var dragEndPos;
        var movingPos = null;
        var isDragging = false;

        $(document).ready(function () {
            mapInit();
            $('#dragLayer').bind('mousedown', function (e) {
                dragStartPos = {x : 0.0, y : 0.0};
                dragStartPos.x = e.pageX;
                dragStartPos.y = e.pageY;
                isDragging = true;
            });
            $('#dragLayer').bind('mousemove', function (e) {
                if (!isDragging) return;
                var beforePos = movingPos == null ? dragStartPos : movingPos;
                movingPos = ymap.fromContainerPixelToLatLng(new Y.Point(e.pageX, e.pageY));
                var latlngs = [
                    beforePos,
                    movingPos
                ];
                var polyline = new Y.Polyline(latlngs);
                ymap.addFeature(polyline);
            });

            $('#dragLayer').bind('mouseup', function (e) {
                if (!isDragging) return;
                isDragging = false;
                dragEndPos = { x: 0.0, y: 0.0 };
                dragEndPos.x = e.pageX;
                dragEndPos.y = e.pageY;
                dragStartPos = {x : 0.0, y : 0.0};
                movingPos = null;
            });
        });

        function mapInit() {
            var pos = $('#map').position();
            $('#dragLayer').css({ 'top': pos.top, 'left': pos.left });
            $('#dragLayer').show();
            ymap = new Y.Map("map", {
                configure: {
                    doubleClickZoom: true,
                    scrollWheelZoom: true,
                    singleClickPan: false,
                    dragging: true
                }
            });
            ymap.drawMap(new Y.LatLng(35.650084103526534, 139.72107775058697), 17, Y.LayerSetId.NORMAL);
            ymap.addControl(new Y.LayerSetControl());
            ymap.addControl(new Y.SliderZoomControlHorizontal());
            ymap.addControl(new Y.CenterMarkControl());
        }

    </script>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up