mapbox升级后不再开源

@王坤

已于 2023-11-01 09:10:18 修改

阅读量1.3k

点赞数 1

分类专栏： maplibre 文章标签： mapbox

于 2023-09-25 21:45:16 首次发布

本文链接：https://blog.csdn.net/qq_52231465/article/details/133281111

版权

maplibre 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.简介

1.mapbox收费定价及免费版本

参考链接
https://docs.mapbox.com/mapbox-gl-js/guides/pricing/
https://www.geoapify.com/mapbox-gl-new-license-and-6-free-alternatives
Mapbox GL JS > v2.0.0 --收费
建议使用Mapbox GL JS = v1.13.3 --免费的最新版

版本差异：

Mapbox GL JS v1.x.x和v2.x.x之间的一个重要变化是在触发地图加载（map load）时机上的不同。在v1.x.x版本中，地图加载发生在初始化Mapbox GL JS地图对象并请求Mapbox托管的地图瓦片时。而在v2.x.x版本中，地图加载发生在初始化Mapbox GL JS地图对象时，无论是否请求Mapbox托管的地图瓦片。

结论：

Mapbox GL JS的旧版本（v1）是免费开源的。该版本在发布时采用了免费且开放的BSD3许可证。

Mapbox GL JS v2，采用了专有的非免费许可证，即新版本（v2）不再免费。

2.测试代码

<!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.14.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/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 mapStyle = {
            "version": 8,
            "name": "Custom Map",
            "sources": {
                "custom-raster": {
                    "type": "raster",
                    "tiles": ["http://t5.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=6c6245339bf350c75a69c14125d14cb5"],
                    "tileSize": 256
                }
            },
            // "sprite": "https://demotiles.maplibre.org/styles/osm-bright-gl-style/sprite",
            "glyphs": "./fonts/glyphs/{fontstack}/{range}.pbf",
            "layers": [
                {
                    "id": "custom-raster-layer",
                    "type": "raster",
                    "source": "custom-raster"
                }
            ]

        };
	// mapboxgl.accessToken = 'pk.eyJ1IjoiYWRtaW4tbHVjYXMiLCJhIjoiY2xrcm5jcDFnMGJvMjNmbjNrdWh1dDQ3biJ9.gW0WN4QSSl1EZPmgrhUc0Q';
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: mapStyle, // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        zoom: 9 // starting zoom
    });
</script>

</body>
</html>

查看控制台

在这里插入图片描述

查看网络资源加载

在这里插入图片描述

3.低版本就能加载

<!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/v1.3.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v1.3.1/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 mapStyle = {
            "version": 8,
            "name": "Custom Map",
            "sources": {
                "custom-raster": {
                    "type": "raster",
                    "tiles": ["http://t5.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=6c6245339bf350c75a69c14125d14cb5"],
                    "tileSize": 256
                }
            },
            // "sprite": "https://demotiles.maplibre.org/styles/osm-bright-gl-style/sprite",
            "glyphs": "./fonts/glyphs/{fontstack}/{range}.pbf",
            "layers": [
                {
                    "id": "custom-raster-layer",
                    "type": "raster",
                    "source": "custom-raster"
                }
            ]

        };
	// mapboxgl.accessToken = 'pk.eyJ1IjoiYWRtaW4tbHVjYXMiLCJhIjoiY2xrcm5jcDFnMGJvMjNmbjNrdWh1dDQ3biJ9.gW0WN4QSSl1EZPmgrhUc0Q';
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: mapStyle, // style URL
        center: [-74.5, 40], // starting position [lng, lat]
        zoom: 9 // starting zoom
    });
</script>

</body>
</html>