nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Esri-Leafletから始める

ReneRubalcava

<\/HEAD>

<\/P>

もしLeaflet<\/A>を使ったことがなければ、それは素晴らしい軽量マッピングライブラリで、主にAPIのシンプルさから年々人気が高まっています。Leafletには多数のプラグインやコントロールがあり、その中には Esri-Leaflet<\/A>プラグインも含まれており、これを使うことでArcGIS ServerやArcGIS Onlineサービスと連携できます。<\/P>

<\/P>

Esri-Leafletのexamples<\/A>には始め方の素晴らしい情報がたくさんありますが、時々「開発者がどのようにそれを開発ワークフローに組み込むか」という質問を受けます。examplesはプロジェクトに慣れるには良いですが、アプリケーションが成長すると少し複雑になることがあります。ここでは、より堅牢なソリューションでゼロから始める方法をお見せしたいと思います。<\/P>

<\/P>

必要なものを入手する<\/H2>このデモではnode<\/A>と npm<\/A>が必要です。io.jsのことは気にしないでください。nodeとnpmをインストールしたら、プロジェクト用のディレクトリをマシン上に作成します。ローカルサーバー上である必要はありません。nodeでそれを管理します<\/EM>。そのディレクトリを作成したら、その中でターミナルを開き、お好みのコマンドラインツールで次のコマンドを実行してください： npm init<\/SPAN><\/P><\/P>表示されるプロンプトにはデフォルトを受け入れてください。完了すると、そのディレクトリにpackage.json<\/STRONG>ファイルができます。次に、開発中に役立ついくつかのモジュール（LeafletとEsri-Leafletを含む）をインストールする必要があります。<\/P>npm install watchify --save-dev<\/SPAN><\/P>npm install http-server --save-dev<\/SPAN><\/SPAN><\/P>npm install leaflet --save<\/SPAN><\/SPAN><\/P>npm install esri-leaflet --save<\/SPAN><\/SPAN><\/P><\/P>

基本設定<\/H2>必要なモジュールがインストールできたので、基本的なファイルを設定しましょう。<\/P>ディレクトリ内にシンプルな内容のindex.html<\/STRONG>ファイルを作成してください。特別なものはありません。<\/P><!DOCTYPE html>
<html>
    <head>
        <title>Starting Esri Leaflet<\/title>
        <link rel="stylesheet" href="http:\/\/cdn.leafletjs.com\/leaflet-0.7.3\/leaflet.css<\/A>" \/><\/SPAN>
        <link rel="stylesheet" href="css\/main.css" \/>
        <meta http-equiv="content-type" content="text\/html; charset=utf-8" \/>
        <meta name="viewport" content="initial-scale=1.0 maximum-scale=1.0">
    <\/head>
    <body>
        <script src="bundle.js"><\/script>
    <\/body>
<\/html><\/PRE>
<\/P>
次に、css<\/STRONG>ディレクトリを作成し、その中にシンプルなmain.css<\/STRONG>ファイルを作りましょう。<\/P>html, body, .map-div {
width : 100%;
height : 100%;
margin : 0;
}<\/PRE><\/P>次に、プロジェクト内にsrc<\/STRONG>ディレクトリを作成し、その中にindex.js<\/STRONG>ファイルとpopup.js<\/STRONG>ファイルを作成してください。このファイルについては後ほど戻ってきます。<\/P><\/P>

自動化する<\/H2>次に、package.json<\/STRONG>ファイルを開き、scripts<\/EM>セクションを編集しましょう。<\/P>"scripts": {
"start": "http-server",
"watch": "watchify src\index.js src\popup.js -o bundle.js -dv",
"start-dev": "npm start | npm run watch"
}<\/PRE><\/P>このscriptsセクションによってnpmでコマンドを実行できるようになります。これは迅速な開発環境構築に非常に便利です。start<\strong>セクションはローカル開発サーバーを localhost:8080 で起動します。 watch セクションは指定されたファイルの変更を監視し、 watch スクリプトを package.json に必要に応じて追加し、コーディングを続けてください。<\/P><\/P>こちらがGitHub上の完全なアプリケーションです<\/A>。<\/P>
<\/P>
これは非常にシンプルなセットアップですが、正直なところ、現在の設計のままでも
多くのことができます<\/A>。また、npm scripts を活用することも可能です。より堅牢なツールに挑戦したい場合は、gulp、grunt、または webpack のようなものを検討してみてください。深く関わってビルドツールを愛するようになりましょう。<\/P><\/P>さらに多くのgeodevのヒントやコツについては、私のブログをご覧ください。<\/P><\/BODY><\/HTML>

タグ付けされた投稿をもっと見る

GeoDev Adventures

There are no comments yet

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

すべてのコミュニティ
最近の投稿
フォロー中のコンテンツ
コミュニティヘルプ

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.