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.组织多条线路径集合，单条线二维数组，多条线使用三维数组
var pointListThree = new Array(); //存放点集合（三维）
var pointList = new Array(); //存放点集合（二维）
var tempProv = data[0].regionCode;
var index = 0;
for(var i = 0 ;i < data.length;i++){
if(tempProv == data[i].regionCode){
pointList[index] = new Array(); //在声明二维
pointList[index][0] = data[i].jd;
pointList[index][1] = data[i].wd;
index++;
}else{
pointListThree.push(pointList);
pointList = []; //清空
tempProv = data[i].regionCode; //重新赋值
index = 0; //重新赋值
pointList[index] = new Array();//在声明二维
pointList[index][0] = data[i].jd;
pointList[index][1] = data[i].wd;
index++;
}
if(i == data.length-1){ //最后一行记录的情况
pointListThree.push(pointList);
}
}
if(pointListThree != null && pointListThree.length > 0){
drawLineListSameTipArcgis(pointListThree,popContent,roadCode,firstLi,firstLiBeforePicture,moveTip,firstOnePoint); //把路线先画了
}5.开始画多条线，画线监听：
//画路线集合，适用于同一个提示信息的画线
function drawLineListSameTipArcgis(pointListThree,popContent,roadCode,firstLi,firstLiBeforePicture,moveTip,firstOnePoint){
require(["esri/graphic","esri/dijit/InfoWindow","dojo/dom-construct","dojo/dom-attr","dojo/dom-style","dojo/dom","esri/geometry/Point"], function(Graphic,InfoWindow,domConstruct,domAttr,domStyle,dom,Point) {
cleanLayer(); //清理图层
var myLine ={geometry:{"paths":pointListThree, //画多条线
"spatialReference":{"wkid":4326}},
"symbol":{"color":[29,157,225],"width":4,"type":"esriSLS","style":"esriSLSSolid"}};
var graphic = new Graphic(myLine);
lineLayer.add(graphic);
lineLayer.on("click",popupLayerClick); //点击提示层的方法
lineLayer.on("mouse-over",showMoveTip); //鼠标放到提示层的方法
lineLayer.on("mouse-out",popupLayerOut); //鼠标移开提示层的方法
lineLayer.on("mouse-move",showMoveTip); //鼠标移动提示层的方法
map.infoWindow.hide(); //隐藏弹出提示框
position(); //定位放大地图
//清理图层
function cleanLayer(){
lineLayer.clear();
}
//定位放大地图
function position(){
var latitude = parseFloat(firstOnePoint[0]);
var longitude = parseFloat(firstOnePoint[1]);
var point = new Point(latitude, longitude, map.spatialReference);
map.setScale(8000000); //缩放比例 （比例尺）
map.centerAndZoom(point); //定位
}
//点击提示层的方法
function popupLayerClick(e){
var currentStackTemp = getCurrentStackByLngLat(e.mapPoint.x,e.mapPoint.y,roadCode);//通过经纬度得到当前桩号
var currentStackPopContent = "<ul style='margin-left:10px;margin-right:10px;font-size:14px;margin-bottom:10px'><li>当前桩号："+stakeTransformation(currentStackTemp)+"</li></ul>";
var popContentTemp = "";
if(!atBeforePictureNow){ //当前不处于前方图像展示
popContentTemp = firstLi+popContent+currentStackPopContent;
}else{
popContentTemp = firstLiBeforePicture+popContent+currentStackPopContent;
clickMapRoadPositionCharts(currentStackTemp,e.mapPoint.x,e.mapPoint.y); //点击地图路线重新定位前方图像底部图表、重新请求前方图像
}
e.stopPropagation();
map.infoWindow.setTitle("基本信息");
map.infoWindow.setContent(popContentTemp);
map.infoWindow.show(e.mapPoint,InfoWindow.ANCHOR_UPPERLEFT); //e.mapPoint为地图点击的点
}
//鼠标移开提示层的方法
function popupLayerOut(e){
map.setMapCursor("default"); //设置地图的小手样式
if(dom.byId("text") != null){ //判断提示框存在则移除提示框
dom.byId("map").removeChild(dom.byId("text"));
}
}
//展示提示的方法
function showMoveTip(e){
map.setMapCursor("pointer");
var scrPt = map.toScreen(e.mapPoint); //e.mapPoint为地图点击的点 ， map.toScreen转成屏幕的坐标
var textDiv = domConstruct.create("div"); //创建一个div
domAttr.set(textDiv,{ //给div设置Attr
"id":"text",
"text":""
});
domStyle.set(textDiv, { //给div设置Style
"left": scrPt.x+10 + "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"
});
var currentStackTemp = getCurrentStackByLngLat(e.mapPoint.x,e.mapPoint.y,roadCode);//通过经纬度得到当前桩号
var popContentTemp = "<div style='font-size:14px;height:20px;margin-left:5px;margin-right:5px'>"+moveTip+" "+stakeTransformation(currentStackTemp)+"</div>";
textDiv.innerHTML = popContentTemp; //给div设置显示内容
if(dom.byId("text") != null){ //判断提示框存在则移除提示框
dom.byId("map").removeChild(dom.byId("text"));
}
dom.byId("map").appendChild(textDiv); //把div添加到地图子节点中
}
});
}