OpenLayersで図形を描画する①～基本

OpenLayersでは地図内にお絵かきができます。
以下のようなお絵かきが可能です。

マーカーの配置
線を引く
円で囲む
三角形や四角形などの「多角形」で囲む
テキストを書き込む
矢印で強調する
固定画像の配置
フリーハンドで線を書き込む

今回は「マーカーの配置」、「線を引く」、「円で囲む」、「多角形で囲む」をやってみます。

1 実際にやってみた
2 解説
3 まとめ

実際にやってみた

触れます↓↓↓↓

地図左側に配置した各ボタンを押下すると描画モードになります。

ソースコードはこちらになります。

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" integrity="sha256-rQq4Fxpq3LlPQ8yP11i6Z2lAo82b6ACDgd35CKyNEBw=" crossorigin="anonymous" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js" integrity="sha256-77IKwU93jwIX7zmgEBfYGHcmeO0Fx2MoWB/ooh9QkBA=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="map" style="height:300px"></div>
    <script>
    
      // 描画された図形に適用されるスタイル
      var styleFunction = function(feature) {
        var geometry = feature.getGeometry();
        var styles = [];
        if (geometry.getType() == 'Point') {
          // 点の場合、マーカー配置
          styles.push(new ol.style.Style({
            image: new ol.style.Icon ({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                opacity: 0.95,
                src: 'https://openlayers.org/en/latest/examples/data/icon.png'
            })
          }));
        } else if (geometry.getType() == 'LineString'){
          styles.push(new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#ff0000',
              width: 2
            })
          }));
        } else {
          styles.push(new ol.style.Style({
            stroke: new ol.style.Stroke({
              color: '#ff0000',
              width: 2
            }),
            fill: new ol.style.Fill({
              color: 'rgba(255,0,0,0.3)',
            })
          }));
        }

        return styles;
      };
      
      // 図形を描画するレイヤーを定義する
      var vectorSource = new ol.source.Vector();
      var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: styleFunction
      });
      
      // 描画用ボタンの配置
      // マーカーボタン
      var MarkerControl = (function (Control) {
        function MarkerControl(opt_options) {
          var options = opt_options || {};

          var button = document.createElement('button');
          button.innerHTML = '※';
          button.name = 'Point';
          button.classList.add('map-button');

          var element = document.createElement('div');
          element.className = 'ol-unselectable ol-control';
          element.style.top = '100px';
          element.style.left = '5px';
          element.appendChild(button);

          Control.call(this, {
            element: element,
            target: options.target
          });

          button.addEventListener('click', this.drawMarker.bind(this), false);
        }

        if ( Control ) MarkerControl.__proto__ = Control;
        MarkerControl.prototype = Object.create( Control && Control.prototype );
        MarkerControl.prototype.constructor = MarkerControl;

        MarkerControl.prototype.drawMarker = function drawMarker () {
          addInteractions('Point');
        };

        return MarkerControl;
      }(ol.control.Control));
      
      // Linstringボタン
      var LineStringControl = (function (Control) {
        function LineStringControl(opt_options) {
          var options = opt_options || {};

          var button = document.createElement('button');
          button.innerHTML = '＜';
          button.name = 'LineString';
          button.classList.add('map-button');

          var element = document.createElement('div');
          element.className = 'ol-unselectable ol-control';
          element.style.top = '140px';
          element.style.left = '5px';
          element.appendChild(button);

          Control.call(this, {
            element: element,
            target: options.target
          });

          button.addEventListener('click', this.drawLineString.bind(this), false);
        }

        if ( Control ) LineStringControl.__proto__ = Control;
        LineStringControl.prototype = Object.create( Control && Control.prototype );
        LineStringControl.prototype.constructor = LineStringControl;

        LineStringControl.prototype.drawLineString = function drawLineString () {
          addInteractions('LineString');
        };

        return LineStringControl;
      }(ol.control.Control));
      
      // 円ボタン
      var CircleControl = (function (Control) {
        function CircleControl(opt_options) {
          var options = opt_options || {};

          var button = document.createElement('button');
          button.innerHTML = 'О';
          button.name = 'Circle';
          button.classList.add('map-button');

          var element = document.createElement('div');
          element.className = 'ol-unselectable ol-control';
          element.style.top = '180px';
          element.style.left = '5px';
          element.appendChild(button);

          Control.call(this, {
            element: element,
            target: options.target
          });

          button.addEventListener('click', this.drawCircle.bind(this), false);
        }

        if ( Control ) CircleControl.__proto__ = Control;
        CircleControl.prototype = Object.create( Control && Control.prototype );
        CircleControl.prototype.constructor = CircleControl;

        CircleControl.prototype.drawCircle = function drawCircle () {
          addInteractions('Circle');
        };

        return CircleControl;
      }(ol.control.Control));
      
      // 多角形ボタン
      var PolygonControl = (function (Control) {
        function PolygonControl(opt_options) {
          var options = opt_options || {};

          var button = document.createElement('button');
          button.innerHTML = '△';
          button.name = 'Polygon';
          button.classList.add('map-button');

          var element = document.createElement('div');
          element.className = 'ol-unselectable ol-control';
          element.style.top = '220px';
          element.style.left = '5px';
          element.appendChild(button);

          Control.call(this, {
            element: element,
            target: options.target
          });

          button.addEventListener('click', this.drawPolygon.bind(this), false);
        }

        if ( Control ) PolygonControl.__proto__ = Control;
        PolygonControl.prototype = Object.create( Control && Control.prototype );
        PolygonControl.prototype.constructor = PolygonControl;

        PolygonControl.prototype.drawPolygon = function drawPolygon () {
          addInteractions('Polygon');
        };

        return PolygonControl;
      }(ol.control.Control));

      // 地図の初期化
      var map = new ol.Map({
        controls: ol.control.defaults().extend([
          // マーカーボタン
          new MarkerControl(),
          // LineStringボタン
          new LineStringControl(),
          // 円ボタン
          new CircleControl(),
          // 多角形ボタン
          new PolygonControl
        ]),
        target: 'map',
        layers: [
          new ol.layer.Tile({
            preload: 4,
            source: new ol.source.OSM()
          }), vectorLayer
        ],
        loadTilesWhileAnimating: true,
        view: new ol.View({
            center: ol.proj.fromLonLat([134.227352, 35.539909]),
            zoom: 13
        })
      });

      // 図形描画処理
      var draw, snap;
      function addInteractions(type) {
        // 描画モードの切り替え
        if (draw) {
          map.removeInteraction(draw);
          draw = null;
        }
        draw = new ol.interaction.Draw({
          source: vectorSource,
          type: type
        });
        map.addInteraction(draw);
        
        // マウスカーソルが図形の座標に近づいたときにカーソルを合わせる
        if (!snap) {
          snap = new ol.interaction.Snap({source: vectorSource});
          map.addInteraction(snap);
        }
        
        // 現在の描画モードのボタンを色付けする
        $(".map-button").css('color', 'white');
        $(".map-button[name='" + type + "']").css('color', 'red');
      }
    </script>
  </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

