webgis开发之mapbox（2）

于 2024-02-29 13:23:34 发布
阅读量448 收藏 10
点赞数 7
分类专栏： webgis开发 mapbox 文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67679364/article/details/136368286
版权

 MAPBOX

01、控件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mapbox</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../lib/mapbox.css">
    <script
        src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
    <link rel="stylesheet"
        href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css"
        type="text/css">
    <!-- 汉化 -->
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-language/v1.0.0/mapbox-gl-language.js'></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        #mouse-position {
            position: fixed;
            top: 0;
            left: 50%;
            z-index: 100;
        }
    </style>
</head>

<body>
    <!-- 1、给地图准备一个容器 -->
    <div id="map">
        <div id="mouse-position">
        </div>
    </div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/streets-v12', //地图风格
            center: [114.30, 30.50],  //地图中心坐标  
            zoom: 12,    //缩放比例
        });

        // 全屏控件
        map.addControl(new mapboxgl.FullscreenControl())

        const nav = new mapboxgl.NavigationControl(
            {
                //是否显示指南针按钮，默认为true
                "showCompass": true,
                //是否显示缩放按钮，默认为true
                "showZoom": true
            }
        );
        // 添加导航控件，控件的位置包括'top-left', 'top-right','bottom-left' ,'bottom-right'四种，
        // 默认为'top - right'
        map.addControl(nav, 'top-left');

        map.addControl(new mapboxgl.AttributionControl({
            //是否折叠属性信息
            compact: true,
            //⾃定义属性信息
            customAttribution: ["中地数码", "GIS⾼校论坛"]
        }));

        // 比例尺控件
        const scale = new mapboxgl.ScaleControl({
            unit: 'metric|imperial' //默认为公⾥
        })
        map.addControl(scale);

        // 鼠标移动事件
        map.on('mousemove', function (e) {
            const { lng, lat } = e.lngLat;
            document.getElementById('mouse-position').innerHTML = ` 
            经度:${lng.toFixed(2)},纬度:${lat.toFixed(2)}
            `
        });

        // 搜索控件
        // Add the control to the map.
        map.addControl(
            new MapboxGeocoder({
                accessToken: mapboxgl.accessToken,
                zoom: 4,
                placeholder: '请输⼊地址',
                mapboxgl: mapboxgl,
                reverseGeocode: true
            })
        );

        // 汉化
        map.addControl(new MapboxLanguage({
            defaultLanguage: 'zh-Hans' // 设置默认语⾔
        }))
    </script>
</body>

</html>

02、marker点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mapbox</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../lib/mapbox.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        #marker {
            background-image: url('https://img.gejiba.com/images/db6e7706e2c3dcae834e44b0e888c767.jpg');
            background-size: cover;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- 1、给地图准备一个容器 -->
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/streets-v12', //地图风格
            center: [114.30, 30.50],  //地图中心坐标  
            zoom: 12,    //缩放比例
        });
        //设置位置      //添加到地图
        // const marker = new mapboxgl.Marker()


        // 拖拽的marker点
        // const marker = new mapboxgl.Marker({
        //     draggable: true,
        // }).setLngLat([114.30, 30.50]).addTo(map)
        // marker.on('drag', () => {
        //     console.log(`output->marker`, marker.getLngLat())
        // })

        // 自定义标注
        const element = document.createElement('div')
        element.id = 'marker'
        const marker = new mapboxgl.Marker({
            element: element,
            draggable: true,
        }).setLngLat([114.30, 30.50]).addTo(map)
    </script>
</body>

</html>

