ArcGIS JS api 4.15加载天地图（一）

最新推荐文章于 2024-04-13 15:24:47 发布

GISER皮

最新推荐文章于 2024-04-13 15:24:47 发布

阅读量3.1k

点赞数 1

分类专栏： GIS

本文链接：https://blog.csdn.net/gispipi/article/details/107320543

版权

本文介绍了如何使用ArcGIS JavaScript API 4.15加载天地图，包括下载配置API、放置JS类库、设置页面以及效果展示。在配置过程中，需修改init.js和dojo/dojo.js文件，确保资源目录正确，并注意MapView的spatialReference设置，以解决可能出现的地图显示问题。

摘要由CSDN通过智能技术生成

1 下载与配置。进入下载页面

https://developers.arcgis.com/javascript/latest/guide/get-api/
在这里插入图片描述

2.下载完成后，将js类库放到web程序资源文件。

在这里插入图片描述
修改init.js 和 dojo/dojo.js文件，搜索baseUrl，将baseUrl:"https://[HOSTNAME_AND_PATH_TO_JSAPI]dojo中的[HOSTNAME_AND_PATH_TO_JSAPI]改为自己web程序中的资源目录，最终如：http://localhost:8080/res/js/dojo（res为我的springboot项目配置的静态资源的路径）。
注：此处如果想像ArcGIS那样引用自定义类，可以在init.js中配置依赖路径（在packages数组中添加自定义的即可，比如{location:"../my",name:"my"} 完成自定义路径添加，my文件夹即dojo.js文件夹的上一级目录下的my文件夹）。在这里插入图片描述

3 页面加载一下为测试页面，天地图以山东为例。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Intro to MapView - Create a 2D map</title>
    <style>
      html,
      body,
      #viewDiv {
   
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" 	href="/res/js/esri/themes/light/main.css" />
    <script type="text/javascript" src="/res/js/init.js"></script>
    <script>
      require(["esri/Map", 
      "esri/views/MapView",
      "esri/layers/BaseTileLayer",
      "esri/layers/support/TileInfo",
	  "esri/geometry/SpatialReference",
      "esri/geometry/Extent",
      "esri/config",
      "esri/request"], 
      function(Map, MapView,BaseTileLayer,TileInfo,SpatialReference,Extent,esriConfig, esriRequest) {
   

          var tileInfo = new TileInfo({
   
            "dpi": 96,
            "format": "image/png",
            "compressionQuality": 0,
            "spatialReference": new SpatialReference({
   
            "wkid": 4326
            }),
            "rows": 256,