サークルの線と塗りつぶしのスタイルを設定

広告

リファレンスには明記されていませんが、オプションの引数にて線についてはstrokeStyleプロパティ、塗りつぶしについてはfillStyleプロパティに対してStyleクラスのオブジェクトをそれぞれ指定することができるようです。 

{strokeStyle:Styleクラスのオブジェクト, fillStyle:Styleクラスのオブジェクト}

よってポリゴンの場合と同じく線の色や塗りつぶしの透過度などを設定することが可能です。スタイルを表すStyleクラスの使い方については「Style クラスを使った描画スタイルの設定」を参照して下さい。

具体的には次のように記述します。 

var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.68025,139.7693), 15);

var l_style = new Y.Style('ff0000', 10, 0.7);
var f_style = new Y.Style('0000ff', 1, 0.3);

var center = new Y.LatLng(35.680385,139.769096);
var circle = new Y.Circle(center, new Y.Size(40, 20), {strokeStyle:l_style, fillStyle:f_style});

ymap.addFeature(circle);

この場合、線の色を'ff0000'、線の太さを10ピクセル、透過度を0.7に設定し、塗りつぶしの色を'0000ff'、透過度を0.3でサークルを表示します。

サンプルプログラム

では実際に試してみます。

code3_1.js 

window.onload = function() {
  var ymap = new Y.Map("map");
  ymap.drawMap(new Y.LatLng(35.681082,139.76723), 15);

  var l_style = new Y.Style('ff0000', 15, 0.7);
  var f_style = new Y.Style('ffff00', 1, 0.4);

  var circle1 = new Y.Circle(new Y.LatLng(35.681082,139.76723), new Y.Size(50, 50), {strokeStyle:l_style, fillStyle:f_style});
  var circle2 = new Y.Circle(new Y.LatLng(35.675444,139.763947), new Y.Size(50, 50));

  ymap.addFeature(circle1);
  ymap.addFeature(circle2);
}

sample3_1.html 

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

    <title>Yahoo! JavaScriptマップAPI</title>

    <script type="text/javascript" charset="utf-8"
    src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=(id)">
    </script>

    <script src="./js/code3_1.js" type="text/javascript"></script>

  </head>
  <body>
    <p>
    JavaScriptマップAPIを使ったサンプルです。
    </p>

    <div id="map" style="width:400px; height:300px"></div>

    <!-- Begin Yahoo! JAPAN Web Services Attribution Snippet -->
    <a href="http://developer.yahoo.co.jp/about">
    <img src="http://i.yimg.jp/images/yjdn/yjdn_attbtn1_125_17.gif" title="Webサービス by Yahoo! JAPAN" alt="Web Services by Yahoo! JAPAN" width="125" height="17" border="0" style="margin:10px 15px 15px 15px"></a>
    <!-- End Yahoo! JAPAN Web Services Attribution Snippet -->

  </body>
</html>

ブラウザでアクセスすると次のように表示されます。

p3-1

デフォルトのままのサークルと、線や塗りつぶしのスタイルを設定したサークルをそれぞれ表示しました。

( Written by Tatsuo Ikura+ )

Facebook Page