如何使用mapbox选择拾取地图要素

最新推荐文章于 2023-12-04 16:57:32 发布
最新推荐文章于 2023-12-04 16:57:32 发布
阅读量4.5k 收藏 14
点赞数 7
分类专栏： 要素拾取 mapbox-gl 地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sun_falls/article/details/105223095
版权

如何使用mapbox选择拾取地图要素

前言

你好！ 最近在研究地图元素和客户端交互的方法，我将项目中的应用技能分享给大家！这是关于使用mapbox（点、线、多边形）选择或者称作拾取地图界面要素信息的一篇文章！

需要引入的js、css

我们除了最基本的jquery和mapbox之外，还需要引入turf.min.js，这是一个mapbox多边形和点、线选的插件。

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="mapbox-gl-draw.js"></script>
<script type="text/javascript" src="mapbox-gl.min.js"></script>
<script src='turf.min.js'></script>
<link type="text/css" rel="stylesheet" href="mapbox-gl.min.css"/>
<link type="text/css" rel="stylesheet" href="mapbox-gl-draw.css"/>

如何加载地图

页面内容如下，需要三个div；一个存放地图需要的展示信息、一个存放地图控件、一个存放地图。

<body>
    <div id="draw_area" style="color: chocolate; font-weight: bold;"></div>
    <div id="draws"></div>
    <div id='map'></div>
</body>

我们需要定义一个demo.js；用来编写如何加载地图和如何拾取要素，页面上引用它，并在demo.js里先加载地图和地图控件，我们用iclient官网上的地图和要素数据。


var host = window.isLocal ? window.server : "https://iserver.supermap.io";
var drawHandleModel;
var attribution = "我的mapbox要素拾取demo";

var map = new mapboxgl.Map({
    container: 'map', // container id
    style: {
        "version": 8,
        "sources": {
            "vector-tiles": {
                "attribution": attribution,
                "type": "vector",
                "tiles": [host + "/iserver/services/map-beijing/rest/maps/beijingMap/tileFeature.mvt?"+
                "returnAttributes=true&compressTolerance=-1&width=512&height=512&viewBounds={bbox-epsg-3857}"+
                "&expands=0:0_2,132_128,138_64,141_32,143_16,145_8,147_4"
                ]
            },
        },
        "sprite": "https://iclient.supermap.io/web/styles/street/sprite",
        "glyphs": host + "/iserver/services/map-beijing/rest/maps/beijingMap/tileFeature/sdffonts/{fontstack}/{range}.pbf",
        "layers": []
    },
    center: [116.4, 39.9],
    minZoom: 10,
    zoom: 11
});

	map.addControl(new mapboxgl.NavigationControl(), 'top-left');

 	var map = getMap();    

        var draw = new MapboxDraw({
            displayControlsDefault: false,
            controls: {
                point: true,
                line_string: true,
                polygon: true,
                trash: true
            }

        });
        window.Draw = draw;
        map.addControl(draw, "top-right");
        map.on("draw.create", this.updateArea);
        map.on("draw.update", this.updateArea);
        map.on("draw.delete", this.delArea);

然后加载地图要素

map.on('load', function() {

    map.addLayer({
        "id": "background",
        "type": "background",
        "layout": {},
        "paint": {
            "background-color": "#75CFF0"
        }
    });
    map.addLayer({
        "id": "面区界R@北京",
        "type": "fill",
        "source": "vector-tiles",
        "source-layer": "面区界R@北京",
        "paint": {
            "fill-color": "#EFE9E1",
        }
    });
    map.addLayer({
        "id": "界线@北京",
        "type": "line",
        "source": "vector-tiles",
        "source-layer": "界线@北京",
        "paint": {
            "line-color": "hsl(240, 8%, 51%)",
            "line-width": 0.5
        }
    });
    map.addLayer({
        "id": "立交桥绿地R@北京",
        "type": "fill",
        "source": "vector-tiles",
        "source-layer": "立交桥绿地R@北京",
        "paint": {
            "fill-color": "hsl(100, 58%, 76%)",
            "fill-opacity": {
                "base": 1,
                "stops": [
                    [
                        5,
                        0
                    ],
                    [
                        6,
                        0.5
                    ]
                ]
            }
        },
    });
    map.addLayer({
        "id": "绿地R@北京",
        "type": "fill",
        "source": "vector-tiles",
        "source-layer": "绿地R@北京",
        "paint": {
            "fill-color": "hsl(100, 58%, 76%)",
            "fill-opacity": {
                "base": 1,
                "stops": [
                    [
                        5,
                        0
                    ],
                    [
                        6,
                        0.5
                    ]
                ]
            }
        },
    });
    map.addLayer({
        "id": "	双线河R@北京",
        "type": "fill",
        "source": "vector-tiles",
        "source-layer": "双线河R@北京",
        "paint": {
            "fill-color": "hsl(196, 80%, 70%)"
        }
    });
    map.addLayer({
        "id": "湖泊、水库R@北京",
        "type": "fill",
        "source": "vector-tiles",
        "source-layer": "湖泊、水库R@北京",
        "paint": {
            "fill-color": "hsl(196, 80%, 70%)"
        }
    });

    map.addLayer({
        "id": "	四级道路L@北京",
        "type": "line",
        "source": "vector-tiles",
        "source-layer": "四级道路L@北京",
        "paint": {
            "line-width": {
                "base": 1.5,
                "stops": [
                    [
                        11,
                        1
                    ],
                    [
                        18,
                        10
                    ]
                ]
            },
            "line-color": "hsl(0, 0%, 100%)",
        }
    });
});

