はじめに
ES モジュールは、主要なブラウザで採用されている、モダンな JS を扱うための公式の標準化されたモジュール システムです。今回 ArcGIS API for JavaScript が提供しているモジュールシステムを利用してみましたので紹介したいと思います。ArcGIS API for JavaScript の ES モジュールは、@arcgis/core を通じて npm からインストールして利用することができます。React や Vue などのフレームワークや Webpack などのビルドツールと連携して利用することができます。今回は、React と Webpack を利用して ES モジュールを使用しましたので、開発をはじめるまでの簡単な流れを紹介したいと思います。
また、ArcGIS API for JavaScript の ES モジュールの詳細については以下を参照してください。 community.esri.com
React や Webpack などの ES モジュールを含んだビルド環境は GitHub でも提供しているため、ゼロから構築を行わなくてもこちらを利用することですぐに始めることができます。 今回は、Esri が提供している jsapi-resources フォークして、こちらを利用しました。 github.com
esm-samles には、React や Webpack 以外にも Vue や node などの多くのビルド環境を提供していますので、目的のフレームワークや開発ツールに合わせて開発を進めることができます。
React で ES モジュールの利用
jsapi-resources にある React で ArcGIS API for JavaScript の ES モジュールをビルドするまでの手順について紹介していきます。 手順は簡単で、まず、Git でクローンして、jsapi-create-react-app プロジェクトまで移動します。
git clone https://github.com/valuecreation/jsapi-resources.git cd jsapi-resources/esm-samples/ cd jsapi-create-react-app
npm install & start することでアプリが起動します。
npm install npm start
デフォルトでは、以下のようなアプリが実装されています。
ArcGIS API JavaScript を利用したアプリ部分は、jsapi-create-react-app/src/App.js に以下の内容が実装されています。
import React, { useRef, useEffect } from "react"; import Bookmarks from '@arcgis/core/widgets/Bookmarks'; import Expand from '@arcgis/core/widgets/Expand'; import MapView from "@arcgis/core/views/MapView"; import WebMap from "@arcgis/core/WebMap"; import "./App.css"; function App() { const mapDiv = useRef(null); useEffect(() => { if (mapDiv.current) { /** * Initialize application */ const webmap = new WebMap({ portalItem: { id: "aa1d3f80270146208328cf66d022e09c" } }); const view = new MapView({ container: mapDiv.current, map: webmap }); const bookmarks = new Bookmarks({ view, // allows bookmarks to be added, edited, or deleted editingEnabled: true }); const bkExpand = new Expand({ view, content: bookmarks, expanded: true }); // Add the widget to the top-right corner of the view view.ui.add(bkExpand, "top-right"); // bonus - how many bookmarks in the webmap? webmap.when(() => { if (webmap.bookmarks && webmap.bookmarks.length) { console.log("Bookmarks: ", webmap.bookmarks.length); } else { console.log("No bookmarks in this webmap."); } }); } }, []); return <div className="mapDiv" ref={mapDiv}></div>; } export default App;
Webpack で ES モジュールの利用
jsapi-resources にある Webpack で ArcGIS API for JavaScript の ES モジュールをビルドするまでの手順について紹介していきます。 Webpack も同様で Git でクローンした jsapi-resources にある webpack プロジェクトまで移動します。
cd jsapi-resources/esm-samples/ cd webpack
npm install & start することでアプリが起動します。
npm install npm start
デフォルトでは、以下のようなアプリが実装されています。
ArcGIS API JavaScript を利用したアプリは、webpack/src/index.js に以下の内容が実装されています。
import Bookmarks from "@arcgis/core/widgets/Bookmarks"; import DotDensityRenderer from "@arcgis/core/renderers/DotDensityRenderer"; import Expand from "@arcgis/core/widgets/Expand"; import FeatureLayer from "@arcgis/core/layers/FeatureLayer"; import Legend from "@arcgis/core/widgets/Legend"; import MapView from "@arcgis/core/views/MapView"; import WebMap from "@arcgis/core/WebMap"; const map = new WebMap({ portalItem: { id: "56b5bd522c52409c90d902285732e9f1" } }); const view = new MapView({ container: "viewDiv", map: map, highlightOptions: { fillOpacity: 0, color: [50, 50, 50] }, popup: { dockEnabled: true, dockOptions: { position: "top-right", breakpoint: false } }, constraints: { maxScale: 35000 } }); view.when().then(function () { const dotDensityRenderer = new DotDensityRenderer({ dotValue: 100, outline: null, referenceScale: 577790, // 1:577,790 view scale legendOptions: { unit: "people" }, attributes: [ { field: "B03002_003E", color: "#f23c3f", label: "White (non-Hispanic)" }, { field: "B03002_012E", color: "#e8ca0d", label: "Hispanic" }, { field: "B03002_004E", color: "#00b6f1", label: "Black or African American" }, { field: "B03002_006E", color: "#32ef94", label: "Asian" }, { field: "B03002_005E", color: "#ff7fe9", label: "American Indian/Alaskan Native" }, { field: "B03002_007E", color: "#e2c4a5", label: "Pacific Islander/Hawaiian Native" }, { field: "B03002_008E", color: "#ff6a00", label: "Other race" }, { field: "B03002_009E", color: "#96f7ef", label: "Two or more races" } ] }); // Add renderer to the layer and define a popup template const url = "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Population_by_Race_and_Hispanic_Origin_Boundaries/FeatureServer/2"; const layer = new FeatureLayer({ url: url, minScale: 20000000, maxScale: 35000, title: "Current Population Estimates (ACS)", popupTemplate: { title: "{County}, {State}", content: [ { type: "fields", fieldInfos: [ { fieldName: "B03002_003E", label: "White (non-Hispanic)", format: { digitSeparator: true, places: 0 } }, { fieldName: "B03002_012E", label: "Hispanic", format: { digitSeparator: true, places: 0 } }, { fieldName: "B03002_004E", label: "Black or African American", format: { digitSeparator: true, places: 0 } }, { fieldName: "B03002_006E", label: "Asian", format: { digitSeparator: true, places: 0 } }, { fieldName: "B03002_005E", label: "American Indian/Alaskan Native", format: { digitSeparator: true, places: 0 } }, { fieldName: "B03002_007E", label: "Pacific Islander/Hawaiian Native", format: { digitSeparator: true, places: 0 } }, { fieldName: "B03002_008E", label: "Other race", format: { digitSeparator: true, places: 0 } }, { fieldName: "B03002_009E", label: "Two or more races", format: { digitSeparator: true, places: 0 } } ] } ] }, renderer: dotDensityRenderer }); map.add(layer); view.ui.add( [ new Expand({ view: view, content: new Legend({ view: view }), group: "top-left", expanded: true }), new Expand({ view: view, content: new Bookmarks({ view: view }), group: "top-left" }) ], "top-left" ); });
さいごに
ES モジュールを利用することで React や Vue、Webpack などのフレームワークやビルド環境で ArcGIS API for JavaScript した地図アプリをすぐに開発することができます。ArcGIS API for JavaScript を利用した開発をはじめたい方は以下が参考になるかと思います。
また、ES モジュール以外にも AMD モジュール や CDN モジュールを使用して開発することも可能です。合わせて以下を参照していただければと思います。
ArcGIS API for JavaScript のモジュールシステム全体の概要は以下が参考になります。
