常用函数方法
一. 地图放缩小按钮
二. 底图样式
更多底图请进入arcgis api for javascrilpt官网查看：https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html#
三. 创建加载ArcGISDynamicMapServiceLayer图层、FeatureLayer图层
四. 跳转地图中心点至指定座标位置
map.centerAt([118.675403, 32.067296])
五. 缩放地图至指定等级
map.setZoom(18)
六. 清空加载至地图的要素类
map.graphics.clear();
七. 加载、清除指定图层
//清除serverLayer图层
map.removeLayer(serverLayer);
//加载stationLayer图层
map.addLayer(stationLayer);
八. Demo实例
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
@*加载高德地图*@
<script type="text/javascript">
var dojoConfig = {
async: true,
parseOnLoad: true,
packages: [{
name: "js",
location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
}]
};
</script>
<script src="~/Scripts/jquery-3.3.1.js"></script>
<link href="~/Content/esri.css" rel="stylesheet" />
<link href="~/Content/tundra.css" rel="stylesheet" />
<script src="~/Scripts/init.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 100%;
height: 100%;
position: absolute
}
.list {
width: 12%;
background-color: rgba(22, 59, 90, 0.8);
color: #fff;
position: absolute;
}
input, select, button {
width: 90%;
margin: 10px 5%;
border-radius: 5px;
height: 26px;
}
</style>
<script>
var urlMap = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer'
var stationUrl = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer/0'
var lineUrl = 'http://xxx:6080/arcgis/rest/services/njcs/MapServer/1'
var map;
var serverLayer;//总图层
var stationLayer;//站点图层
var lineLayer;//线路图层
require(["esri/map", "js/gaodeLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer", "esri/geometry/Circle", "esri/layers/GraphicsLayer","dojo/domReady!"],
function (Map, gaodeLayer, ArcGISDynamicMapServiceLayer, FeatureLayer, Circle,GraphicsLayer,) {
/* code goes here */
map = new Map("map", {
center: [118.724, 32.186],
zoom: 12,
logo: false,
slider: false,//放大、缩小按钮
//basemap:"streets-vector",//设置底图样式
});
//创建ArcGISDynamicMapServiceLayer图层（opacity：图层透明度）
serverLayer = new ArcGISDynamicMapServiceLayer(urlMap, { "opacity": 0.6 });
//创建FeatureLayer图层，ArcGISDynamicMapServiceLayer子图层
stationLayer = new FeatureLayer(stationUrl, { "opacity": 0.6 });
lineLayer = new FeatureLayer(lineUrl, { "opacity": 0.6 });
var baselayer = new gaodeLayer();//默认加载矢量 new gaodeLayer({layertype:"road"});也可以 //加载高德地图
map.addLayer(baselayer);//添加高德地图到map容器
//加载ArcGISDynamicMapServiceLayer图层或FeatureLayer图层至地图
map.addLayer(serverLayer);
});
function center() {
map.centerAt([118.675403, 32.067296])
}
function zoom() {
map.setZoom(18)
}
function clear() {
map.graphics.clear()
}
function clearLayer() {
map.removeLayer(serverLayer);
}
function addLayer() {
map.addLayer(stationLayer);
}
</script>
</head>
<body>
<div id="map"></div>
<div class="list">
<button onclick="center()">跳转中心点</button>
<button onclick="zoom()">缩放地图</button>
<button onclick="clear()">清空图层</button>
<button onclick="clearLayer()">清除指定图层</button>
<button onclick="addLayer()">加载指定图层</button>
</div>
</body>
</html>