<!DOCTYPE html>

<html>

<head>

</head>

<body>

// 描画された図形に適用されるスタイル

var styleFunction = function(feature) {

var geometry = feature.getGeometry();

var styles = [];

if (geometry.getType() == 'Point') {

// 点の場合、マーカー配置

styles.push(new ol.style.Style({

image: new ol.style.Icon ({

anchor: [0.5, 46],

anchorXUnits: 'fraction',

anchorYUnits: 'pixels',

opacity: 0.95,

src: 'https://openlayers.org/en/latest/examples/data/icon.png'

})

}));

} else if (geometry.getType() == 'LineString'){

styles.push(new ol.style.Style({

stroke: new ol.style.Stroke({

color: '#ff0000',

width: 2

})

}));

} else {

styles.push(new ol.style.Style({

stroke: new ol.style.Stroke({

color: '#ff0000',

width: 2

}),

fill: new ol.style.Fill({

color: 'rgba(255,0,0,0.3)',

})

}));

}

return styles;

};

// 図形を描画するレイヤーを定義する

var vectorSource = new ol.source.Vector();

var vectorLayer = new ol.layer.Vector({

source: vectorSource,

style: styleFunction

});

// 描画用ボタンの配置

// マーカーボタン

var MarkerControl = (function (Control) {

function MarkerControl(opt_options) {

var options = opt_options || {};

var button = document.createElement('button');

button.innerHTML = '※';

button.name = 'Point';

button.classList.add('map-button');

var element = document.createElement('div');

element.className = 'ol-unselectable ol-control';

element.style.top = '100px';

element.style.left = '5px';

element.appendChild(button);

Control.call(this, {

element: element,

target: options.target

});

button.addEventListener('click', this.drawMarker.bind(this), false);

}

if ( Control ) MarkerControl.__proto__ = Control;

MarkerControl.prototype = Object.create( Control && Control.prototype );

MarkerControl.prototype.constructor = MarkerControl;

MarkerControl.prototype.drawMarker = function drawMarker () {

addInteractions('Point');

};

return MarkerControl;

}(ol.control.Control));

