ポリゴンで線と塗りつぶしのスタイルを設定
広告
ポリゴンの場合は、ポリゴンの線及び塗りつぶしのスタイルを設定することができます。Polygonクラスのコンストラクタの2番目の引数で、線についてはstrokeStyleプロパティ、塗りつぶしについてはfillStyleプロパティに対してStyleクラスのオブジェクトをそれぞれ指定します。
{strokeStyle:Styleクラスのオブジェクト, fillStyle:Styleクラスのオブジェクト}
なお塗りつぶしの方のスタイルでは2番目の引数は意味を持ちませんが、3番目の引数に値を設定する場合には2番目の引数にもダミーで値を設定して下さい。
具体的には次のように記述します。
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.68025,139.7693), 15);
var polygonarray = [
new Y.LatLng(35.69411,139.699402),
new Y.LatLng(36.611118,138.218994),
new Y.LatLng(34.973751,138.394775)
];
var l_style = new Y.Style('ff0000', 10, 0.7);
var f_style = new Y.Style('0000ff', 1, 0.3);
var polygon = new Y.Polygon(polygonarray, {strokeStyle:l_style, fillStyle:f_style});
ymap.addFeature(polygon);
この場合、線の色を'ff0000'、線の太さを10ピクセル、透過度を0.7に設定し、塗りつぶしの色を'0000ff'、透過度を0.3でポリゴンを表示します。
サンプルプログラム
では実際に試してみます。
window.onload = function() {
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.487511,137.8125), 7);
var polygonarray1 = [
new Y.LatLng(35.69411,139.699402),
new Y.LatLng(36.611118,138.218994),
new Y.LatLng(35.160337,136.922607)
];
var polygonarray2 = [
new Y.LatLng(34.973751,138.394775),
new Y.LatLng(37.89653,139.020996),
new Y.LatLng(36.346103,140.482178)
];
var line_style = new Y.Style('ff0000', 12, 0.7);
var fill_style = new Y.Style('004f00',0, 0.9);
var polygon1 = new Y.Polygon(polygonarray1);
var polygon2 = new Y.Polygon(polygonarray2, {strokeStyle:line_style, fillStyle:fill_style});
ymap.addFeature(polygon1);
ymap.addFeature(polygon2);
}
<!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/code6_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>
ブラウザでアクセスすると次のように表示されます。
2つのポリゴンを表示しています。1つはデフォルトのままですが、もう1つはスタイルを設定してあります。
( Written by T.buzz.Ikura+ )
Facebook Page