03、点击事件添加marker点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mapbox</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../lib/mapbox.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        #marker {
            background-image: url('https://img.gejiba.com/images/db6e7706e2c3dcae834e44b0e888c767.jpg');
            background-size: cover;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <button onclick="delMarker">删除所有marker</button>
    <!-- 1、给地图准备一个容器 -->
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/streets-v12', //地图风格
            center: [114.30, 30.50],  //地图中心坐标  
            zoom: 12,    //缩放比例
        });
        //设置位置      //添加到地图
        // const marker = new mapboxgl.Marker()


        // 拖拽的marker点
        // const marker = new mapboxgl.Marker({
        //     draggable: true,
        // }).setLngLat([114.30, 30.50]).addTo(map)
        // marker.on('drag', () => {
        //     console.log(`output->marker`, marker.getLngLat())
        // })

        // 自定义标注
        // const marker = new mapboxgl.Marker({
        //     element: element,
        //     draggable: true,
        // }).setLngLat([114.30, 30.50]).addTo(map)

        let markerArr = []
        function addMarker(e) {
            createMarker()
            markerArr.forEach(item => {
                item.setLngLat([e.lngLat.lng, e.lngLat.lat]).addTo(map)
            });
        }
        function createMarker() {
            const element = document.createElement('div')
            element.id = 'marker'
            const marker = new mapboxgl.Marker({
                element: element,
                draggable: true,
            })
            markerArr.push(marker)
            console.log(`output->markerArr`,markerArr)
        }
        map.on('click', addMarker)

        // let arr = [] 
        // map.on('click',(e)=>{
        //     const marker = new mapboxgl.Marker().setLngLat([e.lngLat.lng, e.lngLat.lat]).addTo(map)
        // })
    </script>
</body>

</html>

04、添加点要素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mapbox</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../lib/mapbox.css">
    <script src="../lib/turf.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <!-- 1、给地图准备一个容器 -->
    <button onclick="toLog()">查看</button>
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/streets-v12', //地图风格
            center: [114.30, 30.50],  //地图中心坐标  
            zoom: 12,    //缩放比例
        });

        // let data = {
        //     "type": "Feature",
        //     "geometry": {
        //         "type": "Point",
        //         "coordinates": [114.30, 30.50],
        //     }
        // }

        // 利用turf库创建geojson数据
        // let data = turf.point([114.30, 30.50],{name:'wh'})
        // console.log(`output->data`,data)
        
        // 利用turf创建geojson数据集合        
        const data = turf.featureCollection([
            turf.point([114.4, 30.5], { name: 'Location A' }),
            turf.point([114.4, 30.4], { name: 'Location B' }),
            turf.point([114.3, 30.5], { name: 'Location C' })
        ]);
        // 要素----》数据源----》图层----》地图
        map.on('load', () => {
            // 图层添加的形式是堆叠
            map.addLayer({
                id: 'point',    //保证id唯一
                type: 'circle',  //指定类型为圆，点要素类型是圆
                source: {
                    type: 'geojson',
                    data: data
                },
                //绘制参数
                paint: {
                    'circle-opacity': 0.8,
                    "circle-radius": 15,
                    "circle-color": "#ff2d51",
                    "circle-stroke-width": 4,
                    //设置边线颜⾊
                    "circle-stroke-color": '#ffcc33'
                }
            })
        })
        
        function toLog(){
            // console.log(map.getLayer('point'))
            // console.log(`output->map.removeLayer('point')`,map.removeLayer('point'))
            map.removeLayer('point')
        }
    </script>
</body>

</html>

05、添加线要素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mapbox</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../lib/mapbox.css">
    <script src="../lib/turf.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
        button {
            position: absolute;
            top: 2%;
            left: 2%;
            z-index: 2;
        }
    </style>
</head>

<body>
    <!-- 1、给地图准备一个容器 -->
    <button onclick="toLog()">Clear</button>
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/streets-v12', //地图风格
            center: [114.30, 30.50],  //地图中心坐标  
            zoom: 12,    //缩放比例
        });
        
        const data = turf.lineString([[114.3, 30.5],[114.4, 30.2]],name='line')
        // 要素----》数据源----》图层----》地图
        map.on('load', () => {
            // 图层添加的形式是堆叠
            map.addLayer({
                id: 'line',    //保证id唯一
                type: 'line',  //指定类型为线，点要素类型是线
                source: {
                    type: 'geojson',
                    data: data
                },
                //绘制参数
                paint: {
                    "line-width": 4,
                    "line-color": '#ff2d51',
                    "line-opacity":0.6
                }
            })
        })
        
        function toLog(){
            // console.log(map.getLayer('point'))
            // console.log(`output->map.removeLayer('point')`,map.removeLayer('point'))
            map.removeLayer('line')
        }
    </script>
