常用函數方法
一. 地圖放縮小按鈕
二. 底圖樣式
更多底圖請進入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>