地图上就是这样的效果
地图效果

如何使用地图空间选择要素

先做地图点击事件

 /**
         *  mapBox 提供强大的地图可视化功能
         * */
        map.on('click', function(e) {
            // 以此点*px范围内的正方形算为点击反应区
            var bbox = [
                [e.point.x - 1, e.point.y - 1],
                [e.point.x + 1, e.point.y + 1]
            ];
            // mapbox 返回查询要素的图层属性
            var features = map.queryRenderedFeatures(bbox, {
                layers: ['湖泊、水库R@北京','一级道路L@北京','绿地R@北京']
            });
            
            // 返回查询图层属性feature合集

            var filter_hp = features.reduce(
                function(memo, feature) {
                    //console.log(feature);
                    if (feature.sourceLayer == '湖泊、水库R@北京') {
                        memo.push(feature.properties.SmID);
                        //alert(feature.properties.NAME);
                    } else {
                        console.log(feature.properties);
                    }
                    return memo;
                },['in', 'SmID']
            );
            //返回符合查询要素集合后设置符合这些图层要素的属性
            //map.setFilter('counties-highlighted-hp', filter_hp);

            var filter_dl1 = features.reduce(
                function(memo, feature) {
                    //console.log(feature);
                    if (feature.sourceLayer == '一级道路L@北京') {
                        memo.push(feature.properties.SmID);
                        alert(feature.properties.道路所属区域 + "——" +feature.properties.道路名称);
                    } else {
                        console.log(feature.properties);
                    }
                    return memo;
                },
                ['in', 'SmID']
            );
            //map.setFilter('counties-highlighted-dl1', filter_dl1);

            var filter_ld = features.reduce(
                function(memo, feature) {
                    //console.log(feature);
                    if (feature.sourceLayer == '绿地R@北京') {
                        memo.push(feature.properties.SmID);
                        //alert(feature.properties.NAME);
                    } else {
                        console.log(feature.properties);
                    }
                    return memo;
                },
                ['in', 'SmID']
            );
            //map.setFilter('counties-highlighted-ld', filter_ld);
            
        });

还记的加载地图时的控件方法吗？我们需要定义控件方法的实现！

