ArcGIS Api forJavaScript - 以高德地图为底图在页面上渲染一个GIS图层

一. 将高德底图文件放入项目中

在这里插入图片描述
高德底图文件:https://download.csdn.net/download/Jie_1997/12438659

二. 项目中加载高德底图、引入需要的js文件,及css样式文件

在这里插入图片描述
注意: js文件及css样式文件以实际地址实际为准。
文件下载地址: https://download.csdn.net/download/Jie_1997/12438411

三. 添加对应的类要素

在这里插入图片描述
ArcGIS API for JavaScript 官方文档使用:
https://developers.arcgis.com/javascript/3/jsapi/map-amd.html

四. 使用高德底图

在这里插入图片描述

源码:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>test</title>
    @*加载高德地图*@
    <script type="text/javascript">
        var dojoConfig = {
            async: true,
            parseOnLoad: true,
            packages: [{
                name: "js",
                location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
            }]
        };
    </script>
    @*引入js及css*@
    <link href="~/Content/esri.css" rel="stylesheet" />
    <link href="~/Content/tundra.css" rel="stylesheet" />
    <script src="~/Scripts/init.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body, #map {
            width: 100%;
            height: 100%;
        }
    </style>
    <script>
        var map;
        var urlMap = "线上图层链接地址"

        require(["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "js/gaodeLayer"],
            function (Map, ArcGISDynamicMapServiceLayer, gaodeLayer) {
                /* code goes here */
                //地图
                map = new Map("map", {
                    center: [118.563409, 33.864469],
                    zoom: 10,
                    logo: false,
                    slider: false,
                });

                //定义图层  (opacity  透明度)
                var ServiceLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.8 });
                //高德地图layer
                var baselayer = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以
                
                //添加高德地图到map容器
                map.addLayer(baselayer);
                //地图加载图层
                map.addLayer(ServiceLayer);
            });
    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要在ArcGIS API加载高德地图作为底图,需要按以下步骤操作: 1. 获取高德地图的服务URL。可以通过高德地图开放平台提供的API或其他方法获取到高德地图的服务URL。 2. 在ArcGIS API的地图对象中添加图层。首先,创建一个新的ArcGIS地图对象,并将高德地图的服务URL作为底图添加到地图中。 ```javascript var map = new Map({ basemap: { baseLayers: [ new TileLayer({ portalItem: { id: { // 高德地图的服务URL // 例如:http://webrd0{subDomain}.is.autonavi.com/appmaptile?style=6&x={col}&y={row}&z={level} // "{level}" 表示缩放级别, "{col}" 表示列号, "{row}" 表示行号, "{subDomain}" 表示服务器子域 // 要根据高德地图的服务URL的具体格式进行替换 source: "<高德地图的服务URL>" } } }) ] } }); ``` 3. 创建视图对象并将地图对象附加到视图中。将地图对象设置为视图的地图属性,然后将视图附加到指定的DOM元素上。 ```javascript var view = new MapView({ container: "viewDiv", // 将视图附加到具有指定ID的DOM元素上 map: map // 设置视图的地图为之前创建的地图对象 }); ``` 通过以上步骤,就可以在ArcGIS API中成功加载高德地图作为底图了。可以根据具体需求进行其他配置和样式的设定,例如放大倍数、中心点、缩放范围等。 ### 回答2: 要加载高德地图作为ArcGIS API底图,需要按照以下步骤进行操作。 首先,打开ArcGIS API for JavaScript官方网站,并下载最新的API版本。安装完成后,将它引入到你的项目中。 接下来,你需要在你的HTML文件中创建一个容器,用于显示地图。可以使用div元素,并设置其宽度和高度。 在你的JavaScript代码中,首先创建一个地图对象。使用arcgis对象中的Map类可以实现这一功能。在创建地图对象时,需要指定地图容器的ID以及其他的可选参数,如初始缩放级别和初始中心点。 接下来,你需要创建一个底图图层对象,并将其添加到地图对象中。使用arcgis对象中的TileLayer类可以加载高德地图服务作为底图。在创建底图图层对象时,需要指定该服务的URL。 最后,将地图对象添加到地图容器中,并显示地图。使用arcgis对象中的MapView类可以实现这一功能。在创建MapView对象时,需要指定地图对象、地图容器对象以及其他的可选参数,如初始视图范围。 加载高德地图作为ArcGIS API底图需要使用合适的API版本,创建地图对象、底图图层对象和视图对象,并将它们按照正确的顺序进行添加和显示。通过以上步骤,你可以成功加载高德地图作为ArcGIS API底图。 ### 回答3: 要将高德地图作为ArcGIS API底图,可以按照以下步骤进行: 1. 首先,在ArcGIS API的官方文档中找到相关的代码示例或文档,这些示例和文档将指导你如何加载外部地图服务。 2. 打开ArcGIS API的开发环境,创建一个新的HTML文件。 3. 在HTML文件中,引入ArcGIS APIJavaScript库文件,并对其进行初始化。 4. 在JavaScript代码中,创建一个地图对象,并指定地图的初始显示范围、放大级别等。 5. 使用ArcGIS API提供的图层对象,加载高德地图的服务URL作为底图图层。 6. 设置地图对象的底图图层加载高德地图图层。 7. 运行或部署该HTML文件,以查看加载高德地图作为ArcGIS API底图的效果。 需要注意的是,使用高德地图作为ArcGIS API底图需要确保高德地图服务的URL和相关访问秘钥是有效的,并且遵循高德地图ArcGIS API的使用协议和限制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值