一. 项目中引入需要的js文件,css样式文件
arcgis的js文件及css样式文下载地址: https://download.csdn.net/download/Jie_1997/12438411
实例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />
<title>title</title>
@*jQuery*@
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.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>
require(["esri/map"],
function (Map) {
map = new Map("map", {
center: [118.886885, 32.5219131],
zoom: 16,
basemap: "satellite",
logo: false,
slider: true,//开启放大缩小
});
//上北
$("#north").click(function () {
map.panUp();
});
//下南
$("#south").click(function () {
map.panDown();
});
//左西
$("#west").click(function () {
map.panLeft();
});
//右东
$("#east").click(function () {
map.panRight();
})
});
</script>
</head>
<body>
<div id="map" style="position: absolute;"></div>
<div style="position: absolute;display: flex;justify-content: center;width: 100%;">
<img id="north" style="height:4em;cursor:pointer;" src="~/Content/top.png" />
</div>
<div style="position: absolute;display: flex;height: 100%;align-items: center;">
<img id="west" style="height:4em;cursor:pointer;" src="~/Content/left.png" />
</div>
<div style="position: absolute;display: flex;height: 100%;align-items: center;right: 0;">
<img id="east" style="height:4em;cursor:pointer;" src="~/Content/right.png" />
</div>
<div style="position: absolute;display: flex;justify-content: center;width: 100%;bottom:0;">
<img id="south" style="height:4em;cursor:pointer;" src="~/Content/bot.png" />
</div>
</body>
</html>
效果图: