円、楕円(だえん)を表示する

ソースコード

//YOLP操作のためのJavaScriptインターフェースオブジェクト
var YOLPSL;
//YOLP地図オブジェクト(Mapオブジェクト)
var ymap;


///(カセットを含む)YOLPSLロード完了イベント
/// map:YOLP地図オブジェクト
/// cassettes:カセットオブジェクトのディクショナリ(キーはカセット名)
function onLoadComplete(map, cassettes) {
    ymap = map;
    var slPlugin = document.getElementById("slPlugin");
    if (!slPlugin || !slPlugin.Content) {
        return;
    }
    
    YOLPSL = slPlugin.Content.jsInterface;
    
    var SliderZoomControlHorizontal = YOLPSL.CreateInstance("SliderZoomControlHorizontal");
    ymap.AddControl(SliderZoomControlHorizontal);
    
    var LayerSetControl = YOLPSL.CreateInstance("LayerSetControl");
    ymap.AddControl(LayerSetControl);
    
    document.getElementById("addCircle").onclick       = addCircle;
    document.getElementById("addCircles").onclick      = addCircle100;
    document.getElementById("addCustomCircle").onclick = addCustomCircle;
    document.getElementById("rmvCircle").onclick       = rmvCircle;
    document.getElementById("rmvCircles").onclick      = rmvCircle100;
    document.getElementById("rmvCustomCircle").onclick = rmvCustomCircle;
    document.getElementById("addEllipse").onclick       = addEllipse;
    document.getElementById("addEllipses").onclick      = addEllipse100;
    document.getElementById("addCustomEllipse").onclick = addCustomEllipse;
    document.getElementById("rmvEllipse").onclick       = rmvEllipse;
    document.getElementById("rmvEllipses").onclick      = rmvEllipse100;
    document.getElementById("rmvCustomEllipse").onclick = rmvCustomEllipse;
    
}


//円1つ追加
var circle = null;

function addCircle() {
    if (circle != null) {
        return;
    }
    
    //円オブジェクトを生成
    var radius = Math.random() * 30 + 30;
    circle = YOLPSL.CreateInstanceWithArgs("YCircle", getRandomLL(), radius);
    ymap.AddFeature(circle);
    
}


//円1つ削除
function rmvCircle() {
    ymap.RemoveFeature(circle);
    circle = null;
}



//円100個追加
var circleList = null;
function addCircle100() {
    if (circleList != null) {
        return;
    }
    
    //リスト生成
    circleList = YOLPSL.CreateList("Feature");
    for (var i=0; i<100; i++) {
        
        var radius = Math.random() * 30 + 30;
        var l = YOLPSL.CreateInstanceWithArgs("YCircle", getRandomLL(), radius);
        circleList.push(l);
    }
    
    ymap.AddFeatures(circleList);
    
}


//円100個削除
function rmvCircle100() {
    if (circleList == null) {
        return;
    }
    for (var i=0; i<circleList.length; i++) {
        ymap.RemoveFeature(circleList[i]);
    }
    
    circleList = null;
}


//楕円1つ追加
var ellipse = null;

function addEllipse() {
    if (ellipse != null) {
        return;
    }
    var hradius = Math.random() * 30 + 30;
    var vradius = Math.random() * 30 + 30;
    ellipse = YOLPSL.CreateInstanceWithArgs("YEllipse", getRandomLL(), hradius, vradius);
    ymap.AddFeature(ellipse);

    
}


//楕円1つ削除
function rmvEllipse() {
    ymap.RemoveFeature(ellipse);
    ellipse = null;
}



//楕円100個追加
var ellipseList = null;
function addEllipse100() {
    if (ellipseList != null) {
        return;
    }
    
    //リスト生成
    ellipseList = YOLPSL.CreateList("Feature")
    for (var i=0; i<100; i++) {
        var hradius = Math.random() * 30 + 30;
        var vradius = Math.random() * 30 + 30;
        var l = YOLPSL.CreateInstanceWithArgs("YEllipse", getRandomLL(), hradius, vradius);
        ellipseList.push(l);
    }
    
    ymap.AddFeatures(ellipseList);
    
}


