mapboxGL入门详解

MapBox GL 入门详解

1.基础知识介绍

mapbox GL Js JavaScript地图库；

使用webGL渲染，支持大数据量；

支持矢量切片渲染地图；

与mapbox其他工具兼容、生态系统完善；

自定义的地图样式。

2. 版本介绍

v1.13.1 : 地图库使用无需token，调用mapbox地图需要token；

https://github.com/cgcs2000/mapbox-gl-js; 支持4490坐标系；

v2.3.0: 所有操作均要申请token；

https://github.com/maplibre/maplibre-gl-js 基于v2的社区版本。

v2的新特性: (不支持IE11)

3D terrain

Sky layer

Fog

FreeCamera API

Improved performance

3. 如何使用

第一种方式： CDN

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />

在body中写以下内容：

<div id='map' style='width: 400px; height: 300px;'></div>
<script>mapboxgl.accessToken = 'undefined';var map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/streets-v9'});
</script>

第二种方式：安装包

npm install --save mapbox-gl

在head里面引入：

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css' rel='stylesheet' />

在body中写入内容：

import mapboxgl from 'mapbox-gl';
// or "const mapboxgl = require('mapbox-gl');"mapboxgl.accessToken = 'undefined';
const map = new mapboxgl.Map({container: '<your HTML element id>',style: 'mapbox://styles/mapbox/streets-v9'
})

案例：

