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 alanalyServiceUrl = host + "/iserver/services/spatialanalyst-sample/restjsr/spatialanalyst"; //分析数据的服务

  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.on('click', function (e) { //根据地图鼠标点击事件
       var clickPointTemp = e.lngLat+"";
      var lngLatStrArr = clickPointTemp.split("(");
      var lngLatArr = lngLatStrArr[1].split(",");
      var lng = lngLatArr[0];
      var lat = lngLatArr[1].substring(0,lngLatArr[1].length-1);
           addTagPoint(lng,lat); //添加标记的点
});

（2）添加标记的方法

//添加标记的点（先添加标记，再根据点击坐标和半径查询圆的集合画圆）
function addTagPoint(lng,lat){

map.loadImage('../../dist/img/marker-icon.png', function (error, image) {
            if (error) throw error;
            map.addImage('positionPoint', image);
        });
       var id = "addTag";
   var point = new Array();
   point[0] = lng;
   point[1] = lat;
   var bufferPoint = {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": point
}
};

map.addSource(id, { //添加source
"type": "geojson",
"data": {
"type": "FeatureCollection",
"features": [bufferPoint]
}
});

map.addLayer({
   "id": id,
"type": "symbol",
"source": id,
"layout": {
"icon-image": 'positionPoint',
"icon-size": 0.6,
"icon-offset": [0, -15] //设置偏移量
},
});
getCircleDataDraw(bufferPoint); //得到圆数据和画圆

}

（3）根据半径查询圆的坐标集合画圆

function getCircleDataDraw(bufferPoint){

supermap节点MapboxGl点击地图添加标记，根据设置的半径开始画圆

猜你喜欢