// Linstringボタン

var LineStringControl = (function (Control) {

function LineStringControl(opt_options) {

var options = opt_options || {};

var button = document.createElement('button');

button.innerHTML = '＜';

button.name = 'LineString';

button.classList.add('map-button');

var element = document.createElement('div');

element.className = 'ol-unselectable ol-control';

element.style.top = '140px';

element.style.left = '5px';

element.appendChild(button);

Control.call(this, {

element: element,

target: options.target

});

button.addEventListener('click', this.drawLineString.bind(this), false);

}

if ( Control ) LineStringControl.__proto__ = Control;

LineStringControl.prototype = Object.create( Control && Control.prototype );

LineStringControl.prototype.constructor = LineStringControl;

LineStringControl.prototype.drawLineString = function drawLineString () {

addInteractions('LineString');

};

return LineStringControl;

}(ol.control.Control));

// 円ボタン

var CircleControl = (function (Control) {

function CircleControl(opt_options) {

var options = opt_options || {};

var button = document.createElement('button');

button.innerHTML = 'О';

button.name = 'Circle';

button.classList.add('map-button');

var element = document.createElement('div');

element.className = 'ol-unselectable ol-control';

element.style.top = '180px';

element.style.left = '5px';

element.appendChild(button);

Control.call(this, {

element: element,

target: options.target

});

button.addEventListener('click', this.drawCircle.bind(this), false);

}

if ( Control ) CircleControl.__proto__ = Control;

CircleControl.prototype = Object.create( Control && Control.prototype );

CircleControl.prototype.constructor = CircleControl;

CircleControl.prototype.drawCircle = function drawCircle () {

addInteractions('Circle');

};

return CircleControl;

}(ol.control.Control));

// 多角形ボタン

var PolygonControl = (function (Control) {

function PolygonControl(opt_options) {

var options = opt_options || {};

var button = document.createElement('button');

button.innerHTML = '△';

button.name = 'Polygon';

button.classList.add('map-button');

var element = document.createElement('div');

element.className = 'ol-unselectable ol-control';

element.style.top = '220px';

element.style.left = '5px';

element.appendChild(button);

Control.call(this, {

element: element,

target: options.target

});

button.addEventListener('click', this.drawPolygon.bind(this), false);

}

if ( Control ) PolygonControl.__proto__ = Control;

PolygonControl.prototype = Object.create( Control && Control.prototype );

PolygonControl.prototype.constructor = PolygonControl;

PolygonControl.prototype.drawPolygon = function drawPolygon () {

addInteractions('Polygon');

};

return PolygonControl;

}(ol.control.Control));

// 地図の初期化

