用arcgis for javascript 开发一个简单的二维地图（入门案例） |
您所在的位置：网站首页 › Arcgis中文版铅笔在哪 › 用arcgis for javascript 开发一个简单的二维地图（入门案例） |
用arcgis for javascript 开发一个简单的二维地图（入门案例）
|
效果如图： 使用第二个标记从 API 加载特定模块。使用以下代码片段中的语法加载以下模块： esri/Map- 加载特定于创建地图的代码 esri/views/MapView- 加载允许以 2D 方式查看地图的代码 require([ "esri/Map", "esri/views/MapView" ], (Map, MapView) => { // Code to create the map and view will go here });将 JavaScript 放在脚本标记中在构建简单页面或进行实验时很有用，但不适合大型应用程序。在构建更大的应用程序时，所有 JavaScript 都应该放在单独的.js文件中。 全局require()函数用于加载 API 的AMD模块 3.创建地图使用 创建一个新地图Map，它是对从模块加载的 Map 类的引用esri/Map。basemap您可以通过将对象传递给 Map 构造函数来指定地图属性，例如。 require(["esri/Map", "esri/views/MapView"], (Map, MapView) => { const map = new Map({ basemap: "topo-vector" // 底图 }); });其他底图选项包括：satellite, hybrid, gray-vector, dark-gray-vector, oceans, streets-vector, osm, national-geographic, streets-night-vector。通过修改沙盒basemap中的选项使用备用底图。 4. 创建二维视图查看在 HTML 文件中用作容器的引用节点，允许用户在 HTML 页面中查看地图。通过将对象传递给其构造函数来创建一个新对象并设置其属性：MapView require(["esri/Map", "esri/views/MapView"], (Map, MapView) => { const map = new Map({ basemap: "topo-vector" }); const view = new MapView({ container: "viewDiv", // 获取页面中的div元素 map: map, // 将创建的地图对象赋值给map属性 zoom: 4, // 设置缩放级别 center: [15, 65] // 设置中心点 }); });在此代码段中，我们将container属性设置为将保存地图的DOM 节点的名称，在本例中我们使用元素id的属性。该属性引用我们在上一步中创建的地图对象 5.定义页面内容 // 创建一个地图容器有一个“viewDiv”来匹配在构造函数中传递给 MapView属性的 6. 页面样式使用. _ 要使地图填满浏览器窗口，请在页面的 CSS 中添加以下 CSS ： html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } 7.完整代码如下： DOCTYPE html> 二维地图 html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } require(["esri/Map", "esri/views/MapView"], (Map, MapView) => { const map = new Map({ basemap: "topo-vector" }); const view = new MapView({ container: "viewDiv", // 获取页面中的div元素 map: map, // 将创建的地图对象赋值给map属性 zoom: 4, // 设置缩放级别 center: [15, 65] // 设置中心点 }); }); |
【本文地址】
今日新闻 |
推荐新闻 |