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

最新推荐文章于 2025-11-13 00:01:19 发布

原创

最新推荐文章于 2025-11-13 00:01:19 发布 · 5.2k 阅读

15 ·

CC 4.0 BY-SA版权

本文介绍如何使用Mapbox进行地图要素的选择和拾取，包括加载地图、使用空间选择要素，以及通过点击事件和多边形选择来查询并高亮显示特定图层的要素。演示了如何引入必要的JS和CSS文件，定义地图样式，以及实现要素拾取的JavaScript代码。

如何使用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"