重複したラインをオフセットする

実行結果

右の地図では重複しているラインが、左の地図ではオフセットされています。
ソースコードと解説

重複したラインをオフセットするにはZDC.LineOffsetクラスを利用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="//test.api.its-mo.com/v3/loader?key=JSZddc5111626c8|Zo4wz&api=zdcmap.js,control.js,shape.js&enc=UTF8" type="text/javascript"></script>
<!-- 取得したlineoffset.jsを別途インクルードする -->
<script type="text/javascript" src="lineoffset.js"></script>
<script type="text/javascript">

    var lineoffset;

    function loadMap() {
        var map = new ZDC.Map(
            document.getElementById('ZMap'),
            {
                latlon: new ZDC.LatLon(35.676950278, 139.767333333),
                zoom: 11,
                mapType: ZDC.MAPTYPE_HIGHRES_LV18
            }
        );

        var scale = new ZDC.ScaleBar();
        map.addWidget(scale);
        var control = new ZDC.Control(
            {
                type: ZDC.CTRL_TYPE_SMALL
            });
        map.addWidget(control);

        var points1 = [35.6769722, 139.7686861, 35.6769722, 139.7686861,
            35.6768583, 139.768375, 35.6768583, 139.768375, 35.6768778,
            139.7682944, 35.6770528, 139.7675556, 35.6770361, 139.76755,
            35.6770361, 139.76755, 35.6770833, 139.7673472, 35.6770861,
            139.767325, 35.6770861, 139.767325, 35.6771278, 139.7670972,
            35.6772806, 139.7663333, 35.6772806, 139.7663333, 35.6773111,
            139.7661833, 35.6773111, 139.7661833, 35.6774167, 139.7657444,
            35.6774167, 139.7657444];

        var points2 = [35.6769722, 139.7686861, 35.6769722, 139.7686861,
            35.6768583, 139.768375, 35.6768583, 139.768375, 35.6768778,
            139.7682944, 35.6770528, 139.7675556, 35.6770361, 139.76755,
            35.6770361, 139.76755, 35.6770833, 139.7673472, 35.6770861,
            139.767325, 35.6770861, 139.767325, 35.6770833, 139.7673222,
            35.6765778, 139.7671556, 35.6763306, 139.7670722, 35.6761528,
            139.7670111, 35.6761361, 139.7669944, 35.6761361, 139.7669944,
            35.6760444, 139.7669639];

        var points3 = [35.6769722, 139.7686861, 35.6769722, 139.7686861,
            35.6768583, 139.768375, 35.6768583, 139.768375, 35.6768778,
            139.7682944, 35.6770528, 139.7675556, 35.6770361, 139.76755,
            35.6770361, 139.76755, 35.6770833, 139.7673472, 35.6770861,
            139.767325, 35.6770861, 139.767325, 35.6770833, 139.7673222,
            35.6765778, 139.7671556, 35.6763306, 139.7670722, 35.6761528,
            139.7670111, 35.6761361, 139.7669944, 35.6762611, 139.7664528,
            35.6762611, 139.7664528];

        var latlons1 = pointsToLatLons(points1);
        var latlons2 = pointsToLatLons(points2);
        var latlons3 = pointsToLatLons(points3);

        var lines = [];
        lines.push({latlons: latlons1, options: {
            strokeColor: '#ff0000',
            strokeWeight: 5
        }});
        lines.push({latlons: latlons2, options: {
            strokeColor: '#0000ff',
            strokeWeight: 5
        }});
        lines.push({latlons: latlons3, options: {
            strokeColor: '#ffff00',
            strokeWeight: 5
        }});

        /* 3本のラインを適切な順にオフセットして描画する */
        lineoffset = new ZDC.LineOffset(map, {lines: lines});
    }

    function addLine() {
        var points4 = [35.6769722, 139.7686861, 35.6769722, 139.7686861,
            35.6768583, 139.768375, 35.6768583, 139.768375, 35.6768778,
            139.7682944, 35.6770528, 139.7675556, 35.6770361, 139.76755,
            35.6770361, 139.76755, 35.6770833, 139.7673472, 35.6770861,
            139.767325, 35.6770861, 139.767325, 35.6771278, 139.7670972,
            35.6772806, 139.7663333, 35.67715, 139.7662917, 35.67715,
            139.7662917];

        var latlons4 = pointsToLatLons(points4);

        var additionalLine = {latlons: latlons4, options: {
            strokeColor: '#00ff00',
            strokeWeight: 5
        }};

        lineoffset.addLine(additionalLine);
    }

    function redraw() {
        lineoffset.redraw();
    }

    function pointsToLatLons(points) {
        var latlons = [];
        for (var i = 0, j = points.length; i < j - 1; i++) {
            latlons.push(new ZDC.LatLon(points[i], points[i + 1]));
            i++;
        }
        return latlons;
    }

</script>
</head>

<body onload="loadMap();">
    <div id="ZMap" style="border:1px solid #777777; width:345px; height:300px; top:0px; left:20px; position:absolute;"></div>
    <div id="IBox" style="top:310px; left:20px; position:absolute;">
        <input type="button" value="addLine" onclick="addLine();">
        <input type="button" value="redraw" onclick="redraw();">
    </div>
</body>
</html>