ホームページ ウェブフロントエンド jsチュートリアル ArcGIS API for JavaScript の最初のサンプル プログラムを作成する

ArcGIS API for JavaScript の最初のサンプル プログラムを作成する

Feb 09, 2017 pm 04:51 PM

前回のブログでは、ArcGIS API for JavaScript 開発環境を構築する方法を紹介しました。開発環境がまだセットアップされていない場合は、

ArcGIS API for JavaScript の最初のサンプル プログラムを作成する

開発環境がセットアップされている場合は、今日も続けて説明します。最初の ArcGIS API for JavaScript アプリケーションを構築します。

次に、まずコードを貼り付け、VS2012 で新しく作成した HTML ページにコピーします。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>JS GIS地图</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />

    <style type="text/css">

        html, body, #map

        {

            height: 100%;

            width: 100%;

            margin: 0;

            padding: 0;

        }

        body

        {

            background-color: #FFF;

            overflow: hidden;

            font-family: "Trebuchet MS";

        }

    </style>

    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css" />

    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css" />

    <script type="text/javascript" src="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/init.js"></script>

    <script type="text/javascript">

        var map;

        require(["esri/map", "dojo/domReady!"], function (Map) {

            map = new Map("map", {

                basemap: "topo",

                center: [118.932036047149, 32.09141405],

                zoom: 10

            });

        });

    </script>

</head>

<body>

    <div id="map">

    </div>

</body>

</html>

ログイン後にコピー

実行効果図は次のとおりです:

ArcGIS API for JavaScript の最初のサンプル プログラムを作成する

次に、AMD メソッドを使用する次の JS コードに焦点を当てます:

1

2

3

4

5

6

7

8

9

10

<script type="text/javascript">

              var map;

              require(["esri/map", "dojo/domReady!"], function (Map) {

                  map = new Map("map", {

                      basemap: "topo",

                      center: [118.932036047149, 32.09141405],

                      zoom: 10

                 });

             });

     </script>

ログイン後にコピー

require コールバック関数でパラメーターに名前を付ける場合は、Esri の優先パラメーターを使用します。上記のコードでは、esri/map リソースへの参照が提供され、次に、require 関数で参照される各リソースに、リソース オブジェクトへのアクセスを提供するための対応するパラメーターが指定されています。

古い記述方法は次のとおりです:

1

2

3

4

5

6

7

8

9

10

11

<script type="text/javascript">

           dojo.require("esri.map");

           function init() {

               var map = new esri.Map("map", {

                    basemap: "topo",

                    center: [118.932036047149, 32.09141405],

                    zoom: 10

              });

          }

         dojo.ready(init);

     </script>

ログイン後にコピー

dojo.require は推奨されなくなりました。公式ドキュメントでは、モジュール名の区切り文字については、単なる文法上の要件です。

上記は、ArcGIS API for JavaScript を作成するための最初のサンプル プログラムの内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。


このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

jQuery日付が有効かどうかを確認します jQuery日付が有効かどうかを確認します Mar 01, 2025 am 08:51 AM

jQuery日付が有効かどうかを確認します

jQueryは要素のパディング/マージンを取得します jQueryは要素のパディング/マージンを取得します Mar 01, 2025 am 08:53 AM

jQueryは要素のパディング/マージンを取得します

トップ5の日付操作JSプラグイン トップ5の日付操作JSプラグイン Feb 28, 2025 am 12:34 AM

トップ5の日付操作JSプラグイン

10 jqueryプラグインをチェックする価値があります 10 jqueryプラグインをチェックする価値があります Mar 01, 2025 am 01:29 AM

10 jqueryプラグインをチェックする価値があります

10 jQuery Accordionsタブ 10 jQuery Accordionsタブ Mar 01, 2025 am 01:34 AM

10 jQuery Accordionsタブ

jQueryはscrollbarをdivに追加します jQueryはscrollbarをdivに追加します Mar 01, 2025 am 01:30 AM

jQueryはscrollbarをdivに追加します

10 Ajax/jQueryオートコンプリートチュートリアル/プラグイン 10 Ajax/jQueryオートコンプリートチュートリアル/プラグイン Feb 28, 2025 am 01:03 AM

10 Ajax/jQueryオートコンプリートチュートリアル/プラグイン

See all articles