1.引入需要的css、js文件，github地址：https://github.com/zhangliqingyun/arcgis-javascript/tree/master/arcgis/3.29
<link rel="stylesheet" th:href="@{/dist/arcgis/3.29/css/esri.css}"/>
<link rel="stylesheet" th:href="@{/dist/arcgis/3.29/css/tundra.css}"/>
<script th:src="@{/dist/arcgis/3.29/js/init.js}"></script> 2.页面定义div：
<!-- 底图展示的div开始 -->
<div id='map' style="width:100%;height:100%;display:block;position: absolute;"></div>
<!-- 底图展示的div结束 --> 3.加载地图连接：
var map = null; //共用地图定义
var pointLayer = null; //单点图层
var aimedatLayer = null; //瞄准点图层
var pointListLayer = null; //多点图层
var lineLayer = null; //单线图层
var lineListLayer = null; //多线图层
var pictureMarkerSymbol = null; //图标marker
var aimedatMarkerSymbol = null; //瞄准图标marker
var simpleLineSymbol = null; //画线marker
var url = "http://xxx.xx.xx.xxx:6080/arcgis/rest/services/CMAPDT/MapServer"; //底图的链接地址
//加载超图底图--超图
function loadSupermapBaseMap(){
require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer","esri/layers/GraphicsLayer","esri/symbols/PictureMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color","dojo/dom-construct", "esri/dijit/InfoWindow"
], function(Map,ArcGISTiledMapServiceLayer,GraphicsLayer,PictureMarkerSymbol,SimpleLineSymbol,Color,domConstruct,InfoWindow) {
//var infoWindow = new InfoWindow({}, domConstruct.create("div"));
//infoWindow.startup();
map = new Map("map", {center: [105.85, 36.79],zoom: 1}); //创建地图、指明中心点、放大程度值设置
var tiledLayer = new ArcGISTiledMapServiceLayer(url); //根据图层链接创建图层
map.addLayer(tiledLayer); //图层添加到地图中
pointLayer = new GraphicsLayer({"id":"pointLayer"});
aimedatLayer = new GraphicsLayer({"id":"aimedatLayer"});
pointListLayer = new GraphicsLayer({"id":"apointListLayer"});
lineLayer = new GraphicsLayer({"id":"lineLayer"});
lineListLayer = new GraphicsLayer({"id":"lineListLayer"});
map.addLayer(pointLayer, 2);
map.addLayer(aimedatLayer, 2);
map.addLayer(pointListLayer, 2);
map.addLayer(lineLayer, 2);
map.addLayer(lineListLayer, 2);
pictureMarkerSymbol = new PictureMarkerSymbol({"url":"/dist/img/marker-icon.png","height":25,"width":20,"xoffset":0,"yoffset":12});
aimedatMarkerSymbol = new PictureMarkerSymbol("/dist/img/aimedat.png", 45, 45);
});
}4.画点的方法：
//画点的方法
function drawPointSupermap(data,type,popContent,pointPicture,moveTip){
require(["esri/geometry/Point","esri/SpatialReference","esri/graphic","esri/dijit/InfoWindow","dojo/dom-construct","dojo/dom-attr","dojo/dom-style","dojo/dom"
], function(Point,SpatialReference,Graphic, InfoWindow,domConstruct,domAttr,domStyle,dom) {
var point = new Point(data.jd, data.wd, new SpatialReference({wkid:4326}));
var graphic = new Graphic(point, pictureMarkerSymbol);
cleanLayer(); //清理图层
pointLayer.add(graphic);
pointLayer.on("click",popupLayerClick); //点击提示层的方法
pointLayer.on("mouse-over",popupLayerOver);//鼠标放到提示层的方法
pointLayer.on("mouse-out",popupLayerOut); //鼠标移开提示层的方法
map.infoWindow.hide(); //隐藏弹出提示框
position(); //定位放大地图
//清理图层
function cleanLayer(){
pointLayer.clear(); //单点图层
}
//定位放大地图
function position(){
var latitude = parseFloat(data.jd);
var longitude = parseFloat(data.wd);
var point = new Point(latitude, longitude, map.spatialReference);
map.setScale(5000000); //缩放比例 （比例尺）
map.centerAndZoom(point); //定位
}
//点击提示层的方法
function popupLayerClick(e){
e.stopPropagation();
var graphic = e.graphic;
map.infoWindow.setTitle("基本信息");
map.infoWindow.setContent(popContent);
map.infoWindow.show(e.mapPoint,InfoWindow.ANCHOR_UPPERLEFT);
}
//鼠标放到提示层的方法
function popupLayerOver(e){
map.setMapCursor("pointer");
var scrPt = map.toScreen(e.graphic.geometry);
var textDiv = domConstruct.create("div");
domAttr.set(textDiv,{
"id":"text",
"text":""
});
domStyle.set(textDiv, {
"left": scrPt.x+15 + "px",
"top": scrPt.y-10 + "px",
"position": "absolute",
"z-index":99,
"background":"#fcffd1",
"font-size":"10px",
"border":"1px solid #0096ff",
"padding": "0.1em 0.3em 0.1em",
"border-radius": "3px",
"box-shadow": "0 0 0.75em #777777"
});
textDiv.innerHTML = moveTip;
if(dom.byId("text") != null){ //判断提示框存在则移除提示框
dom.byId("map").removeChild(dom.byId("text"));
}
dom.byId("map").appendChild(textDiv);
}
//鼠标移开提示层的方法
function popupLayerOut(e){
map.setMapCursor("default");
if(dom.byId("text") != null){ //判断提示框存在则移除提示框
dom.byId("map").removeChild(dom.byId("text"));
}
}
});
}