Vuejs 2与Mapbox-GL-JS交互的组件

最新推荐文章于 2023-07-04 17:09:03 发布
最新推荐文章于 2023-07-04 17:09:03 发布
阅读量209 收藏
点赞数
文章标签： java js python vue html ViewUI
原文链接：https://vuejsexamples.com/vuejs-2-components-for-interacting-with-mapbox-gl-js/
版权

Vue地图框 (vue-mapbox)

Combine powers of Vue.js and Mapbox Gl JS

结合Vue.js和Mapbox Gl JS的强大功能

Vue-mapbox is wrapper around Mapbox GL JS library that provides vueish-way to interact with the map.

Vue-mapbox是Mapbox GL JS库的包装，该库提供了与地图交互的途径。

尺寸 (Size)

~ 39 kB minified ~ 7 kB minified and gzipped

最小〜39 kB最小〜gzip压缩

浏览器兼容性 (Browser compatibility)

Coming soon

快来了

发展历程 (Development)

git clone[email protected]:soal/vue-mapbox.git
cd vue-mapbox
npm install

Running in dev mod:

在dev mod中运行： 

npm run dev

Running tests:

运行测试： 

npm run tests

Build for production:

量产： 

npm run build

翻译自: https://vuejsexamples.com/vuejs-2-components-for-interacting-with-mapbox-gl-js/

