arcgis api for javascript4.18加载天地图服务，并且加载自己的发布的动态地图服务

最新推荐文章于 2024-08-01 17:28:04 发布

置顶渊博苑

最新推荐文章于 2024-08-01 17:28:04 发布

阅读量2.1k

点赞数 3

本文链接：https://blog.csdn.net/ucs426/article/details/111641586

版权

ArcGIS 同时被 3 个专栏收录

66 篇文章 22 订阅

订阅专栏

arcgis server

34 篇文章 2 订阅

订阅专栏

ArcGIS for javascript

15 篇文章 1 订阅

订阅专栏

以arcgis api for javascript4.18 API为例：

遇到几个问题：

1、用户，特别是小白用户，不知道用什么API类来调用各种地图服务。

解决办法：

方法一：正向思考方法

参考官方APIhttps://developers.arcgis.com/javascript/latest/api-reference

方法二：技巧型方法

那么有一个很简单的方法，进入server manager服务目录，找到你的服务，预览一下，

然后你按F12,看到了没有，这个服务用啥方法，咋写，是不是一目了然。可以直接抄代码啊！！！

比如这个服务用了4.15API，用的类是：esri/layers/MapImageLayer

遇到的问题二：

代码都正确，为啥加载不出来？作为一个web前端开发人员,不要直接问别人，要给出前端调试报错啊！

讨厌一些人，直接问：我的代码为啥加载不出来？

这是低级程序员的问话方式，稍微高级点，都会把前端报错调试出来，去自己百度解决这个问题后再问别人！！！！！

如下图：

最简单的方式是：

把这个代码放到web 服务器目webapp目录取用ip或者域名方式去调试。不要直接用文件夹双击方式去解决！！！

这个是Access-Control-Allow-Origin，跨域问题

最后附上代码：

<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />

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

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #layerToggle {
      top: 20px;
      right: 20px;
      position: absolute;
      z-index: 99;
      background-color: white;
      border-radius: 8px;
      padding: 10px;
      opacity: 0.75;
    }
  </style>

  <script>
    require(["esri/Map", "esri/views/MapView", "esri/layers/WebTileLayer","esri/layers/MapImageLayer"], function (Map, MapView, WebTileLayer,MapImageLayer) {

      var tiledLayer = new WebTileLayer({
        urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=vec_w&x={col}&y={row}&l={level}&tk=****************",
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
      });

      var tiledLayer_poi = new WebTileLayer({
        urlTemplate: "http://{subDomain}.tianditu.gov.cn/DataServer?T=cva_w&x={col}&y={row}&l={level}&tk=*****************",
        subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
      });
	  
	  var layertest = new MapImageLayer({
		url: "https://lwb.geoscenewh.cn/server/rest/services/lj/MapServer"

	  });
	  
	 
    var map = new Map({
        basemap: {
          baseLayers: [tiledLayer, tiledLayer_poi]
        }
      });
	  
	  map.add(layertest);

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 9,
        center: [112.90737, 27.85632] // longitude, latitude
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>