一. 將高德底圖文件放入項目中
高德底圖文件：https://download.csdn.net/download/Jie_1997/12438659
二. 項目中加載高德底圖、引入需要的js文件，css樣式文件,及高德衛星圖css樣式文件
注意： js文件及css樣式文件以實際地址實際爲準（此處僅供參考）。
arcgis的js文件及css樣式文下載地址： https://download.csdn.net/download/Jie_1997/12438411
高德衛星圖樣式文件下載地址： https://download.csdn.net/download/Jie_1997/12439743
三. 添加對應的類要素
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>
@*引入arcgis所需js及css*@
<link href="~/Content/esri.css" rel="stylesheet" />
<link href="~/Content/tundra.css" rel="stylesheet" />
<script src="~/Scripts/init.js"></script>
@*引入高德衛星圖樣式*@
<link href="~/Content/dituqiehuan.css" rel="stylesheet" />
<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,
});
//在線圖層
var ServiceLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.8 });
//var baselayer = new gaodeLayer({layertype: "label"});//加載標註圖
var baselayer = new gaodeLayer();//默認加載矢量 new gaodeLayer({layertype:"road"});也可以
var baselayer1 = new gaodeLayer({ layertype: "st" });//加載衛星圖
//添加高德地圖到map容器
map.addLayer(baselayer);
map.addLayer(baselayer1);
baselayer1.setVisibility(false);
baselayer.setVisibility(true);
$('.daolumap').click(function () {
baselayer1.setVisibility(false);
baselayer.setVisibility(true);
//標註圖
map.addLayer(baselayer, 0);
})
$(".weixingmap").click(function () {
baselayer.setVisibility(false);
baselayer1.setVisibility(true);
//影像圖
map.addLayer(baselayer1, 0);
})
//地圖加載圖層
map.addLayer(ServiceLayer);
});
</script>
</head>
<body>
<div id="map"></div>
<div style="position: absolute; right: 30px; top:10%;z-index:99;background:white;padding:2px;box-shadow:1px 2px 1px rgba(0,0,0,.25);height:26px;width:26px;text-align:center">
<div class="dituqiehuan">
<i class="iconfont icon-globe_blue" style="color:#ddd;font-size:16px;"></i>
</div>
<div id="dituimg" style="display: none; position: absolute; top: 40px; height: 40px; width: 120px; z-index: 999; right: 5px">
<div class="hideimg" style="box-shadow: 5px 5px 5px #aaa; margin-right: 10px">
<img src="~/Content/道路圖.png" style="height:40px; width:60px" class="daolumap" />
</div>
<div class="hideimg" style="box-shadow: 5px 5px 5px #aaa">
<img src="~/Content/衛星地圖.jpg" style="height:40px; width:60px" class="weixingmap" />
</div>
</div>
</div>
</body>
</html>
@*地圖樣式切換顯隱*@
<script>
var ditustate = 0;
$(".dituqiehuan").click(function () {
if (ditustate == 0) {
$("#dituimg").css("display", "flex")
ditustate = 1;
} else {
$("#dituimg").css("display", "none")
ditustate = 0
}
})
</script>