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

快来打我* 2023-10-18 14:38 109阅读 0赞

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

2.引入底图，创建map对象，其中container: 'arcgisDiv'为页面中定义的div

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){
    
           var tagRadius = 300;                 //这是半径值，可以在页面中设置输入入口
            var idCircle = "idCircle";
            var geoBufferAnalystParams_Point = {   
                analystName: "buffer",
                param: new SuperMap.GeometryBufferAnalystParameters({
                    sourceGeometry: bufferPoint,  
                    sourceGeometrySRID: 4326,      
                    bufferSetting: new SuperMap.BufferSetting({
                        endType: SuperMap.BufferEndType.ROUND,
                        leftDistance: new SuperMap.BufferDistance({value: tagRadius}),       //距离左边的距离
                        rightDistance: new SuperMap.BufferDistance({value: tagRadius}),     //距离右边的距离
                        radiusUnit: "KILOMETER",                       //单位，KILOMETER（公里）、METER（米）
                        semicircleLineSegment: 100                     //画圆的圆润程度，100为圆
                    })  
                })  
            };   
            
            //批量分析参数
            var paramter = [geoBufferAnalystParams_Point];
            
            //批量分析
            new mapboxgl.supermap.SpatialAnalystService(alanalyServiceUrl).geometrybatchAnalysis(paramter, function (serviceResult) { 
                var queryPolygonGeometry = serviceResult.result[0].resultGeometry;
                map.addSource(idCircle, {     
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": [
                            queryPolygonGeometry
                        ]
                    }
                });
                map.addLayer({
                    "id": idCircle,
                    "type": "fill",
                    "source": idCircle,
                    "paint": {
                        "fill-color": "blue", /* 填充的颜色 */   
                        "fill-opacity": 0.3   /* 透明度 */           
                    },  
                });
            }); 
        }