一、引用gis的css樣式和js文件css
@*gis的css*@
<link href="http://11.101.9.53/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" />
<link href="http://11.101.9.53/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css" rel="stylesheet" />
@*gis的js*@
<script src="http://11.101.9.53/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/init.js"></script>
<script src="/Static/js/gis.js"></script>api
二、服務器
var GISSERVERURL = "http://11.101.9.53:6080/";// 定義地圖的服務器地址 var map;// 定義地圖容器 var locationPoint;// 定義定位地圖的方法 // 加載地圖引用 require([ "esri/SpatialReference", "esri/arcgis/utils", "esri/dijit/Print", "esri/tasks/PrintTemplate", "esri/config", "dojo/_base/array", "esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/GraphicsLayer", "esri/dijit/HomeButton", "esri/toolbars/draw", "esri/toolbars/edit", "esri/graphic", "esri/symbols/PictureMarkerSymbol", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/dijit/Scalebar", "esri/geometry/Extent", "esri/geometry/Geometry", "esri/geometry/Point", "esri/layers/FeatureLayer", "esri/layers/GraphicsLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/renderers/ClassBreaksRenderer", "esri/dijit/Popup", "esri/dijit/PopupTemplate", "esri/dijit/InfoWindow", "esri/tasks/QueryTask", "esri/tasks/query", "dijit/Menu", "dijit/MenuItem", "dijit/MenuSeparator", "dojo/_base/connect", "dojo/_base/event", "dojo/dom", "dojo/parser", "dojo/on", "dojo/_base/Color", //"agsjs/dijit/TOC", "dojo/fx", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function ( SpatialReference, arcgisUtils, Print, PrintTemplate, esriConfig, arrayUtils, Map, ArcGISTiledMapServiceLayer, GraphicsLayer, HomeButton, Draw, Edit, Graphic, PictureMarkerSymbol, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, Scalebar, Extent, Geometry, Point, FeatureLayer, GraphicsLayer, ArcGISDynamicMapServiceLayer, ClassBreaksRenderer, Popup, PopupTemplate, InfoWindow, QueryTask, Query, Menu, MenuItem, MenuSeparator, connect, event, dom, parser, on, color ) { // 初始化地圖容器 map = new Map("dituContent", { logo: false, slider: true, aotoResize: true }); // 初始化地圖 var AdministrativeMapUrl = GISSERVERURL + "arcgis/rest/services/ThematicMaps/AdministrativeMap/MapServer"; var AdministrativeMap = new ArcGISDynamicMapServiceLayer(AdministrativeMapUrl); // 地圖容器加載地圖 map.addLayer(AdministrativeMap); var areaExtentInit = new Extent({ "xmin": 496842.59900993377, "ymin": 4545585.342776724, "xmax": 540778.3368816553, "ymax": 4569334.390274952, "spatialReference": { "wkid": 2387 } }); map.setExtent(areaExtentInit); map.on("load", function () { // 地圖定位事件。 locationPoint = function (x, y) { // 動態圖定義的顯示範圍 var areaExtentInit = new Extent({ "xmin": 516564.5131023098, "ymin": 4554743.569218228, "xmax": 517937.5049108011, "ymax": 4555485.726952547, "spatialReference": { "wkid": 2387 } }); map.setExtent(areaExtentInit); // 定義顯示的水滴圖標 var markerSymbol = new SimpleMarkerSymbol(); markerSymbol.setPath("M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z"); markerSymbol.setColor(new color([240, 3, 15, 1])); //定位點 var point = new Point(x, y, new SpatialReference({ wkid: 2387 })); map.centerAt(point); //在地圖上顯示水點圖標並定位 var gra = new Graphic(point, markerSymbol); map.graphics.add(gra); }; }); });