<template><div class="container"><div class="map-container" id="map"></div></div>
</template><script>
import mapboxgl from 'mapbox-gl'export default {mounted() {this.init()},methods: {init () {mapboxgl.accessToken ='自己的token';var bounds = [[102.756858, 30.082536], //赋值你想要的界限的西南坐标[105.493897, 31.439161] //赋值你想要的界限的东北坐标]; //为bounds赋值，就是确定你想要的界限的范围var map = new mapboxgl.Map({container: 'map', // 使用地图的容器，或id元素，不能有子元素。style: 'mapbox://styles/mapbox/streets-v9', // 指定使用的mapbox地图，它必须符合MapBox规范的                               JSON对象，或者是指向一个JSON的URL地址。hash: true, // 设置为true，地图的位置（包括缩放层级、中心纬度、中心经度、方位角和倾角）将于页面URl的哈                                 希片段同步。interactive: false, // 设置为false,地图将不会绑定对鼠标、触碰、键盘的监听，因此地图将不会响应任何                                            用户交互。bearingSnap: 7, // 定义何时地图的方位将自动对齐到正北方向的阈值（以度为单位）默认值是7pitchWithRotate: false, // 设为false,将不会在“拖拽进行地图旋转”的同时控制地图的倾斜。clickTolerance: 3, // 用户点击地图时鼠标移动的最大像素范围，点击地图后鼠标在此像素范围内移动则被认为是                                           一次有效的点击。（而不是拖拽）attributionControl: true, // 设置为true， AttributionControl将被添加到地图上。customAttribution: 'hello', // 在AttributionControl中显示的字符串或字符串数组，仅当                                                            attributionControl为true时生效。(String || Array<String>)logoPosition: 'bottom-left', // 默认值是bottom-left，设置mapbox商标在地图上的位置。可选填的值有                             （top-left    top-right   bottom-left     bottom-right）failIfMajorPerformanceCaveat: false, // 默认是false，设置为true，当MapBox GLJs的性能远远低于预                         期的时候，地图创建失败。（换句话说，此时可能用到的是软件渲染器）preserveDrawingBuffer: false, // 默认值是false，设置为true，地图画布可通过                                                    map.getCanvas().toDataURL()输出PNG，出于性能优化考虑，该值默认是false。antialias: false, // 默认值是false，设为true的话，gl渲染环境在创建时将开启多重采样抗锯齿模式                                     （MSAA），这对自定义图层的抗锯齿十分有效。refreshExpiredTiles: true, // 默认值是true，设为false，一旦切片的http cacheControl/expires                                 headers过期，地图将不会重新请求这些切片。scrollZoom: true, // 默认值是true， 将开启“滚动缩放地图”交互模式。如果传值为Object,对象可选参数可以                                   参考 ScrollZoomHandler#enable 。boxZoom: true, // 如果为true，将开启框选缩放地图模式。dragRotate: true, // 设为true，将开启拖拽旋转地图模式。dragPan: true, // 设为true, 开启拖拽移动地图交互模式。keyboard: true, // 设为true，将启用键盘快捷键功能。doubleClickZoom: true, // 默认值是true，将开启双击缩放视图touchZoomRotate: true, // 将开启捏合旋转、缩放的交互模式。trackResize: true, // 默认是true，如果为true，地图将自适应窗口大小变化。center: [0, 0], // 默认是[0, 0] 地图初始化时的地理中心点。zoom: 0, // 默认是0  地图初始化时的层级bearing: 0, // 默认是0  地图初始化时的方位角（旋转角度）pitch: 0, // 默认是0， 地图初始化时的倾角maxBounds: bounds, //赋值最大界限为你之前赋值的界限renderWorldCopies: true, // 默认值是true，设置为true，地图缩小时将渲染多个全局地图的副本。maxTileCacheSize: null, // 设置当前数据源存储在切片缓存中的最大切片数目。如果不设置，将基于当前视角动                                           态计算切片缓存大小。localIdeographFontFamily: 'sans-serif', // 默认值是sans-serif 定义一个用于在本地替代通用‘中日韩                                             越统一表意文字，‘平假名’‘片假名’’和朝鲜文音节字形的css字体系列。transformRequest: null, //地图发送外部URL请求前执行的回调函数。回调函数中可以修改URL、设置请求头或设                                               置跨域请求的相关身份凭证。collectResourceTiming: false, // 默认为false，设置为true，将为GeoJSON和Vector Tile web                                          workers发出的请求搜集资源耗时API信息。该信息将在resourceTiming属性中返回。fadeDuration: 300, // 默认300， 控制标注冲突时，淡入淡出的动画过渡时间，单位为毫秒，该设置将引用与所                                        有的symbol图层。对于运行时的样式变化和栅格切片的淡入淡出，此设置不生效。crossSourceCollisions: true, // 默认为true，来自不同数据源的符号将共同参与到碰撞检测中。如果为                              false，仅在各自的数据源中相互独立的进行符号的碰撞检测。accessToken: null, // 默认是null，地图将用此token替换掉在mapboxgl.accessToken中设置的值。})}}}
</script>
<style lang="scss" scoped>
.container {height: 100%;.map-container {width: 100%;height: 100%;}
}
</style>

mapboxGL入门详解相关推荐

linux 日志按大小切割_nginx入门详解（六）- 日志切割
上一章讲解了nginx的目录加密功能,本章重点介绍nginx的日志切割. 笨办法学linux:nginx入门详解(五)- 目录加密zhuanlan.zhihu.com 在第二章,我们探讨了nginx ...
python怎么安装myqr模块-python二维码操作:对QRCode和MyQR入门详解
python是所有编程语言中模块最丰富的生活中常见的二维码功能在使用python第三方库来生成十分容易三个大矩形是定位图案,用于标记二维码的大小.这三个定位图案有白边,通过这三个矩形就可以标识一个 ...
python语言编程基础-Python语言入门详解！快速学成Python！
原标题:Python语言入门详解!快速学成Python! 很多技能是被职场所需要的,但很可惜... 这些技能在大学中并学习不到. 大学和职场现实存在的横沟对大部分同学来说难以跨越或碰得头破血流... ...
python语言入门m-Python语言入门详解！快速学成Python！
今日主题 "Python语言入门详解" 近两年来,Python语言借着数据科学和人工智能的"东风"成为了最流行的编程语言--街头巷尾人们口口相传.同时,Pyth ...
python语言入门详解-python初级教程：入门详解
python初级教程:入门详解 Crifan Li 目录前言 .................................................................... ...
【GCN】图卷积网络（GCN）入门详解
机器学习算法与自然语言处理出品 @公众号原创专栏作者 Don.hub 单位 | 京东算法工程师学校 | 帝国理工大学图卷积网络(GCN)入门详解什么是GCN GCN 概述模型定义数学推导 G ...
python符号格式化设置区间_Python 数值区间处理_对interval 库的快速入门详解
使用 Python 进行数据处理的时候,常常会遇到判断一个数是否在一个区间内的操作.我们可以使用 if else 进行判断,但是,既然使用了 Python,那我们当然是想找一下有没有现成的轮子可以用. ...
【JSON】JSON入门详解(二)
文章目录 JSON基础文章荐读 JavaScript创建JSON对象 JSON与XML的那些事 JSON与XML的相同之处 JSON与XML的不同之处 AJAX相关JSON与XML JSON与XML的 ...
python怎么安装myqr_python二维码操作:对QRCode和MyQR入门详解
python是所有编程语言中模块最丰富的生活中常见的二维码功能在使用python第三方库来生成十分容易三个大矩形是定位图案,用于标记二维码的大小.这三个定位图案有白边,通过这三个矩形就可以标识一个 ...