var map = new ol.Map({

controls: ol.control.defaults().extend([

// マーカーボタン

new MarkerControl(),

// LineStringボタン

new LineStringControl(),

// 円ボタン

new CircleControl(),

// 多角形ボタン

new PolygonControl

]),

target: 'map',

layers: [

new ol.layer.Tile({

preload: 4,

source: new ol.source.OSM()

}), vectorLayer

loadTilesWhileAnimating: true,

view: new ol.View({

center: ol.proj.fromLonLat([134.227352, 35.539909]),

zoom: 13

})

});

// 図形描画処理

var draw, snap;

function addInteractions(type) {

// 描画モードの切り替え

if (draw) {

map.removeInteraction(draw);

draw = null;

}

draw = new ol.interaction.Draw({

source: vectorSource,

type: type

});

map.addInteraction(draw);

// マウスカーソルが図形の座標に近づいたときにカーソルを合わせる

if (!snap) {

snap = new ol.interaction.Snap({source: vectorSource});

map.addInteraction(snap);

}

// 現在の描画モードのボタンを色付けする

$(".map-button").css('color', 'white');

$(".map-button[name='" + type + "']").css('color', 'red');

}

</script>

</body>

</html>

以下のように図形を描画することができます。

「※」ボタン……マーカー配置モードに
地図上をクリックすることでマーカーを配置できます。
「＜」ボタン……線描画モード
地図上で線を引きたい２点をクリックすることで描画できます。
ダブルクリックで描画を終了します。
「○」ボタン……円描画モード
中心点をクリックで指定し、その後円の大きさを指定します。
「△」ボタン……多角形描画モード
地図上に頂点となる座標をクリックで指定することで、多角形を描画できます。

解説

14～48行目で図形に適用するスタイルを定義しています。OpenLayersで描画する図形には以下のようなスタイルを適用することができます。

線の幅（stroke width）
線の色（stroke color）
（円、多角形の）塗りつぶしの色（fill color）
マーカー画像の配置もスタイルの一種

51～55行目では図形を描画するためのレイヤーを定義しています。図形を描画するためには、地図が表示されている画像レイヤーとは別のレイヤー(Vector Layer)を用意する必要があります。

59～196行目では地図左側のボタンを定義しています。詳細は前回の記事を参考にしてください。87、122、157、192行目で押下時の処理を記載しています。

199～222行目では地図の初期化を行っています。上の処理で定義したボタンの定義やVector Layerの定義はここで使用します。

225～247行目が今回の本題である描画処理です。ol.interaction.Drawという機能を使用します。
※interactionとは地図上で行う直感的な操作のことです。標準定義されているものに以下のようなものがあります。

地図上でドラッグすることで移動する
地図上をダブルクリックすることでズームインする
Shiftを押下しながらドラッグ＆ドロップ操作で範囲拡大
Shift + Alt + マウスドラッグで地図を回転する

mapオブジェクトに対してDrawをaddInteractionすることで、地図を「描画モード」にすることができます。

描画モードを定義する際、「どのような図形を描画するか」という指定が必要です。以下の種類の描画モードを指定することができます。

点(Point)
線(LineString)
円(Circle)
多角形(Polygon)

また今回は、どの描画モードか明示的にするために、現在の描画モードのボタンの文字を赤色で表示するようにしています。（245～246行目）

まとめ

今回はボリューミーな内容になりました。

しかし、これはOpenLayersが高機能たる所以です。
本来、このような描画処理を実現するためには、自作でゴリゴリJavaScriptを記述する必要があります。
OpenLayersでは図形を描画する機能が標準で備わっていますので、比較的簡単なソースで「おえかき」が可能になっています。

Drawにはまだまだ面白い機能が備わっているので次回以降お伝えしてまいります。

OpenLayersについての別記事もぜひご覧ください！

①図形を描画する（マーカー、線、円、多角形）
②テキストを書き込む（矩形）
③フリーハンドで書き込む
 ④矢印で強調する
 ⑤固定画像を配置する
 ⑥図形を選択する
 ⑦図形を移動させる
 ⑧固定画像の移動
 ⑨図形を変形させる
 ⑩長方形を変形させる
 ⑪図形を複数選択する
 ⑫図形をJSON形式で保存＆読込
 ⑬図形を削除する
 ⑭線のスタイルを設定する
 ⑮図形の色を設定する

 【入門】地図を表示させる方法
 ボタンを配置する方法
 ミニマップを表示する方法