ArcGIS for JavaScript构建一个起始demo_arcgis for js demo-优快云博客

本文介绍如何使用ArcGIS JavaScript API创建2D和3D地图应用，涵盖HTML页面搭建、样式设置、地图对象创建及视图配置，提供完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

构建一个起始demo

首先创建一个HTML页面
在HTML页面中添加ArcGIS CSS样式和js API
利用js创建2D地图或者3D场景
2D demo完整代码
3D demo完整代码

首先创建一个HTML页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS for JavaScript satrerdemo</title>
    <style>
      html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

页面只包含一个一个CSS样式，一个div。

在HTML页面中添加ArcGIS CSS样式和js API

 <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
 <script src="https://js.arcgis.com/4.15/"></script>

利用js创建2D地图或者3D场景

//2D地图
<script>
  //加载资源
  require([
      "esri/Map",
      "esri/views/MapView"
    ], function(Map, MapView) {
    //创建一个地图对象
    var map = new Map({
      basemap: "topo-vector"
    });
	//创建一个地图视图
    var view = new MapView({
      container: "viewDiv",
      map: map,
      center: [121.47, 31.23], // longitude, latitude
      zoom: 13
    });
  });
  </script>

//3D地图
<script>
  require([
      "esri/Map",
      "esri/views/SceneView"
    ], function(Map, SceneView) {

    var map = new Map({
      basemap: "topo-vector",
      ground: "world-elevation"  // show elevation
    });

    var view = new SceneView({
      container: "viewDiv",
      map: map,
      camera: {
        position: {  // observation point
          x: 121.47,
          y: 31.23,
          z: 25000 // altitude in meters
        },
        tilt: 65  // perspective in degrees
      }
    });
  });
  </script>

选择2D或3D js代码放到body内

2D demo完整代码

//2D
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
    <style>
      html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.15/"></script>
  </head>
  <body>
    <div id="viewDiv"></div>
    <script>
    require([
        "esri/Map",
        "esri/views/MapView"
      ], function(Map, MapView) {
	  //创建一个地图对象
      var map = new Map({
        basemap: "topo-vector"
      });
	  //创建一个地图视图
      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [121.47, 31.23], // 经纬坐标
        zoom: 13
      });
    });
    </script>
  </body>
</html>

2D运行结果

3D demo完整代码

//3D
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
    <style>
      html, body, #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.15/"></script>
  </head>
  <body>
    <div id="viewDiv"></div>
    <script>
      //加载资源
      require([
          "esri/Map",
          "esri/views/SceneView"
        ], function(Map, SceneView) {
		//创建一个地图对象
        var map = new Map({
          basemap: "topo-vector",
          ground: "world-elevation"  // show elevation
        });
		//创建一个3D视图
        var view = new SceneView({
          container: "viewDiv",
          map: map,
          camera: {
            position: {  // observation point
              x: 121.47,
              y: 31.23,
              z: 25000 // altitude in meters
            },
            tilt: 65  // perspective in degrees 相机视角
          }
        });
      });
    </script>
  </body>
</html>