vue中,应用mapbox地图——地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language地图英文转中文 accesstokens-访问令牌移动端地图-leaflet
vue中,应用mapbox地图——地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language用于将地图上的英文转中文 & accesstokens-访问令牌 & 移动端地图-leaflet
mapbox-gl英文官网——https://www.mapbox.com/
mapbox中文官网——http://www.mapbox.cn/
mapbox-gl(github地址)——https://github.com/mapbox/mapbox-gl-js
mapbox-gl(包npm地址) ——https://www.npmjs.com/package/mapbox-gl
语言包npm地址——https://www.npmjs.com/package/@mapbox/mapbox-gl-language
SuperMap iClient JavaScript 10i(2021)-开源地图库和可视化库工具——https://iclient.supermap.io/examples/mapboxgl/examples.html#iServer
Leaflet移动端地图api——https://leafletjs.cn/examples/quick-start/
1、基本介绍
Mapbox GL JS 是一个 JavaScript 库,它使用 WebGL,以 vector tiles 和 Mapbox styles 为来源,将它们渲染成互动式地图。它是 Mapbox GL 生态系统的一部分,其中还包括 Mapbox Mobile,它是一个用 C++ 编写的兼容桌面和移动平台的渲染引擎。
Map
对象代表页面上的地图。它暴露了一系列的方法和属性使得用户可以通过编程开发对地图进行修改,并在用户与地图交互时触发一系列的事件。
您可以创建Map
,通过指定的container
和其他可选参数。Mapbox GL JS 会在页面上初始化地图并返回您的Map
对象。
2、安包
# 地图包
npm install mapbox-gl --save
# 地图语言包
npm install --save mapbox-gl @mapbox/mapbox-gl-language
3、引入
src/main.js
import mapBoxGl from 'mapbox-gl'
Vue.prototype.mbgl = mapBoxGl
4、使用
个人中心account
页面,获取accessToken
在使用之前,需要先设置mapboxgl.accessToken。accesstokens(访问令牌)可以使用API提供的示例(如下),也可以注册MapBox账号,在用户信息页查看或者创建令牌。
备用token
// 1
pk.eyJ1IjoibWVuZ3lhbmd6aGkiLCJhIjoiY2t0ZHJrZDM4MGloOTMxcHB6NjF2c25jNyJ9.sLRlgdd1ApbwayeI6TGETw
// 2
pk.eyJ1IjoiZmFuZ2xhbmsiLCJhIjoiY2lpcjc1YzQxMDA5NHZra3NpaDAyODB4eSJ9.z6uZHccXvtyVqA5zmalfGg
// 3
pk.eyJ1IjoibWFvcmV5IiwiYSI6ImNqNWhrenIwcDFvbXUyd3I2bTJxYzZ4em8ifQ.KHZIehQuWW9AsMaGtATdwA
map/index.vue
<!-- 组件页面 -->
<template><div id="map"></div>
</template>
<!-- js文件 -->
<script>
import MapboxLanguage from '@mapbox/mapbox-gl-language';export default {name: "mapbox_test",mounted(){this.init()},methods: {init(){this.mbgl.accessToken = 'pk.eyJ1IjoiZmFuZ2xhbmsiLCJhIjoiY2lpcjc1YzQxMDA5NHZra3NpaDAyODB4eSJ9.z6uZHccXvtyVqA5zmalfGg';this.mbgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js');let map = new this.mbgl.Map({container: 'map',style: 'mapbox://styles/mapbox/streets-v11',// center: [-87.61694, 41.86625],center: [116.3902480,39.9096045],zoom: 15.99,pitch: 40,bearing: 1})map.on('load', function() {map.addLayer({'id': 'room-extrusion','type': 'fill-extrusion','source': {'type': 'geojson','data': 'https://docs.mapbox.com/mapbox-gl-js/assets/indoor-3d-map.geojson'},'paint': {'fill-extrusion-color': ['get', 'color'],'fill-extrusion-height': ['get', 'height'],'fill-extrusion-base': ['get', 'base_height'],'fill-extrusion-opacity': 0.6}})})//中文设置// map.addControl(new MapboxLanguage({defaultLanguage: "zh-Hans"})); // 写法一// 写法二var language = new MapboxLanguage({ defaultLanguage: "zh-Hans" });map.addControl(language);}}}
</script>
<style lang="less" scoped>
body {height: 100%;margin: 0;padding: 0;width: 100%;
}
#map {position: absolute;left: 0;top: 0;text-align: left;width: 100%;height: 100%;
}
</style>
显示效果
vue中,应用mapbox地图——地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language地图英文转中文 accesstokens-访问令牌移动端地图-leaflet相关推荐
- 前端学习(2487):在VUE中使用element-ui的el-select组件时出现该报错
一. 报错场景 在VUE中使用element-ui的el-select组件时出现该报错 [Vue warn]: Missing required prop: "value" 1 二 ...
- Vue中父子及非父子组件之间的通信方法
Vue中父子及非父子组件之间的通信方法 父子组件之间的通信方法 父级->子级通信 (依赖单向数据绑定+props实现) Vue.component('Father', { //注册了含有data ...
- 「后端小伙伴来学前端了」关于Vue中的自定义事件,组件绑定自定义事件实现通信
傍晚的月亮 前言 原本这篇打算写Vue中的那个全局事件总线的原理,但是发现自己少写了这个自定义事件,不讲明白这个自定义事件的操作,不好写全局事件原理,于是就有了这篇文章拉. 一.v-on指令 要讲自定 ...
- 笔记三 vue中封装复用 过滤器 自定义组件 vue中component选项
题外话: npm install -g express-generator npm安装express框架 封装复用 Vue中关于封装复用的内容,属于Vue中的进阶知识,在实战中对开发者的抽象和泛化能力 ...
- Vue 中 props 传值,父组件向子组件传递对象/数组可以直接修改的问题
vue 中父子组件通信最常用的方式是 props 和 $emit,所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行.这 ...
- 「后端小伙伴来学前端了」Vue中Props配合自定义方法实现组件间的通信
校园的云 前言 废话: 上篇文章写了关于Vue 中的 props
- vue中v-if 不重新渲染组件的问题
自遇: tab切换,使用v-if,v-else来对自定义组件进行渲染,渲染的两个组件是一样的,但是数据,样式不同:v-if是根据tab切换的下标判断 结果: 只会渲染第一个,另一个切换后不渲染 原因: ...
- webpack和vue的按需加载组件、console、抓包
1.webpack和vue的按需加载组件 webpack特有的懒加载文件的方式,很大的提升了webpack打包SPA应用的在性能方面. 而从webpack2以后require.ensure已经被imp ...
- Vue 中多个元素、组件的过渡,及列表过渡
多个元素之间过渡动画效果 多元素之间如何实现过渡动画效果呢?看下面代码 .fade-enter, .fade-leave-to{opacity: 0; } .fade-enter-active, .f ...
- vue中使用elmentUI的Upload组件提交文件和后台接收
1.参考此博客,希望有以下知识储备 vue的路由,跨域请求,springboot2.X,html,已经阅读elementUI官网中关于upload组件的详细介绍. 2.废话不多说,直接讲解细节. 前台 ...
最新文章
- vim 中文乱码解决
- pandas.to_csv()中文编码问题
- 搭建IC设计EDA虚拟机服务器,忆往昔--集成门控时钟技术的前世--分离门控时钟技术...
- linux类似360软件,linux下有什么类似鲁大师查看电脑配置的软
- 146. LRU 缓存机制
- 逻辑回归(logistic regression)的本质——极大似然估计
- nagios客户端nrped服务方式启动脚本
- [转] oracle 数据库 SQL plus 连接方法
- 人脸检测(三)--Haar特征原理及实现
- 受限玻尔兹曼机(RBM)学习笔记
- 简易可行Live2D直播应用路线分享
- 华为平板与非华为电脑(Windows系统)连接
- sql 根据身份证号码计算年龄
- linux ftp 测网速,武汉电信使用FTP测试网速
- 微信订阅号简易开发——小白攻略图文版
- 修改linux系统的root用户密码,linux系统下修改root用户密码
- 四种环境下编译nanomsg库
- leetcode hot100------121. 买卖股票的最佳时机--动态规划知识点
- AlertPay网银
- HDMI EDID详细解析——C代码实现