cuk5239
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
mapbox gl js_Mapbox GL JS的Vue.js组件
cuk5239的博客
07-23 353
mapbox gl js Mapbox GL JS Vue.js (Mapbox GL JS Vue.js) A Vue.js Mapbox component. Vue.js Mapbox组件。 Installation 安装 NPM NPM npm install mapbox-gl-vue --save 建立 (Setup) This package does not incl...
vue-mapbox：用于与mapbox-gl-js交互的Vuejs 2组件
02-06
VueMapbox 结合和 Vue-mapbox是Mapbox GL JS库的包装，该库提供了与地图交互的途径。 尺寸 缩小并压缩至约15 kB 浏览器兼容性 快来了 发展历程 git clone git@github.com:soal/vue-mapbox.git cd vue-mapbox npm install 在开发人员模式下运行： npm run serve 量产： npm run build 文献资料 文档使用 。 文档源放置在docs_source目录中，并内置到docs目录中 在开发模式下启动文档站点： npm run docs:serve 生成文档： npm
vue-mapbox-map:一个极简的Vue组件，用于包装Mapbox GL JS以实现动态地图！
03-31
vue-mapbox-map 极简的组件，用于包装以用于动态地图。 该组件仅包装动态更新所需的内容，并返回map对象。 它基于不需要（无用地盘绕）将mapbox-gl API的每个最后方面包装到vue组件中的原则，对传统的mapbox-gl范式进行了进一步的配置。
Mapbox GL JS是一个JavaScript库，用于在Web上实现交互式，可自定义的矢量地图-javascript
06-21
Mapbox GL JS是一个JavaScript库，用于在Web上实现交互式，可自定义的矢量地图。 它采用符合Mapbox样式规范的地图样式，将它们应用于符合Mapbox矢量图块规范的矢量图块，并使用WebGL渲染它们。 Mapbox GL JS 是一个 JavaScript 库，用于在网络上交互式、可定制的矢量地图。 它采用符合 Mapbox 样式规范的地图样式，将它们应用到符合 Mapbox 矢量瓦片规范的矢量瓦片，并使用 WebGL 渲染它们。 Mapbox GL JS 是跨平台 Mapbox GL 生态系统的一部分，它还包括适用于 Android、iOS、macOS、Qt 和 React Native 应用程序的兼容原生 SDK。 Mapbox 提供了构建块，可将地图、搜索和导航等位置功能添加到您创建的任何体验中。 要开始使用 GL JS 或我们的任何其他构建块，请注册一个 Mapbox 帐户。 除了 GL JS，此存储库还包含 GL JS 和本机 SDK 通用的代码、问题和测试装置。 有关特定于本机 SDK 的代码和问题，请参阅 mapbox/mapbox-gl
vue2mapbox-gl:mapbox-gl的Vue组件。 Api遵循Vue2Leaflet的方法，因此很容易在两个map组件之间来回移植代码
05-02
vue2mapbox-gl mapbox-gl的Vue组件。 类似于Vue2Leaflet的Api。 安装 $ npm install --save vue2mapbox-gl 用法 使用umd导入，例如使用es6导入。 import Vue2MapboxGL from 'vue2mapbox-gl' ; // You might want to import the relevant css, for example: import 'mapbox-gl/dist/mapbox-gl.css' ; // for the v-mapbox-geocoder import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css' ; // Use the plugin Vue . use ( Vue2MapboxGL ) ; 原料药
mapbox-gl-draw:mapbox-gl-js的绘图工具
04-30
兼容版本记录在package.json中在NPM上，此软件包最近已从mapbox-gl-draw移至@mapbox/mapbox-gl-draw正在安装npm install @mapbox/mapbox-gl-drawDraw随CSS一起提供，请确保将其包含在构建中。打字稿Typescript定义...
mapbox-gl-directions:使用Mapbox Directions API的mapbox-gl-js的Directions插件
05-14
Mapbox GL路线 使用功能齐全的路线插件。 快速添加用户界面，以在地图上显示行车，骑车或步行的路线。 Mapbox Directions API由路由引擎提供支持，并从项目中打开数据。 有关本机移动和桌面应用程序中的路线功能，...
mapbox-gl-geocoder:使用Mapbox Geocoding API的mapbox-gl-js的Geocoder控件
05-02
Mapbox GL Geocoder 使用地址解析器控件。 对于没有图形用户界面JavaScript地理编码器，请参见 。 用法 如果您支持较旧的浏览器，则需要使用polyfill。 我们建议使用 。 与模块捆绑器一起使用 npm install --save ...
mapbox-gl-export:该模块将打印控件添加到mapbox-gl
03-31
适用于mapbox-gl-js v1开源用户 npm i @watergis/mapbox-gl-export --save 适用于mapbox-gl-js v2用户 npm i git+https://github.com/watergis/mapbox-gl-export.git#mbgljs-v2 笔记。 mbgljs-v2分支虽然已升级到...
【VUE - 工具 - mapboxgljs】07、vuecli+mapboxgl创建demo显示地图
汪同学丶的博客
02-20 2855
基于vue集成mapboxgljs显示地图
vue+mapboxgl 鹰眼展示
05-25
运用vue加mapboxgl,编写的鹰眼图，全局视图，通过小图查看大图的展示功能 1、首先要有两个地图 大图，小图，鹰眼范围图（简称鹰眼） 2、大图移动，放大缩小的时候要相应的放大和缩小 3、小图不动，鹰眼图放大和缩小时，大图展示相应的位置
vue-mapboxgl-components:基于 Vue 和 mapbox-gl 的地理信息可视化组件库
05-06
基于 和 的地理信息可视化组件库 快速开始 安装依赖 可以通过 npm 添加依赖 npm i vue-mapboxgl-components --save 或者通过 yarn 添加依赖 yarn add vue-mapboxgl-components 引入 在 Vue 项目的 main.js 中写入以下内容： import Vue from 'vue' <!-- 引入组件JavaScript文件 --> import 'vue-mapboxgl-components' <!-- 引入组件CSS文件，如果没有CSS，Popups和Markers等元素将无效。 --> import 'vue-mapboxgl-components/lib/vue-mapboxgl-components.css' import App from './App.vue' Vue.config.prod
threejs-maps:使用 D3.js、Three.js 和 Mapbox 的交互式地图
06-27
Threejs-maps 使用 d3.js 和three.js 的两个地图演示。
交互式3D地图
08-13
本资源仅实现了商场地图的3D交互如需思路可访问https://blog.csdn.net/qq_29099209/article/details/81624063，功能尚未实现，提供思路
mapbox_three_3D_bubble_demo.rar
10-16
mapbox-gl+Three.js实现三维球体专题图，3D气泡图、动画效果、轻量级！
vue使用mapbox_使用Vue和Mapbox GL JS构建的邻域指示器仪表板
cuk5340的博客
07-24 429
vue使用mapbox 生活质量控制台v3 (Quality of Life Dashboard v3) A dashboard for community data and health. 社区数据和健康状况的仪表板。 View demo 查看演示 Download Source 下载源 开始使用 (Get Started) This project requires git and...
Mapbox GL在Vue项目中的应用（综合demo）
tigerhhzz的博客
05-30 1809
MapboxGL是一个强大的JavaScript库，用于创建交互式和可自定义的地图。它基于WebGL构建，能够在浏览器中高效地渲染矢量地图。地图样式：Mapbox GL支持自定义地图样式，允许您设计和定制地图的外观。您可以定义地图的图层、样式、颜色和标签，以创建独特的视觉效果。交互性：使用Mapbox GL，您可以轻松地为地图添加交互性。您可以添加标记、弹出窗口、工具提示和交互式控件，使用户可以与地图及其要素进行交互。
vue使用mapbox地图
最新发布
qq_43840793的博客
07-04 1264
写一个盛放地图的盒子id=“mapbox”，然后引入地图，import{map,loadMap},之后加载地图，loadMap('‘mapbox’)在api/map文件夹下新建mapbox.js文件。2、引入mapBox，将引入的内容封装为js文件。3、所需页面调用地图。
mapbox 地图交互
qq_34870529的博客
06-29 1415
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>mapbox 地图交互</title> <meta name='viewport' content='initial-scale=1,maximum-scale=1,use...
npm install --save @/assets/js/mapboxgl-control-minimap.js @mapbox/mapbox-gl-geocoder @mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css @mapbox/mapbox-gl-language @turf/turf
06-10
- `@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css` 是 Mapbox GL JS 地理编码器插件的 CSS 样式表。 - `@mapbox/mapbox-gl-language` 是一个 Mapbox GL JS 插件，用于添加多语言支持。 - `@turf/turf` 是...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值