</body>

</html>

06、添加面要素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mapbox</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../lib/mapbox.css">
    <script src="../lib/turf.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <!-- 1、给地图准备一个容器 -->
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/streets-v12', //地图风格
            center: [114.30, 30.50],  //地图中心坐标  
            zoom: 5,    //缩放比例
        });

        // 要素----》数据源----》图层----》地图
        map.on('load', () => {
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/420000_full.json').then(res=>res.json()).then(res=>{
                map.addLayer({
                    id:'polygon',
                    type:'fill',    //多边形为fill
                    source:{
                        type:'geojson',
                        data:res
                    },
                    //绘制参数
                    paint:{
                        'fill-color':'rgb(0,0,255)',
                        'fill-opacity':0.6
                    },
                })
            })
        })
    </script>
</body>

</html>

07、添加标注

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mapbox</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../lib/mapbox.css">
    <script src="../lib/turf.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>
    <!-- 1、给地图准备一个容器 -->
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/streets-v12', //地图风格
            center: [114.30, 30.50],  //地图中心坐标  
            zoom: 12,    //缩放比例
        });

        // let data = {
        //     "type": "Feature",
        //     "geometry": {
        //         "type": "Point",
        //         "coordinates": [114.30, 30.50],
        //     }
        // }

        // 利用turf库创建geojson数据
        // let data = turf.point([114.30, 30.50],{name:'wh'})
        // console.log(`output->data`,data)

        // 利用turf创建geojson数据集合        
        const data = turf.featureCollection([
            turf.point([114.34, 30.52], { name: 'Location A' }),
            turf.point([114.35, 30.49], { name: 'Location B' }),
            turf.point([114.355, 30.51], { name: 'Location C' })
        ]);
        // 要素----》数据源----》图层----》地图
        map.on('load', () => {
            map.loadImage('position.png', (error, image) => {
                map.addImage('location', image)// 加到地图中且取名
                // 图层添加的形式是堆叠
                map.addLayer({
                    id: 'symbol',    //保证id唯一
                    type: 'symbol',  //指定类型为圆，点要素类型是圆
                    source: {
                        type: 'geojson',
                        data: data
                    },
                    //绘制参数
                    layout: {
                        'icon-image': 'location',
                        'text-field': ['get', 'name'], // 显示每个点的 'name' 属性作为文本
                        'icon-size': 0.3,
                        'icon-anchor': 'bottom', // 将图标底部与坐标对齐
                    }
                })
            })
        })


        function toLog() {
            // console.log(map.getLayer('point'))
            // console.log(`output->map.removeLayer('point')`,map.removeLayer('point'))
            map.removeLayer('point')
        }
    </script>
</body>

</html>

08、popup

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mapbox</title>
    <!-- 1、引入mapbox库以及它的样式 -->
    <script src="../lib/mapbox.js"></script>
    <link rel="stylesheet" href="../lib/mapbox.css">
    <script src="../lib/turf.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #map {
            width: 100vw;
            height: 100vh;
        }
        .mapboxgl-popup-content{
            width: 100px;
            height: 100px;
            background-color: #0073ff;
            color: white;
            /* border-radius: 50%; */
        }
    </style>
</head>

