supermap节点MapboxGl绘制单个地标，添加地标鼠标提示监听

1.页面中引入需要的js文件(js文件中又引入其他js文件，需要的所有js文件见之前的博客：https://mp.csdn.net/postedit/87778048）

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）先给地图添加图标

   map.loadImage('../../dist/img/marker-icon.png', function (error, image) {
   if (error) throw error;
   map.addImage('positionPoint', image);
   });

（2）组织图表显示的坐标（data为一个包含jd、wd的对象）
   var point = new Array();
   point[0] = data.jd;
   point[1] = data.wd;
var pointGeometryFetures = new Array();
pointGeometryFetures.push({
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": point,
}
});

（3）定义一个鼠标放上去的提示对象

var popupNoClose = new mapboxgl.Popup({
anchor: 'bottom',
closeButton: false //false不包含关闭按钮，true带有关闭按钮
});
（4）添加地标的鼠标监听事件

map.on('mouseenter', "PointLayer", function (e) { //根据id绑定鼠标进入事件（PointLayer对应添加layui的id）
   var clickPoint = e.lngLat; //获取点击的点坐标
   popupNoClose.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'; //地图鼠标画布样式变为手
   popupNoClose.setLngLat(clickPoint)
.setHTML("<ul><li>名称：</li><li>路线编码：</li></ul>")
.addTo(map);
});

map.on('mouseleave', "PointLayer", function (e) { //根据id绑定鼠标移出事件
   map.getCanvas().style.cursor = '';
   popupNoClose.remove();
});

map.on('click', "PointLayer", function (e) { //根据id绑定鼠标点击事件
   var clickPoint = e.lngLat; //获取点击的点坐标
   popupNoClose.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'; //地图鼠标画布样式变为手
   popupNoClose.setLngLat(clickPoint)
.setHTML("<ul><li>名称：</li><li>路线编码：</li></ul>")
.addTo(map);
});

map.on('mousemove', layerId, function (e) { //根据id绑定鼠标移动事件
   var clickPoint = e.lngLat; //获取点击的点坐标
   popupNoClose.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'; //地图鼠标画布样式变为手
   popupNoClose.setLngLat(clickPoint)
.setHTML("<ul><li>名称：</li><li>路线编码：</li></ul>")
.addTo(map);
});

supermap节点MapboxGl绘制单个地标，添加地标鼠标提示监听

猜你喜欢