在前面的各项安装配置完成后，开始进行ArcGIS API for Javascript网页地图制作。
首先利用Html+Javascript前端编程实现底层地图加载显示，地图切换、缩放、定位、比例尺、鹰眼图、坐标显示、查询搜索功能实现。
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>final Map</title>
<link rel="stylesheet" href="http://localhost/arcgis_js_v314_api/arcgis_js_api/library/3.14/3.14/esri/css/esri.css" target="_blank" rel="external nofollow" >
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
#BasemapToggle {
position: absolute;
right: 20px;
top: 20px;
z-index: 50;
}
#HomeButton {
left: 25px;
position: absolute;
top: 93px;
z-index: 50;
}
#LocateButton {
left: 25px;
position: absolute;
top: 130px;
z-index: 50;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 25px;
left: 75px;
}
</style>
<script src="http://localhost/arcgis_js_v314_api/arcgis_js_api/library/3.14/3.14/init.js"></script>
<script>
var map, mapCenter, selectionToolbar, featureLayer;
var visible = [], setLayerVisibility;;
require([
"esri/basemaps",
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/geometry/Point",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/tasks/query",
"esri/toolbars/draw",
"esri/graphic",
"esri/dijit/Scalebar",
"esri/dijit/HomeButton",
"esri/dijit/LocateButton",
"esri/dijit/BasemapToggle",
"esri/dijit/OverviewMap",
"esri/dijit/Search",
"esri/geometry/webMercatorUtils",
"dojo/dom",
"dojo/on",
"dojo/_base/Color",
"dojox/charting/Chart2D",
"dojo/domReady!"],
function (
esriBasemaps,
Map,
Tiled,
FeatureLayer,
GraphicsLayer,
Point,
SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol,
Query,
Draw,
Graphic,
Scalebar,
HomeButton,
LocateButton,
BasemapToggle,
OverviewMap,
Search,
webMercatorUtils,
dom,
on,
Color,
Chart2D,
domConstruct) {
esriBasemaps.delorme = {
baseMapLayers: [
//中国矢量地图服务
{ url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer" }
],
//缩略图
thumbnailUrl: "shiliang.jpg",
title: "矢量图"
};
//初始化地图
map = new esri.Map("map", { basemap: "delorme", logo: false, });
//map = new Map("map", {logo:false,slider: true});
//var tiled = new Tiled("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");
//map.addLayer(tiled,0);
var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/MyMapService/MapServer");
map.addLayer(dynamicMapServiceLayer, 1);
var chartLayer = new GraphicsLayer({ "id": "chartLayer" });
map.addLayer(chartLayer, 2);
mapCenter = new Point(103.847, 36.0473, map.spatialReference);
map.centerAndZoom(mapCenter, 4);
/*************************************************************************************/
//卫星底图
var toggle = new BasemapToggle({
map: map,
basemap: "satellite"
}, "BasemapToggle");
toggle.startup();
//返回主视图
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
//定位
var geoLocate = new LocateButton({
map: map
}, "LocateButton");
geoLocate.startup();
//鹰眼
var overviewMapDijit = new OverviewMap({
map: map,
expandFactor: 2,
attachTo: "bottom-left",
visible: true
});
overviewMapDijit.startup();
//比例尺
var scalebar = new esri.dijit.Scalebar({
map: map,//地图对象
attachTo: "bottom-right",//控件的位置，右下角
scalebarStyle: "ruler",//line 比例尺样式类型
scalebarUnit: "metric"//显示地图的单位，这里是km
});
//搜索
var search = new Search({
map: map
}, "search");
search.startup();
//显示地图坐标
map.on("load", function () {
//after map loads, connect to listen to mouse move & drag events
map.on("mouse-move", showCoordinates);
map.on("mouse-drag", showCoordinates);
});
function showCoordinates(evt) {
//the map is in web mercator but display coordinates in geographic (lat, long)
var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
//display mouse coordinates
dom.byId("info").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3);
}
<body>
<div id="map">
<!-- 返回初始化地图按钮-->
<div id="HomeButton"></div>
<!-- Html5定位按钮-->
<div id="LocateButton"></div>
<!-- 切换底图-->
<div id="BasemapToggle"></div>
<!-- 搜索栏-->
<div id="search"></div>
<!-- 坐标-->
<span id="info" style="position:absolute; left:750px; bottom:5px; color:#000; z-index:50;"></span>
<button id="selectFieldsButton">选框查询</button>
<button id="clearSelectionButton" data-dojo-type="dijit/form/Button">清除选择</button><br>
<div id="toc" style="position: absolute; left: 10px; bottom: 20px; border: 1px solid #9c9c9c; background: #fff; width: 100px; height: auto; z-index: 99;padding: 10px;"></div>
</div>
</body>
</html>
![图片下载 图片放大[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)