WebGIS中的两种地图加载方式

最新推荐文章于 2024-05-27 21:01:00 发布

lixiangshen

最新推荐文章于 2024-05-27 21:01:00 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.csdn.net/lixiangshen/article/details/104888266

版权

ArcGIS server 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

加载远程地图服务

效果图
在这里插入图片描述

实例代码
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>hello world</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
  <style>
    html, body, #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
  <script src="http://js.arcgis.com/3.9/"></script>
  <script type="text/javascript">
    require(
      ["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!"], function (Map, ArcGISTiledMapServiceLayer) {
        // 以下是创建地图与加入底图的代码
        var map = new Map("mapDiv");
        var agoServiceURL = "http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer";
        var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL, { displayLevels: [0, 1, 2, 3, 4, 5, 6, 7] });
        map.addLayer(agoLayer);
      });
  </script>
</head>
<body class="tundra">
<div id="mapDiv"></div>
</body>
</html>

加载电脑本地地图服务（ArcGIS server）

效果图
在这里插入图片描述
实例代码
重点：
提示本地电脑加载需要替换自己的url
下文中替换的url为http://localhost:6080/arcgis/rest/services/MyMapService/MapServer

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>hello world</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
  <style>
    html, body, #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
  <script src="http://js.arcgis.com/3.9/"></script>
  <script type="text/javascript">
    require(
      ["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/domReady!"], function (Map, ArcGISDynamicMapServiceLayer) {
        // 以下是创建地图与加入底图的代码
        var map = new Map("mapDiv");
        var agoServiceURL = "http://localhost:6080/arcgis/rest/services/MyMapService/MapServer";
        var agoLayer = new ArcGISDynamicMapServiceLayer(agoServiceURL, { displayLevels: [0, 1, 2, 3, 4, 5, 6, 7] });
        map.addLayer(agoLayer);
      });
  </script>
</head>
<body class="tundra">
<div id="mapDiv"></div>
</body>
</html>