<body>
    <!-- 1、给地图准备一个容器 -->
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbmdjaGFvY2hhbyIsImEiOiJjbGU1aDZ2eWUwMXp4M29udmFnNnNyZjBhIn0.2Kd0ZX06ReEdBnZ9XU4XUA';
        // 3、创建地图
        const map = new mapboxgl.Map({
            container: 'map',    //指定地图容器id
            style: 'mapbox://styles/mapbox/streets-v12', //地图风格
            center: [114.30, 30.50],  //地图中心坐标  
            zoom: 12,    //缩放比例
        });

        var data = {
            type: "FeatureCollection",
            features: [
                {
                    type: 'Feature',
                    geometry: {
                        type: "Point",
                        coordinates: [114.30, 30.50]
                    },
                    properties: {
                        id: 1001,
                        name: "武昌"
                    }
                },
                {
                    type: 'Feature',
                    geometry: {
                        type: "Point",
                        coordinates: [114.24, 30.54]
                    },
                    properties: {
                        id: 1002,
                        name: "汉阳"
                    }
                }
            ]
        }

        map.on('load', () => {
            // 图层添加的形式是堆叠
            map.addLayer({
                id: 'city',    //保证id唯一
                type: 'circle',  //指定类型为圆，点要素类型是圆
                source: {
                    type: 'geojson',
                    data: data
                },
                //绘制参数
                paint: {
                    'circle-opacity': 0.8,
                    "circle-radius": 15,
                    "circle-color": "#ff2d51",
                    "circle-stroke-width": 4,
                    //设置边线颜⾊
                    "circle-stroke-color": '#ffcc33'
                }
            })
        })
        

        map.on('click','city',(e)=>{
            // console.log(e.features[0].properties.name);
            const popup = new mapboxgl.Popup().setText(e.features[0].properties.name).setLngLat(e.lngLat).addTo(map)
        })

        // const popup = new mapboxgl.Popup().setText('中心点').setLngLat([114.30, 30.50]).addTo(map)
    </script>
</body>

</html>

 

