***

7318 ワード

1、紹介

2、初歩的なステップ

3、アプリケーションコード、index.html

4、パケット

を作成する
1、紹介
現代のJavaScriptは、モジュールの使用と作成に最適です.OpenLayersを使用する推奨方法は、olパッケージをインストールすることです.このチュートリアルでは、すべてのコンテンツを正常に動作させるにはノードが必要な簡単な開発環境の設定について説明します.
このチュートリアルでは、Parcelを使用してアプリケーションをバンドルします.他にもいくつかの選択肢がありますが、そのうちのいくつかはREADMEからリンクされています.
2、初歩的な手順
プロジェクトに新しい空のディレクトリを作成し、実行してmkdir new-project&&cd new-projectにナビゲートします.npm initを使用して、プロジェクトを初期化し、質問に答えます.
OpenLayersを使用してアプリケーションに依存項目として追加

npm install ol

この場合、NPMに必要な開発依存項目の追加を実行するように要求できます.

npm install --save-dev parcel-bundler

3、アプリケーションコードとindex.html
アプリケーションコードをindexに挿入します.js.これは簡単な出発点です.

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 0
  })
});

indexが必要です.htmlはパッケージをバンドルしたファイルを使用します.これは簡単な例です.

// An highlighted block
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Using Parcel with OpenLayers</title>
    <style>
      #map {
        width: 400px;
        height: 250px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="./index.js"></script>
  </body>
</html>

4、パッケージを作成する
簡単なスクリプトを使用すると、コマンドnpm run buildをそれぞれ導入し、npm startでバンドルパッケージを手動で構築し、変更を監視できます.スクリプトセクションpackageに次の内容を追加します.json:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "parcel index.html",
  "build": "parcel build --public-url . index.html"
}

ただです.アプリケーションを実行し、入力します.

npm start

あなたのコンソールにあります.アプリケーションをテストするには、ブラウザでhttp://localhost:1234/を開きます.一部の内容を変更するたびに、ページが自動的に再ロードされ、変更結果が表示されます.
アプリケーション・コードとアプリケーション・プログラムで使用されるすべての依存項目を含む単一のJavaScriptファイルが作成されていることに注意してください.OpenLayersパッケージからは、必要なコンポーネントのみが含まれます.
アプリケーションの本番パッケージを作成するには、入力するだけです.

npm run build

dist/フォルダを本番サーバにコピーします.

appを使用してppt/docなどのファイルを開く

mybatis使用のSqlSession取得