1.页面中引入需要的js文件(js文件中又引入其他js文件,需要的所有js文件见之前的博客:https://mp.csdn.net/postedit/87778048)
<script type="text/javascript" include="bootstrap,jquery,widgets.alert" src="../../dist/js/include-web.js"></script>
<script type="text/javascript" include="draw,compare" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
2.引入底图,创建map对象,其中container: 'arcgisDiv'为页面中定义的div
var host = window.isLocal ? window.server : "http://support.supermap.com.cn:8090";
var mapUrl = host+"/iserver/services/map-china400/rest/maps/China_4326/zxyTileImage.png?z={z}&x={x}&y={y}";//加载底图的url
var map = new mapboxgl.Map({
container: 'arcgisDiv',
style: {
"version": 8,
"sources": {
"raster-tiles": {
"type": "raster",
"tiles": [mapUrl],
"tileSize": 256,
},
},
"layers": [{
"id": "before",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 22
}],
},
center: [105.85, 36.79],
zoom: 3.8
});
3.添加比例尺、导航、绘画工具
var navigationControl = new mapboxgl.NavigationControl();
var scaleControl = new mapboxgl.ScaleControl();
var draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
line_string: true,
polygon: true,
trash: true
}
});
map.addControl(navigationControl, 'top-left'); //导航条
map.addControl(scaleControl);
map.addControl(draw, "top-right");
4.画多条线,添加鼠标提示监听
(1)定义鼠标放上去出现的提示对象、自定义地标对象
var popup= new mapboxgl.Popup({
anchor: 'bottom',
closeButton: true
});
(2)组织多条线集合(data每条记录包含起点和终点坐标,每条线路包含提示)
var optimalData = new Array();
for(var i = 0;i < data.length;i++){
var capital = getIndicatorsPointTip(data[i].startStake); //得到提示
var pointList = getPointListByGps(data[i].gps) //通过gps值组织成画线需要的起始点坐标
optimalData.push({
"type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": pointList
},
"properties": {POP: 1, CAPITAL: capital,STACK:data[i].startStake}
});
}
function getIndicatorsPointTip(startStake){
return "<ul><li>桩号:"+startStake+"</li></ul>";
}
//通过gps值组织成画线需要的起始点坐标
function getPointListByGps(gps){
var gpsArr = gps.split(",");
var pointList = new Array();
if(gpsArr.length == 4){
pointList[0] = new Array(0); //在声明二维
pointList[0][0] = gpsArr[0];
pointList[0][1] = gpsArr[1];
pointList[1] = new Array(1); //在声明二维
pointList[1][0] = gpsArr[2];
pointList[1][1] = gpsArr[3];
}
return pointList;
}
(3)把路线数据添加到地图上展示
map.addSource("sourceId", { //添加source
"type": "geojson",
"data": {
"type": "FeatureCollection", //申明是一个数据集合
"features": optimalData
}
});
map.addLayer({
"id": "layerId",
"type": "line",
"source":"sourceId",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": color,
"line-width": 6
},
});
(4)添加路线鼠标监听提示
map.on('mouseenter',"layerId", function (e) { //根据id绑定鼠标进入事件
popup.remove();
map.getCanvas().style.cursor = 'pointer';
var htmlContent = e.features[0].properties.CAPITAL+"<ul><li style='text-align:center'><span style='color:#1D9DE1;cursor: pointer;text-align:center' onclick='intoBeforePictureFromIndicators(\""+1+"\")'>查看前方图像</span></li></ul>";
popup.setLngLat(e.lngLat).setHTML(htmlContent).addTo(map);
});
map.on('mousemove', "layerId", function (e) {
popup.remove();
map.getCanvas().style.cursor = 'pointer';
var htmlContent = e.features[0].properties.CAPITAL+"<ul><li style='text-align:center'><span style='color:#1D9DE1;cursor: pointer;text-align:center' onclick='intoBeforePictureFromIndicators(\""+1+"\")'>查看前方图像</span></li></ul>";
popup.setLngLat(e.lngLat).setHTML(htmlContent).addTo(map);
});
/*
map.on('mouseout', "layerId", function () {
map.getCanvas().style.cursor = '';
popup.remove();
})
*/
map.on('click', "layerId", function (e) { //根据id绑定鼠标点击事件
popup.remove();
map.getCanvas().style.cursor = 'pointer';
var htmlContent = e.features[0].properties.CAPITAL+"<ul><li style='text-align:center'><span style='color:#1D9DE1;cursor: pointer;text-align:center' onclick='intoBeforePictureFromIndicators(\""+1+"\")'>查看前方图像</span></li></ul>";
popup.setLngLat(e.lngLat).setHTML(htmlContent).addTo(map);
});