首页Html，使用API调用esrimap的地图服务，，在script中用require加载地图模块，具体代码

Html，使用API调用esrimap的地图服务，，在script中用require加载地图模块，具体代码

时间: 2024-09-20 18:02:28 浏览: 36

在HTML中使用RequireJS或AMD（Asynchronous Module Definition）加载`esri.map`（这是ESRI JavaScript API的一部分）来调用Esri Maps Service，首先你需要在`<head>`部分引入 RequireJS 和 Esri 的资源链接。然后在`<body>`中编写脚本，这里以RequireJS为例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ESRIMap Example</title>  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>  <script src="https://js.arcgis.com/4.19compact/"></script> <script> require.config({ paths: { "esri": "https://js.arcgis.com/4.19compact/" } }); </script> </head> <body> <div id="map" style="width: 100%; height: 500px;"></div> <script> require(["esri/map", "esri/layers/FeatureLayer"], function(Map, FeatureLayer) { // 创建地图实例 var map = new Map("map", { center: [-122.4194, 37.7749], // 起始位置，例如旧金山 zoom: 13 }); // ESRI地图服务URL，例如World Imagery Service var mapServiceUrl = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"; // 使用FeatureLayer加载地图服务 var layer = new FeatureLayer({ url: mapServiceUrl + "/0", outFields: ["*"] // 需要的所有字段 }); map.add(layer); // 当地图加载完成时可以执行更多操作 map.on("load", function() { console.log("Map loaded"); }); }); </script> </body> </html> ``` 注意：上面的代码示例依赖于在线的Esri JavaScript API，如果你在一个离线环境中，你可能需要下载并托管这些资源。

阅读全文