Mapbox Gl Js-使用Mapbox方向和切换层

编程问答 2022-11-13

问题描述

我正在尝试使用mapBoxdirection和switchLayer编写代码。

我想实现一个在两点之间绘制路线的功能和一个切换多张地图的功能。

参考URL如下。

https://docs.mapbox.com/jp/mapbox-gl-js/example/setstyle/

https://docs.mapbox.com/jp/mapbox-gl-js/example/mapbox-gl-directions/

因此，基于示例代码实现的代码如下。

<!DOCTYPE html>
    <html>
        <head>
            <Meta charset="utf-8" />
            <title>sample</title>
            <Meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
            <script src="https://api.mapBox.com/mapBox-gl-js/v1.6.1/mapBox-gl.js"></script>
            <link href="https://api.mapBox.com/mapBox-gl-js/v1.6.1/mapBox-gl.css" rel="stylesheet" />
            <style>
                body { margin: 0; padding: 0; }
                #map { position: absolute; top: 0; bottom: 0; width: 100%; }
            </style>
        </head>
        <body>
            <script src="https://api.mapBox.com/mapBox-gl-js/plugins/mapBox-gl-directions/v4.0.2/mapBox-gl-directions.js"></script>
            <link rel="stylesheet" href="https://api.mapBox.com/mapBox-gl-js/plugins/mapBox-gl-directions/v4.0.2/mapBox-gl-directions.css" type="text/css"/>
            <style>
                #menu {
                    position: absolute;
                    background: #fff;
                    padding: 10px;
                    font-family: 'Open Sans',sans-serif;
                }
            </style>

            <div id="map"></div>
            <div id="menu">
                <input id="streets-v11" type="radio" name="rtoggle" value="streets" checked="checked"/>
                <label for="streets">streets</label>
                <input id="light-v10" type="radio" name="rtoggle" value="light" />
                <label for="light">light</label>
                <input id="dark-v10" type="radio" name="rtoggle" value="dark" />
                <label for="dark">dark</label>
            </div>
            <script>
                mapBoxgl.accesstoken = 'pk.eyJ1IjoidGFrYW4iLCJhIjoiY2tjOG41emF3MThsaTJydDY5ajFzM2ZqdCJ9.8mqKF71ZVvEkskX2l5_liA';
                    var map = new mapBoxgl.Map({
                    container: 'map',style: 'mapBox://styles/mapBox/streets-v11',zoom: 13,center: [4.899,52.372]
                });

                var layerList = document.getElementById('menu');
                var inputs = layerList.getElementsByTagName('input');

                function switchLayer(layer) {
                    var layerId = layer.target.id;
                    map.setStyle('mapBox://styles/mapBox/' + layerId);
                }

                for (var i = 0; i < inputs.length; i++) {
                    inputs[i].onclick = switchLayer;
                }

                map.addControl(
                    new MapBoxDirections({
                        accesstoken: mapBoxgl.accesstoken
                    }),'bottom-left'
                );
            </script>
        </body>
    </html>

切换地图时，A点和B点的显示消失了。

即使切换地图，我也希望继续显示点。

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptmapbox-gl-js