//楕円100個削除
function rmvEllipse100() {
    if (ellipseList == null) {
        return;
    }
    for (var i=0; i<ellipseList.length; i++) {
        ymap.RemoveFeature(ellipseList[i]);
    }
    
    ellipseList = null;
}




//カスタム円追加
var customCircle = null;
function addCustomCircle() {
    
    if (customCircle != null) {
        return;
    }
    
    var foption = YOLPSL.CreateInstance("FeatureOption");
    foption.Title = "カスタム円";
    
    
    //円オプション指定
    foption.StrokeStyle = YOLPSL.CreateInstanceWithArgs("YStyle", "0x005500", 2, 1.0);
    
    //破線設定(線4 - 空1 - 線2 - 空1)
    var dashArray = YOLPSL.CreateArray("Double", 4);
    dashArray[0] = 4.0;
    dashArray[1] = 1.0;
    dashArray[2] = 2.0;
    dashArray[3] = 1.0;
    foption.StrokeStyle.DashArray = dashArray;
    
    //塗りつぶし形式指定
    foption.FillStyle = YOLPSL.CreateInstance("YStyle");
    foption.FillStyle.RGB = "0x00FF00";
    foption.FillStyle.Opacity = 0.5;
    
    //円オブジェクトを作成
    var radius = Math.random() * 30 + 30;
    customCircle = YOLPSL.CreateInstanceWithArgs("YCircle", getRandomLL(), radius, foption);
    ymap.AddFeature(customCircle);
    
    
}


//カスタム円削除
function rmvCustomCircle() {
    ymap.RemoveFeature(customCircle);
    customCircle = null;
    
}


//カスタム楕円追加
var customEllipse = null;
function addCustomEllipse() {
    
    if (customEllipse != null) {
        return;
    }
    
    var foption = YOLPSL.CreateInstance("FeatureOption");
    foption.Title = "カスタム楕円";
    
    
    //楕円オプション指定
    foption.StrokeStyle = YOLPSL.CreateInstanceWithArgs("YStyle", "0x005500", 2, 1.0);
    
    //破線設定(線4 - 空1 - 線2 - 空1)
    var dashArray = YOLPSL.CreateArray("Double", 4);
    dashArray[0] = 4.0;
    dashArray[1] = 1.0;
    dashArray[2] = 2.0;
    dashArray[3] = 1.0;
    foption.StrokeStyle.DashArray = dashArray;
    
    //塗りつぶし形式指定
    foption.FillStyle = YOLPSL.CreateInstanceWithArgs("YStyle", "0x00FF00", 2, 0.6);
    
    //楕円オブジェクトを作成
    var hradius = Math.random() * 30 + 30;
    var vradius = Math.random() * 30 + 30;
    customEllipse = YOLPSL.CreateInstanceWithArgs("YEllipse", getRandomLL(), hradius, vradius, foption);
    ymap.AddFeature(customEllipse);
    
    
}


//カスタム楕円削除
function rmvCustomEllipse() {
    ymap.RemoveFeature(customEllipse);
    customEllipse = null;
    
}


//画面内のランダムな地理座標を取得
function getRandomLL() {
    
    var geoBox = ymap.GetBounds();
    var min = geoBox.GetSouthWest();
    var max = geoBox.GetNorthEast();
    var dx = max.Lon - min.Lon;
    var dy = max.Lat - min.Lat;
    
    var lat = min.Lat + dy * Math.random();
    var lon = min.Lon + dx * Math.random();
    
    var latlng = YOLPSL.CreateInstanceWithArgs("LatLng", lat, lon);
    return latlng;
    
}
Webサービス by Yahoo! JAPAN