ArcGIS api for JavaScript 4.3 学习笔记（1）Mapping and views

最新推荐文章于 2022-07-14 17:17:04 发布

刘华林

最新推荐文章于 2022-07-14 17:17:04 发布

阅读量3.3k

点赞数 1

分类专栏： Arcgis API for JavaScript

本文链接：https://blog.csdn.net/lch2848508/article/details/62042236

版权

Arcgis API for JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

4.3是今年3刚出的，因为工作需要，花了点时间学习了下官网上的Sample Code。

一.Mapping and views

1.Get started with MapView (2D)

1.1引用ASJ。首先下载api文件，放到webroot里面，将文件路径调整下，去掉不需要的。

1.2加载模块。在<script>标签中从API中加载特定的模块，话不多说，上代码：

其中：

    esri/Map ：加载特定的代码创建一个地图
    esri/views/MapView ：加载2D地图显示的代码
    dojo/domReady! ：确保在执行代码前DOM可用

ps：dojo最后要加！是因为感叹号表示domReady一个AMD加载插件。（AMD。。。又可以扯好多，就是异步模块定义的缩写，ASJ全是这模式）

dojo同样提供dojo/ready的方法，这两种不同的地方在于http://g00glen00b.be/dojo-domready-vs-ready/。在简单的例子中，dojo/domReady!会被用到，如果你的应用使用了parseOnLoad: true、Dojo Dijits、来自ESRI库中的widgets或者传统dijits，则需要使用dojo/ready。

全局函数require（Dojo提供的）用来加载模块，ESRI的API建立在Dojo之上，利用其模块化代码库和良好的跨浏览器能力。

1.3创建地图

var map = new Map({
basemap: "streets"
});

这个函数里面可以写各种地图的属性如 basemap: "streets"

1.4创建2D地图视图

视图的参考节点（？直译reference nodes）如HTML文件中的容器，主要功能是将地图视图嵌入进一个HTML页面。使用方式同上一步创建地图，添加属性。

var view = new MapView({
container: "viewDiv", // 对应一个DOM节点，该节点会作为地图容器
map: map // 对应上一步创建的地图
});

ps：MapView对应2D地图，SceneView对应3D，这个下面再说。

1.5定义界面内容

我们需要的map和view都创建好了，最后在HTML创建一个div，联系起来就ok

1.6地图容器的样式

如：

2.Get started with SceneView（3D）

和2D同理，直接贴代码，可以直接用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Get started with SceneView - Create a 3D map</title>
<style>
html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}
</style>
<link rel="stylesheet" href="http://127.0.0.1:8080/arcgis_js_api/library/4.3/4.3/esri/css/main.css">
<script src="http://127.0.0.1:8080/arcgis_js_api/library/4.3/4.3/init.js"></script>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"dojo/domReady!"
], function(Map, SceneView){
var map = new Map({
    basemap: "streets",
    ground: "world-elevation"//3D地图特有
});
var view = new SceneView({
    container: "viewDiv",
    map: map,
    scale: 50000000,   //这里设置初始比例尺
    center: [-101.17, 21.78]
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

3.Load a basic web map

导入一个arcgis.com在线地图，大概是讲怎么调用一个webmap，这种地图需要一个特别的id

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Load a basic WebMap - 4.3</title>
<style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
</style>
<link rel="stylesheet" href="http://127.0.0.1:8080/arcgis_js_api/library/4.3/4.3/esri/css/main.css">
<script src="http://127.0.0.1:8080/arcgis_js_api/library/4.3/4.3/init.js"></script>
<script>
    require([
      "esri/views/MapView",
      "esri/WebMap",
      "dojo/domReady!"
    ], function(
      MapView, WebMap
    ) {
      var webmap = new WebMap({
        portalItem: { // autocasts as new PortalItem()
          id: "f2e9b762544945f390ca4ac3671cfa72"
        }
      });
      var view = new MapView({
        map: webmap,
        container: "viewDiv"
      });
    });
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>

刘华林

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
ArcGIS api for JavaScript 4.3 学习笔记（1）Mapping and views

4.3是今年3刚出的，因为工作需要，花了点时间学习了下官网上的Sample Code。一.Mapping and views1.MapView（2D）1.1引用ASJ。首先下载api文件，放到webroot里面，将文件路径调整下，去掉不需要的。1.2加载模块。在标签中从API中加载特定的模块，话不多说，上代码：require([ "esri/Map", "esr
复制链接

扫一扫