日日是Oracle APEX: Mapbox GL Drawを使ってマップ・リージョンに図形を書く

2023年2月13日月曜日

ポーランドのPretius社のLech Cieślikさんが、マップ・リージョンに図を書く方法を紹介されています。

Drawing objects on maps in Oracle APEX - MapLibre vs OpenLayers

記事に従ってアプリケーションを作ってみました。

アプリケーション作成ウィザードを起動し、空のアプリケーションを作成します。

名前はDrawing on Mapとしました。アプリケーションの作成を実行します。

アプリケーションが作成されたら、ページ・デザイナでホーム・ページを開きます。

とりあえず地図が表示されればよいので、最小限の設定で地図のリージョンを作成します。

新規にリージョンを作成します。

識別のタイトルはMap、タイプにマップを選択します。ソースの位置はローカル・データベース、タイプはSQL問合せとします。以下のSQLを記述します。皇居の緯度経度です。

select 35.6769883 lat, 139.7588499 lon from dual

レイヤーの識別の名前はSample、レイヤー・タイプはポイントとします。

ソースの位置はリージョン・ソース、列のマッピングのジオメトリ列のデータ型として経度/緯度を選択し、緯度列にLON、経度列にLATを指定します。

マップ・リージョンは以上で作成できました。

ページ・プロパティの設定を行います。

JavaScriptのファイルURLとして、Mapbox GL Drawが実装されているファイルを指定します。

https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.0/mapbox-gl-draw.js

Pretiusさんの元記事はv1.2.0をロードしていますが、Mapboxのサイトの例ではv1.4.0をロードしていたので、v1.4.0を指定するようにしています。

CSSのファイルURLとして以下を指定します。

https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.4.0/mapbox-gl-draw.css

Mapbox GL Drawを初期化する処理は、APEXアクションとして実装します。

JavaScriptのファンクションおよびグローバル変数の宣言に以下を記述します。draw.createにだけコールバックを定義しています。この他にdraw.update、draw.deleteにコールバックを定義できます。

	/*
	* This code is based on the article wrtten by Lech Cieślik, Pretius.
	* Drawing objects on maps in Oracle APEX - MapLibre vs OpenLayers
	* https://pretius.com/blog/maplibre-vs-openlayers/
	*/
	var map, draw;

	/*
	* MapboxのDrawプラグインの初期化。
	*/
	const DRAW_INIT = {
	name: "draw-init",
	action: (event, element, args) => {
	//Get MapLibre GL JS map object
	map = apex.region(element.id).getMapObject();
	//Add Draw plug-in.
	draw = new MapboxDraw({
	displayControlsDefault: false,
	controls: {
	point: true,
	line_string: true,
	polygon: true,
	trash: true
	}
	});
	//Add Control to map
	map.addControl(draw, 'top-left');
	//Fix Mapbox - MapLibre issue
	$('.mapboxgl-ctrl-group.mapboxgl-ctrl').addClass('maplibregl-ctrl maplibregl-ctrl-group');

	// 図形が作成されたときに呼び出される。
	map.on("draw.create", (e) => {
	apex.items.P1_COORDINATE.setValue(
	JSON.stringify(e.features[0].geometry)
	);
	});
	}
	};

	/*
	* アクションの初期化。
	*/
	apex.jQuery(window).on('theme42ready', () => {
	apex.actions.add([DRAW_INIT]);
	});