李佩锦peijin
关注
  • 7
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mapbox api
weixin_35756373的博客
02-10 653
Mapbox API是一个地图开发者工具，可以用来创建、定制和发布地图。它提供了一系列的地图、导航和位置数据API，以满足各种应用程序和网站的地图需求。Mapbox API是基于云计算技术构建的，具有高可用性和可扩展性，可以帮助开发者快速构建功能丰富的地图应用程序。 ...
mapbox-gl-draw API 最全文档 (MapboxDraw)
weixin_43959963的博客
01-04 7080
mapbox-gl-draw API 最全文档 (MapboxDraw)
vue.js项目中配置mapbox可视化地图api
qq_37558635的博客
06-27 1896
1. 本地创建vue.js项目 cmd或者terminal中运行下面的命令开出vue project manager，之后按照所需要配置创建vue.js项目 vue ui 2. 在mapbox官网上申请key 访问mapbox官网，登录或注册账号，之后会得到一个免费的access token key来调用api服务 3. 项目中安装mapbox 使用Intellij IDEA或其他IDE打开我们之前创建好的vue.js项目，之后在terminal中输入下面的命令在项目中配置mapbox module
Mapbox Api
weixin_42112342的博客
04-18 579
mapbox
页面2，类似安居客-mapbox自定义marker标记点和标签实现地图找房
u012612234的博客
06-29 1109
将返回的房源信息全部显示在地图上，自定义标记点图标，并显示每个房源的价格，点击标记点时切换房源信息，在下方以卡片形式显示房源图文信息
Antv L7 + mapbox 实现简单地图场景
07-18
在构建Web GIS应用时，Antv L7与Mapbox的结合使用可以创建出丰富的地图场景。...同时，这也是一次提升WebGIS开发技能的好机会，可以帮助开发者更好地理解和掌握地图渲染、数据绑定以及地图交互设计。
webgis开发Sample_2
12-10
在"webgis开发Sample_2"这个压缩包中，我们可以推测这是一份针对WebGIS开发的实例代码，包含了完整的源码，这对于开发者来说是一个很好的学习和实践资源。以下将详细解析WebGIS开发中的关键知识点： 1. **GIS基础**...
webgis.rar_fliesgkc_webGIS地震_webgis_webgis框架开发_分布地图
09-20
在“webgis.rar_fliesgkc_webGIS地震_webgis_webgis框架开发_分布地图”这个压缩包中，我们可以看到与WebGIS开发相关的资源，特别是用于展示地震点分布的框架。 首先，我们要理解WebGIS的核心概念。它结合了Web技术...
WebGIS定制开发.zip
最新发布
06-19
现代WebGIS常采用React、Vue或Angular等前端框架，配合Mapbox GL JS或D3.js进行地图展示和交互设计。 4. **后端技术**：处理业务逻辑和数据操作，常使用Java、Python、Node.js等编程语言，搭配Spring Boot、Django...
开源架构Webgis解决方案开发指南视频教程
12-03
本教程涵盖了前端开发、后端服务、数据库管理等多个领域，是学习WebGIS开发的宝贵资料。 【WebGIS基础知识】 1. 地理信息系统（GIS）概述：了解GIS的基本概念、功能和应用领域，包括空间数据的获取、存储、处理、...
【MAPBOX基础功能】15、mapbox地图事件：点击、移入、移出、解绑
汪同学丶的博客
06-23 3493
mapbox地图事件：点击、移入、移出、解绑
MapboxDraw API（建议用谷歌浏览器翻译为中文）
莫问前程F1的博客
06-04 1838
API 参考 使用绘图 ```js // 创建一个 Mapbox GL JS 地图var map = new Map ( mapOptions ) ; // 创建一个 Draw 控件var draw = new MapboxDraw ( drawOptions ) ; // 将 Draw 控件添加到您的地图map 。addControl （绘制）；`` 只画出Mapbox GL JS地图加载之后的作品，所以你必须只绘制互动后地图的’负荷’事件： ```js地图。on(‘load’,function(){
mapbox使用
qq_43159578的博客
07-02 2110
一、实例化化地图https://www.mapbox.com/mapbox-gl-js/example/simple-map/ <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.js'></script> <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.43.0/mapbox-gl.css' rel='style.
map-box地图点击图标高亮事件
zx960103的博客
10-05 1097
【代码】map-box地图点击图标高亮事件。
mapbox api Android,mapbox-android
weixin_34369597的博客
05-28 465
如何使用mapbox方向api通过多个坐标绘制路线，以及如何在方向api调用时传递航路点列表。 旧版本已弃用，现在我无法通过路标列表，并且我也检查了文档，但是没有任何帮助，请告诉我。代码：enter code here@Overridepublic void onMapReady(@NonNull MapboxMap mapboxMap) {mapboxMap.setStyle(Style.MA...
Mapbox 移除弹窗、监听弹窗打开、关闭事件、去除Mapbox的logo
不同场景下的水平居中
10-18 6788
mapbox 一些特殊用法
Vue Mapbox-GL 在地图中增加图标、线条、标记点击弹窗、地图平移
weixin_49032614的博客
07-01 5385
最近正在搞Mapbox-GL地图的一系列东西，按照公司的需求，要做成离线地图（点击这里），然后要在地图的基础上进行增加图标标记，线条连接、弹窗等等需求。ok废话不多，往下看。如果还没有安装mapbox-gl的小伙伴请先看一下上篇的离线地图的文章，这里不再重复写安装步骤了，直接上代码： 官网也有示例： Add an icon to the map | Mapbox GL JS | MapboxAdd an icon to the map from an external URL and use it in
MapBox采用marker方式加载图标图层（解决symbol图标丢失问题）
lz5211314121的博客
03-01 1746
也就是点要素已经添加在地图上了，但是点要素对应的图片还没请求回来，mapbox在这方面的处理是请求不回来就不请求了，然后给你抛出一个监听，叫做：styleimagemissing，然而我发现在这个监听里面写代码显得尤为费劲，即使你在这个监听里再次请求没请求成功的图片，也不会再次触发地图渲染，必须调用map.repaint()。2.图层的删除问题。我们可以预先设定一个数组。这样的话marker对象就会存储在这个数组中，然后删除的时候遍历这个数组里的marker，调用marker自身的remove方法。
百度地图调用加载显示Marker，并添加点击事件
sophieLV1993的博客
12-10 2696
百度地图调用加载显示Marker，并添加点击事件 注册百度开发者账号，申请应用AK 百度地图开发平台官网 点击右上角控制台，选择创建应用 创建应用,勾选浏览器端，白名单填写* 注：如上线更改为公网IP，如浏览器端显示调用选择浏览器端，如服务端调用数据接口开发则选择服务端，按需创建即可。此处为浏览器端加载显示地图，故选择浏览器端 点击确认，获取AK 返回控制台-我的应用即可查看...
webgis开发框架
07-28
有很多流行的webgis开发框架可供选择，以下是其中一些常见的： 1. Leaflet：一个轻量级、灵活的开源JavaScript库，用于在Web上创建交互式地图。它支持各种地图图层和功能，易于使用和定制。 2. OpenLayers：一个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值