二.mapbox使用loadImage和addLayer添加图片和文字

最新推荐文章于 2024-05-02 18:12:22 发布

硕王

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量4.7k

点赞数 2

分类专栏：离线地图文章标签： webview javascript html

本文链接：https://blog.csdn.net/abc2222753/article/details/125200194

版权

离线地图专栏收录该内容

2 篇文章 1 订阅

订阅专栏

使用的离线地图中mapbox使用loadImage和addLayer添加图片和文字

  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Display a map on a webpage</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        
        var vectorTileBackgroundLayer = {
            "version": 8,
            "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
            "sources": {
                "raster-tile": {
                    "type": "raster",
                    "tiles": ["http://10.1.10.109/tiandituImgLabel/{z}/{x}/{y}.png"],
                    "tileSize": 256
                }
            },
            "layers": [
                {
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tile",
                    "minzoom": 11,
                    "maxzoom": 18
                }
            ]
        };

        mapboxgl.accessToken = '您的钥匙';
        const map = new mapboxgl.Map({
            container: 'map', 
            style: vectorTileBackgroundLayer,
           
            center: [118.1517713497023, 39.63166152545793], 
            zoom: 11,    
            pitch: 0,  
            bearing: 0, 
            antialias: true, 
            minZoom: 11,
            maxZoom: 17,
        });


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

            map.loadImage('http://10.1.10.109/pic/message.png', (error, image) => {
                map.addImage('yoimage', image, { sdf: true });
            });
            map.addLayer({
                "id": "points",
                "type": "symbol",
                "source": {
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": [{
                            "type": "Feature",
                            "properties": {
                                "MyBuildName": "12啊飒飒的"
                            },
                            "geometry": {
                                "type": "Point",
                                "coordinates": [118.1421332866658, 39.6622710275781]
                            }
                        }]
                    }
                },
                 "layout": {
                    "text-field": "{MyBuildName}",//文本内容来源字段
                    "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],//字体
                    "text-offset": [0, 1.25],//设置图标与图标注相对之间的距离
                    "text-anchor": "top",//标记文本相对于定位点的位置
                    "text-size": 12,//字号
                     "icon-image": "yoimage",
                    "icon-size": 0.5,//图标的大小
                },
            });
        });
    </script>

</body>
</html>

注意要有字体：

"glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf" 要不没有字体，不显示。

硕王

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
4
评论
二.mapbox使用loadImage和addLayer添加图片和文字

使用的离线地图中mapbox使用loadImage和addLayer添加图片和文字注意要有字体： "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf" 要不没有字体，不显示。
复制链接

扫一扫