在前面的各项安装配置完成后，开始进行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"><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: "/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("/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 eventsmap.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 coordinatesdom.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>
ArcGIS API For Javascript之地图基本加载与显示 地图切换 缩放 定位 比例尺 鹰眼图 坐标显示 查询搜索功能实现
