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)组织画线需要的坐标集合(二维坐标,data是集合,每个对象包含jd、wd属性)
var pointList = new Array();
for(var i = 0 ;i < data.length;i++){
pointList[i] = new Array(i); //在声明二维
pointList[i][0] = data[i].jd;
pointList[i][1] = data[i].wd;
}
(2)把组织的坐标集合添加到地图中画线,添加之前先根据id清除资源,一个Id不能重复赋值
var existSource = map.getSource("geometryLineSource"); //(根据id查询)资源存在则移除
if(existSource){
map.removeSource("geometryLineSource");
}
var existLayer = map.getLayer("bufferLine"); //(根据id查询)layer存在则移除
if(existLayer){
map.removeLayer("bufferLine");
}
//加载线
var geometryLine = {
"type": "Feature",
"geometry": {
"type": "LineString", //声明是画线
"coordinates": pointList
}
};
map.addSource("geometryLineSource", { //添加source
"type": "geojson",
"data": geometryLine
});
map.addLayer({
"id": "bufferLine",
"type": "line",
"source":"geometryLineSource",
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": "red", //线颜色
"line-width": 4 //线宽度
},
});
(3)定义一个鼠标放上去的提示对象
var popup = new mapboxgl.Popup({
anchor: 'bottom',
closeButton: true
});
(4)添加鼠标监听提示,提示信息上添加跳转链接
map.on('mouseenter', 'bufferLine', function (e) { //根据id绑定鼠标进入事件
var clickPoint = e.lngLat; //获取点击的点坐标
popup.remove();
var clickPointTemp = clickPoint+"";
var lngLatStrArr = clickPointTemp.split("(");
var lngLatArr = lngLatStrArr[1].split(",");
var lng = lngLatArr[0];
var lat = lngLatArr[1].substring(0,lngLatArr[1].length-1);
map.getCanvas().style.cursor = 'pointer'; //地图鼠标画布样式变为手 (crosshair:为 十字架)
popup.setLngLat(clickPoint)
.setHTML("<ul><li>路线编码:</li><li>路线名称:</li><li style='text-align:center'><span style='color:#1D9DE1;cursor: pointer;text-align:center' onclick='intoBeforePicture(1)'>查看前方图像</span></li></ul>")
.addTo(map);
});
/*
map.on('mouseleave', 'bufferLine', function (e) { //根据id绑定鼠标移出事件
map.getCanvas().style.cursor = '';
popup.remove();
});*/
map.on('click', 'bufferLine', function (e) { //根据id绑定鼠标点击事件
var clickPoint = e.lngLat; //获取点击的点坐标
popup.remove();
var clickPointTemp = clickPoint+"";
var lngLatStrArr = clickPointTemp.split("(");
var lngLatArr = lngLatStrArr[1].split(",");
var lng = lngLatArr[0];
var lat = lngLatArr[1].substring(0,lngLatArr[1].length-1);
map.getCanvas().style.cursor = 'pointer'; //地图鼠标画布样式变为手
popup.setLngLat(clickPoint)
.setHTML("<ul><li>路线编码:</li><li>路线名称:</li><li style='text-align:center'><span style='color:#1D9DE1;cursor: pointer;text-align:center' onclick='intoBeforePicture(1)'>查看前方图像</span></li></ul>")
.addTo(map);
});
map.on('mousemove', 'bufferLine', function (e) { //根据id绑定鼠标移动事件
var clickPoint = e.lngLat; //获取点击的点坐标
popup.remove();
var clickPointTemp = clickPoint+"";
var lngLatStrArr = clickPointTemp.split("(");
var lngLatArr = lngLatStrArr[1].split(",");
var lng = lngLatArr[0];
var lat = lngLatArr[1].substring(0,lngLatArr[1].length-1);
map.getCanvas().style.cursor = 'pointer'; //地图鼠标画布样式变为手
var currentStackTemp = getCurrentStackByLngLat(lng,lat,roadCode);//通过经纬度得到当前桩号
popup.setLngLat(clickPoint)
.setHTML("<ul><li>路线编码:</li><li>路线名称:</li><li style='text-align:center'><span style='color:#1D9DE1;cursor: pointer;text-align:center' onclick='intoBeforePicture(1)'>查看前方图像</span></li></ul>")
.addTo(map);
});