定义地图时的控件方法

 		function newArea(){
			//画新区域的方法
        }

        function delArea(){
        	//清除区域时
            var answer = document.getElementById('draw_area');
            answer.innerHTML = '';
        }

        function updateArea(e){
        	//更新区域时
            var data = draw.getAll();
            var answer = document.getElementById('draw_area');
            if (data.features.length > 0) {

                // 计算面积
                var area = turf.area(data);
                // restrict to area to 2 decimal points
                var rounded_area = Math.round(area*100)/100;
                answer.innerHTML = '<p><strong>' + rounded_area + '</strong> ㎡</p>';

                //查询选中要素
                var draw_polygon = turf.bbox(e.features[0]);
                var southWest = [draw_polygon[0], draw_polygon[1]];
                var northEast = [draw_polygon[2], draw_polygon[3]];
        
                var northEastPointPixel = map.project(northEast);
                var southWestPointPixel = map.project(southWest);

                var features = map.queryRenderedFeatures([southWestPointPixel, northEastPointPixel], { layers: ['湖泊、水库R@北京','一级道路L@北京','绿地R@北京'] });
 
                //框选结果
                var filter_hp = features.reduce(
                function(memo, feature) {
                    //console.log(feature);
                    if (feature.sourceLayer == '湖泊、水库R@北京') {
                        memo.push(feature.properties.SmID);
                        //alert(feature.properties.NAME);
                    } else {
                        console.log(feature.properties);
                    }
                    return memo;
                },['in', 'SmID']
            );
            //返回符合查询要素集合后设置符合这些图层要素的属性
            map.setFilter('counties-highlighted-hp', filter_hp);

            var filter_dl1 = features.reduce(
                function(memo, feature) {
                    //console.log(feature);
                    if (feature.sourceLayer == '一级道路L@北京') {
                        memo.push(feature.properties.SmID);
                        //alert(feature.properties.道路所属区域 + "——" +feature.properties.道路名称);
                    } else {
                        console.log(feature.properties);
                    }
                    return memo;
                },
                ['in', 'SmID']
            );
            map.setFilter('counties-highlighted-dl1', filter_dl1);

            var filter_ld = features.reduce(
                function(memo, feature) {
                    //console.log(feature);
                    if (feature.sourceLayer == '绿地R@北京') {
                        memo.push(feature.properties.SmID);
                        //alert(feature.properties.NAME);
                    } else {
                        console.log(feature.properties);
                    }
                    return memo;
                },
                ['in', 'SmID']
            );
            map.setFilter('counties-highlighted-ld', filter_ld);


                // var filter_polygon = features.reduce(function(memo, feature) {

                //     if (! (undefined === turf.intersect(feature, e.features[0]))) {
                //         memo.push(feature.properties.SmID);
                //         //alert(feature.properties.NAME);
                //     }
                //     return memo;
                //     // memo.push(feature.properties.SmID);
                //     // //alert(feature.properties.NAME);
                //     // return memo;
                    
                    
                // }, ['in', 'SmID']);

                // map.setFilter("counties-highlighted-hp", filter_polygon);

            } else {
                answer.innerHTML = '';
                if (e.type !== 'draw.delete') alert("请用绘制工具绘制图形后再试!");
            }
        }

这里我们高亮了选中图层的区域
高亮layer
我们需要定义这些layer

    /**
     * 下面添加选中变色layer
     */

    map.addLayer({
        'id': 'counties-highlighted-hp',
        'type': 'fill',
        'source': 'vector-tiles',
        'source-layer': '湖泊、水库R@北京',
        'paint': {
            'fill-outline-color': '#484896',
            'fill-color': '#6e599f',
            'fill-opacity': 0.75
        },
        'filter': ['in', 'SmID', '']
        }
    ); // Place polygon under these labels.

    map.addLayer({
        'id': 'counties-highlighted-dl1',
        'type': 'fill',
        'source': 'vector-tiles',
        'source-layer': '一级道路L@北京',
        'paint': {
            'fill-outline-color': '#484896',
            'fill-color': '#6e599f',
            'fill-opacity': 0.75
        },
        'filter': ['in', 'SmID', '']
        }
    ); // Place polygon under these labels.
    map.addLayer({
        'id': 'counties-highlighted-ld',
        'type': 'fill',
        'source': 'vector-tiles',
        'source-layer': '绿地R@北京',
        'paint': {
            'fill-outline-color': '#484896',
            'fill-color': '#6e599f',
            'fill-opacity': 0.75
        },
        'filter': ['in', 'SmID', '']
        }
    ); // Place polygon under these labels.

});

最后返回一个提供外部js访问的方法


var getMap = function (){
    if (map) {
        return map;
    }
};

效果

效果
输出信息

demo下载地址

demo下载地址

