supermap节点mapboxgl自带工具栏及监听重写工具栏方法

Love The Way You Lie 2023-10-18 14:39 120阅读 0赞

（1）定义工具栏，添加到地图指定位置

var draw = new MapboxDraw({
                displayControlsDefault: false,      
                controls: {
                    line_string: true,       //画线图标
                    polygon: true,           //画矩形图标    
                    trash: true                 //清除工具
                }    
            });     
            map.addControl(draw,'top-right');

（2）添加工具栏绘制监听

map.on('draw.create', measureDistance);       //创建画线        
             map.on('draw.delete', removeMsg);                 //点击清除工具

（3）创建画线方法

var serviceUrl = host + "/iserver/services/map-world/rest/maps/World/";        //服务的url 
    
        //监听画线的方法
        function measureDistance(e) {   
            if (!e.features) {
                widgets.alert.showAlert(resources.msg_noDataRedraw, false);
            }   
            var drawLine = e.features[0];                        //包含画线的类型、画线点的金纬度坐标等信息
            var param = new SuperMap.MeasureParameters(drawLine);       
            if(drawLine.geometry.type == "LineString"){ //当前为画线，使用请求距离的方法（measureDistance）
                new mapboxgl.supermap.MeasureService(serviceUrl).measureDistance(param, function (serviceResult) {
                    var distance = serviceResult.result.distance;//获取返回的距离
                    var rounded_distance = Math.round(distance * 100) / 100;        
                    widgets.alert.showAlert("点距="+rounded_distance + resources.msg_m, true);   //此方法为引入的Js文件中定义
                });
            }else if(drawLine.geometry.type == "Polygon"){       //当前为画形状（使用画线的类型来判断），使用请求面积的方法来计算
                new mapboxgl.supermap.MeasureService(serviceUrl).measureArea(param, function (serviceResult) {
                    var area = serviceResult.result.area;        //获取返回的面积        
                    var rounded_area = Math.round(area * 100) / 100;
                    widgets.alert.showAlert("圈中的面积="+rounded_area + resources.msg_sqm, true);
                });         
            }
        }

（4）点击清除工具（tagIdArray为手动添加的地图sourceid和layerid）

function removeMsg() {
            for(var i = 0;i < tagIdArray.length;i++){  
                var existLayer = map.getLayer(tagIdArray[i]);     //（根据id查询）layer存在则移除
                if(existLayer){
                     map.removeLayer(tagIdArray[i]);            
                }    
                var existSource = map.getSource(tagIdArray[i]);//（根据id查询）资源存在则移除
                if(existSource){
                    map.removeSource(tagIdArray[i]);                  
                }   
            }
            tagIdArray = [];       
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，120人围观）

还没有评论，来说两句吧...

相关阅读

相关 supermap节点mapboxgl自带工具栏及监听重写工具栏方法

（1）定义工具栏，添加到地图指定位置 var draw = new MapboxDraw({ displayControlsDefa

Love The Way You Lie/ 2023年10月18日 14:39/ 0 赞/ 121 阅读

相关 supermap节点MapboxGl绘制多条线，添加地标鼠标提示监听

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

快来打我*/ 2023年10月18日 14:38/ 0 赞/ 106 阅读

相关 supermap节点mapboxgl地图放大层级设置

//根据坐标点放大显示 function flyTo(point,zoom){ map.flyTo({

客官°小女子只卖身不卖艺/ 2023年10月18日 14:38/ 0 赞/ 109 阅读

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

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

不念不忘少年蓝@/ 2023年10月18日 14:38/ 0 赞/ 121 阅读

相关 supermap节点MapboxGl绘制一条线，添加线条鼠标提示监听

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

墨蓝/ 2023年10月18日 14:38/ 0 赞/ 110 阅读

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

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

清疚/ 2023年10月18日 14:38/ 0 赞/ 124 阅读

相关 Qt：QToolBar工具栏

1、新建QtGUI应用，基类选择QWidget，取消创建界面 2、widget.cpp include "widget.h" include <QToolB

朱雀/ 2022年05月12日 11:58/ 0 赞/ 215 阅读

相关 layui监听工具栏（操作列表按钮）

<table id="demo" lay-filter="test"></table> <script type="text/html" id="bar

拼搏现实的明天。/ 2022年04月10日 13:53/ 0 赞/ 376 阅读

相关 PS工具栏之【选择工具栏和编辑工具栏】矩形和椭圆的使用技巧

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

- 日理万妓/ 2021年09月19日 02:04/ 0 赞/ 402 阅读

相关 IDEA定制工具栏

以添加git的push按钮为例子进行讲解。一找到Menus Toolbars中对应工具栏的位置先定位到下面位置： ![watermark_type_ZmFuZ3po

深碍√TFBOYSˉ_/ 2021年07月24日 14:41/ 0 赞/ 517 阅读