sun_falls
关注
  • 7
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
mapbox底图下载器
07-15
下载mapbox矢量切片，包括样式文件，生成一个index.html测试页面，测试浏览下载的地图
【MAPBOX基础功能】13、mapbox点击线图层高亮指定的线段
汪同学丶的博客
06-23 612
mapbox点击线图层高亮指定的线段
mapbox实现点选要素
最新发布
Sakura1998gis的博客
12-04 454
mapbox实现点选要素
mapbox_polygon_demo.rar
03-31
最近在研究地图元素和客户端交互的方法，我将项目中的应用技能分享给大家！这是关于使用mapbox（点、线、多边形）选择或者称作拾取地图界面要素信息的demo
Mapbox加载天地图CGCS2000瓦片地图服务
05-06
通过对mapbox GL JS进行改造，使其能够加载天地图CGCS2000瓦片地图服务。
Map点击地图要素获取要素信息
Sakura1998gis的博客
03-12 594
Map点击地图要素获取要素信息
mapbox图形绘画以及polygon信息提取
qq_37558635的博客
06-27 2223
1. 在可视化地图上绘画图形 基于某些功能要求，用户可能希望在可视化地图上绘画不同的polygon来整合和规划不同的地区，因此mapbox官方提供了mapbox-gl-draw来帮助用户对地图进行自定义绘画。今天，我们将介绍如何在vue.js项目中配置绘画区域以及实现提取绘画图形的geojson地理信息 2. 配置绘画区域 首先，基于上篇文章的基础上。我们需要在terminal或者cmd中运行下面的命令，在项目中下载mapbox-gl-draw所需要的module。 npm install mapbox-g
mapbox根据多边形选择点要素
ScapeD的博客
04-09 4185
Mapbox GL JS 对于按空间选择提供了 queryRenderedfeature函数，但是此函数仅支持按点选和标准矩形的框选，不支持按多边形选择。帮助文档中是这样说的： 查询区域的几何图形：描述边界框的单个点或西南和东北点。 因此，想要查询需要借助其他开源库，本文使用Mapbox推荐的turf.js实现 本文实现效果如下： 核心代码： map2.addControl(dra...
042：mapboxGL点击某feature点，使其为中心点
大剑师兰特的GIS世界
10-12 290
本示例的目的是介绍演示如何在vue+mapbox中通过鼠标点击某feature点，让其成为中心点。这里用到了click事件和flyTo的方法。
【MAPBOX基础功能】28、mapbox地图基础工具 -获取当前地图中心点
汪同学丶的博客
06-24 1206
mapbox地图基础工具 -获取当前地图中心点
Antv L7 + mapbox 实现简单地图场景
07-18
Antv L7 + mapbox 实现简单地图场景
mapbox鹰眼地图的二次封装
08-06
mapbox鹰眼地图的二次封装，更方便在vue中使用，使用es6模块化导出
Mapbox Android SDK官方教程（三）——Annotations
不平凡之路
06-05 1979
Annotationsmapbox maps SDK提供了许多方法来标记一个单点、在多个点之间添加线和画多边形。通常情况下，这些要素要不画在图层之上，要不就画在图层本身。后面逐渐介绍如何添加高级要素。Source and layer用数据源和图层是最常用的永久展示数据的方法。这个方案也能提供更多细化的控制：· 代表独立点的图标· 线段· 多边形参考the runtime styling page（...
map-box地图点击图标高亮事件
zx960103的博客
10-05 1060
【代码】map-box地图点击图标高亮事件。
Mapbox 添加弹窗 点击标记点出现弹窗 vue
不同场景下的水平居中
10-08 4102
方法一：字符串拼接弹框内容：（弹框内容样式少的情况下） 效果图： 核心代码： var popup = new mapboxgl.Popup({ offset: 25 }).setHTML(`<div class="makerTop"><h2 class="markerHear" > 综合办一处 </h2></div>' '<div class="markerBody" ><p>设
mapbox点定位动态效果
Sakura1998gis的博客
07-10 420
mapbox点定位动态效果
【MAPBOX基础功能】14、mapbox点击面图层高亮指定的面
汪同学丶的博客
06-23 621
mapbox点击面图层高亮指定的面
mapbox geojson高亮
当然是最帅气的茶茶丸了！哇耶~
03-10 336
【代码】mapbox geojson高亮。
mapbox-gl使用geojson实现三维建筑物效果
热门推荐
sun_falls的博客
06-28 1万+
1 引入mapbox-gl.js 2 vue中初始化地图 import {getJson} from "./geojson/json" async initMap() { let baseurl = APPCONFIG.economicOperat.url; //我这里配置的是supermap 9D发布的地图 let map = new mapboxgl.Map({ c...
使用 Mapbox GL JS 向地图添加自定义标记
07-12
要向Mapbox地图添加自定义标记，您可以使用Mapbox GL JS库中的`Marker`类。以下是一个示例代码片段，展示如何使用自定义图标创建标记并将其添加到地图上： ```javascript // 创建一个自定义图标的HTML元素 var el = document.createElement('div'); el.className = 'custom-marker'; el.style.backgroundImage = 'url(https://example.com/custom-icon.png)'; // 替换为您的自定义图标URL el.style.width = '30px'; el.style.height = '30px'; // 创建一个自定义标记 var marker = new mapboxgl.Marker(el) .setLngLat([lng, lat]) // 设置标记的经纬度坐标 .addTo(map); ``` 在上述代码中，您需要替换`https://example.com/custom-icon.png`为您实际的自定义图标的URL。您还可以根据需要调整`width`和`height`属性来设置图标的大小。 通过创建一个自定义图标的HTML元素，并将其作为参数传递给`Marker`类的构造函数，然后使用`setLngLat`方法设置标记的经纬度坐标，最后使用`addTo`方法将标记添加到地图上，您就可以向Mapbox地图添加自定义标记了。 请注意，您可以根据需要修改自定义图标的样式和属性，以满足您的具体需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sun_falls

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值