包含20多个常用组件，地图应用组件库用这一个就够了

最新推荐文章于 2024-02-18 14:40:23 发布
VIP文章 最新推荐文章于 2024-02-18 14:40:23 发布
阅读量1.5k 收藏 2
点赞数 1
分类专栏： Gitee Gitee项目推荐 文章标签： vue js 地图应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zicochan/article/details/106421370
版权

今天 Gitee 给大家介绍的这个项目厉害了，是一款集合了二十多款组件的地图应用组件库，也是最新入选 GVP 的项目。如果有开发者想要在自己的项目中加入地图组件，那么这个组件库一定是一个优秀的选择。

 

项目名称：xdh-map

项目作者：铁匠铺

开源许可协议：MIT

 

项目地址：https://gitee.com/newgateway/xdh-map

 

 

项目简介

基于Openlayers的地图应用Vue组件。内置了百度、高德、天地图瓦片，并支持与方正、超图、山海经纬、航天精一等PGIS厂商对接。 包含文本、图形、html、热力图、轨迹回放等20个组件，支持与ECharts结合实现散点、飞行迁徙等基于地理位置的图表，满足项目常见需求。 使用者不需要有地图相关专业知识，甚至不需要写任何JS代码就能实现通用功能。

 

预览

最低0.47元/天 解锁文章
Gitee
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue+OpenLayers6扩展插件进阶系列汇总目录：常用OpenLayers地图扩展组件ol-ext、ol-cesium、ol-layerswitcher、ol-geocoder和ol-wind
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-19 437
OpenLayers 是一个开源的 JavaScript 库，用于在 Web 上创建交互式地图。它本身提供了丰富的功能和组件，但也有一些扩展库可以为其增加更多功能或简化特定任务的实现。以下是一些常见的 OpenLayers 扩展库：ol-ext、ol-cesium、ol-layerswitcher、ol-popup、ol-geocoder和ol-wind等常见扩展库。
基于echarts的前端地图统计插件（只有全国的）
12-27
java web前端用到的地图统计插件 echarts 全国地图 统计
Vue.Js实战
剑八的博客
08-09 547
Vue.Js实战 需求来源 前端框架引入地图 初识 Vue是一个前端框架，类似于JSP，聚焦于HTML模板复用，单个vue文本组件，内部作用域包含html-css-js，其虚拟DOM操作可以优化频繁的DOM操作。 Jquery则主要是原生JsAPI的封装，以DOM选择器为核心，以简单插件方式使用，在应用简单时易用，但复杂后要借用其他框架。 其他框架如React，则是以JS为核心...
【经验分享】前端分享会-地图模块、echarts以及插件分享
weixin_43863316的博客
02-28 3651
地图模块：ECharts使用SVG做地图、OpenLayer简要入门 ECharts相关小tips介绍 实用插件介绍
前端常用的地图框架（webGIS）
weixin_45311714的博客
03-02 3938
是较为学院派的前端地图库，它是ArcGIS开发套件中的一部分，和桌面端和服务器端ArcGIS软件有较好的协作。是目前最新潮的前端地图库，它的矢量压缩、动态样式和三维性能令人印象深刻。它本身是开源的，但一般依赖于Mapbox公司提供的底图服务。是三维地图，它们依赖百度地图提供的后台服务。是三维地理可视化的常用库，在大尺度的可视化（地形、建筑、地球）中十分常用。也是常用的前端地图库，它开源，相比于Leaflet更加复杂和完备。是最著名的前端地图可视化库，它开源、体积小、结构清晰、简单易用。在境外有更好的数据。
基于uni-app与百度地图API实现简易前后端分离的地理围栏应用
Takina的博客
07-21 3444
【完整代码】地理围栏（Geo-fencing）是LBS 的一种新应用，就是用一个虚拟的栅栏围出一个虚拟地理边界。当手机进入、离开某个特定地理区域，或在该区域内活动时，后台可以感知到这一变化，同时手机可以接收自动通知和警告。地理围栏技术融入生活，可以使得生活效率更加高效同时更加安全。有了地理围栏技术，位置社交网站就可以帮助用户在进入某一地区时自动登记。现阶段的地理围栏应用十分有限，相关资料与资源也不充足，本次实习致力于打造一个能够供个人使用的简单的地理围栏应用，并且能够在此基础上升级为企业、人员管理等....
介绍7款免费的最佳地图/导航/定位/GIS开源项目
tigerhhzz的博客
02-18 1900
L7 是由蚂蚁金服 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析开发框架。L7 中的 L 代表Location，7 代表世界七大洲，寓意能为全球位置数据提供可视分析的能力。L7 以图形符号学为理论基础，将抽象复杂的空间数据转化成2D、3D 符号，通过颜色、大小、体积、纹理等视觉变量实现丰富的可视化表达。大数据时代到来，随着数据的逐步开放，数据工作者们或多或少都要接触到时空数据。数据处理是一门艺术！
Vue常用的组件库大全【前端工程师必备】
weixin_47615289的博客
01-07 2395
中文文档：https://dafrok.github.io/vue-baidu-map/#/zh/start/installation。原文链接：https://blog.csdn.net/qq_44757034/article/details/128090797。在线预览：https://dafrok.github.io/vue-baidu-map/#/zh/guide/painting。🔸一套基于 Vue.js 的高质量UI 组件库 https://www.iviewui.com/
目前流行的组件库有哪些？CSS，JS各有哪些流行的库？
Jiang
07-07 9542
修真院网站-11
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏） 、动画组件库、文本编辑器，富文本、Markdown，3D组件库】
热门推荐
程序员猫爪
11-29 2万+
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏） 、动画组件库、文本编辑器，富文本Markdown，3D组件库】
可视化图表通用组件库，主要由Antv静态图表、Axhub动态图表、地图组件素材三部分内容数据可视化图表组件库
05-21
本作品是由AxueUX整理的一套数据可视化图表通用组件库，主要由Antv静态图表、Axhub动态图表、地图组件素材三部分内容组成，其中包含了几十种常用图表类型和全国34个省级行政区地图，可以满足大部分的原型设计图表...
元件库命名规范
09-26
绝对是原创的！经历了很多时间才完成。。相信这份资料会对你有帮助
一个Java版本的组件化的分布式通用爬虫.zip
03-06
URL收集： 爬虫从一个或多个初始URL开始，递归或迭代地发现新的URL，构建一个URL队列。这些URL可以通过链接分析、站点地图、搜索引擎等方式获取。 请求网页： 爬虫使用HTTP或其他协议向目标URL发起请求，获取网页的...
该项目是一个使用celery作为主体框架的爬虫应用.zip
03-01
URL收集： 爬虫从一个或多个初始URL开始，递归或迭代地发现新的URL，构建一个URL队列。这些URL可以通过链接分析、站点地图、搜索引擎等方式获取。 请求网页： 爬虫使用HTTP或其他协议向目标URL发起请求，获取网页的...
WebMagic是一个简单灵活的Java爬虫框架.zip
03-08
URL收集： 爬虫从一个或多个初始URL开始，递归或迭代地发现新的URL，构建一个URL队列。这些URL可以通过链接分析、站点地图、搜索引擎等方式获取。 请求网页： 爬虫使用HTTP或其他协议向目标URL发起请求，获取网页的...
一个漏洞扫描器粘合剂,添加目标后30款工具自动调用.zip
01-19
URL收集： 爬虫从一个或多个初始URL开始，递归或迭代地发现新的URL，构建一个URL队列。这些URL可以通过链接分析、站点地图、搜索引擎等方式获取。 请求网页： 爬虫使用HTTP或其他协议向目标URL发起请求，获取网页的...
infrared-remote-candroid studiodemo
最新发布
05-05
android studio下载
【新质生产力】新质生产力赋能智能制造数字化解决方案.pptx
05-05
【新质生产力】新质生产力赋能智能制造数字化解决方案.pptx
微信小程序三十个API或者组件的名称、使用案例代码和使用解释
06-08
好的，以下是微信小程序三十个常用API和组件的名称、使用案例代码和使用解释： 1. wx.request：发起 HTTPS 网络请求。 使用案例代码： ```js wx.request({ url: 'https://example.com/api/data', success(res) { console.log(res.data) } }) ``` 使用解释：该 API 可以用于向服务器发送网络请求，并获取服务器返回的数据。在上面的代码中，我们向服务器发送一个 GET 请求，获取数据，并在成功回调函数中打印出响应结果。 2. wx.navigateTo：保留当前页面，跳转到应用内的某个页面。 使用案例代码： ```js wx.navigateTo({ url: '/pages/detail/detail?id=123' }) ``` 使用解释：该 API 可以实现页面之间的跳转，类似于浏览器的前进和后退功能。在上面的代码中，我们跳转到应用内的详情页，并传递了一个参数 id。 3. wx.showToast：显示消息提示框。 使用案例代码： ```js wx.showToast({ title: '提交成功', icon: 'success', duration: 2000 }) ``` 使用解释：该 API 可以在页面上显示一个消息提示框，用于提示用户一些重要的信息。在上面的代码中，我们显示一个提交成功的提示框，设置了图标为成功的图标，显示时间为2秒。 4. wx.login：调用登录接口，获取登录凭证（code）。 使用案例代码： ```js wx.login({ success(res) { console.log(res.code) } }) ``` 使用解释：该 API 可以获取用户的登录凭证，该凭证可以用于后续的接口调用，如获取用户信息、支付等操作。在上面的代码中，我们在成功回调函数中打印出了登录凭证。 5. wx.getUserInfo：获取用户信息。 使用案例代码： ```js wx.getUserInfo({ success(res) { console.log(res.userInfo) } }) ``` 使用解释：该 API 可以获取用户的昵称、头像等信息，需要用户授权后才能调用。在上面的代码中，我们在成功回调函数中打印出了用户信息。 6. wx.showLoading：显示加载提示框。 使用案例代码： ```js wx.showLoading({ title: '正在加载...', }) ``` 使用解释：该 API 可以在页面上显示一个加载提示框，用于提示用户正在加载数据。在上面的代码中，我们显示一个正在加载的提示框。 7. wx.getStorage：从本地缓存中异步获取指定 key 对应的内容。 使用案例代码： ```js let history = wx.getStorageSync('history') ``` 使用解释：该 API 可以从本地缓存中获取指定 key 对应的内容，可以用于保存用户的一些信息，如浏览记录等。在上面的代码中，我们获取了名为 history 的本地缓存。 8. wx.createCanvasContext：创建 canvas 绘图上下文。 使用案例代码： ```js const ctx = wx.createCanvasContext('myCanvas') ctx.rect(0, 0, 100, 100) ctx.setFillStyle('red') ctx.fill() ctx.draw() ``` 使用解释：该 API 可以创建一个 canvas 绘图上下文，可以用于在 canvas 上绘制图形、文字等。在上面的代码中，我们创建了一个绘图上下文并绘制了一个红色的正方形。 9. wx.getSystemInfoSync：获取系统信息。 使用案例代码： ```js let systemInfo = wx.getSystemInfoSync() console.log(systemInfo.windowWidth) ``` 使用解释：该 API 可以获取设备的一些信息，如屏幕宽度、高度、像素比等。在上面的代码中，我们获取了设备的屏幕宽度并打印出来。 10. <swiper> 组件：轮播图组件。 使用案例代码： ```html <swiper autoplay="true"> <block wx:for="{{images}}" wx:key="url"> <swiper-item> <image src="{{item.url}}" mode="aspectFill"></image> </swiper-item> </block> </swiper> ``` 使用解释：该组件可以实现轮播图效果，可以设置轮播间隔、指示器样式等参数。在上面的代码中，我们使用了一个 images 数组来渲染轮播图，并设置了自动播放。 11. wx.showModal：显示模态对话框。 使用案例代码： ```js wx.showModal({ title: '提示', content: '确认删除吗？', success(res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cancel) { console.log('用户点击取消') } } }) ``` 使用解释：该 API 可以显示一个模态对话框，用于询问用户是否进行某个操作。在上面的代码中，我们显示一个确认删除的模态对话框，根据用户的点击结果进行相应的操作。 12. wx.createInnerAudioContext：创建音频上下文。 使用案例代码： ```js const audioCtx = wx.createInnerAudioContext() audioCtx.src = 'audio.mp3' audioCtx.play() ``` 使用解释：该 API 可以创建一个音频上下文，可以用于播放音频文件。在上面的代码中，我们创建了一个音频上下文并播放了一个名为 audio.mp3 的音频文件。 13. wx.chooseImage：从相册或拍照中选择图片。 使用案例代码： ```js wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success(res) { const tempFilePaths = res.tempFilePaths console.log(tempFilePaths) } }) ``` 使用解释：该 API 可以从相册或拍照中选择图片，并返回选择的图片临时文件路径。在上面的代码中，我们选择了一张图片，并在成功回调函数中打印出了图片的临时文件路径。 14. wx.createAnimation：创建动画实例。 使用案例代码： ```js const animation = wx.createAnimation({ duration: 1000, timingFunction: 'linear', }) animation.translateX(100).step() this.setData({ animationData: animation.export() }) ``` 使用解释：该 API 可以创建一个动画实例，可以用于制作动态效果。在上面的代码中，我们创建了一个平移动画，并将动画数据绑定到页面数据中，用于在页面上展示动画效果。 15. wx.showActionSheet：显示操作菜单。 使用案例代码： ```js wx.showActionSheet({ itemList: ['拍照', '从手机相册选择'], success(res) { if (res.tapIndex === 0) { console.log('用户点击了拍照') } else if (res.tapIndex === 1) { console.log('用户点击了从相册选择') } } }) ``` 使用解释：该 API 可以显示一个操作菜单，用于提供多个操作选项。在上面的代码中，我们显示了一个包含两个选项的操作菜单，并根据用户的选择进行相应的操作。 16. wx.openLocation：使用地图查看位置。 使用案例代码： ```js wx.openLocation({ latitude: 39.90403, longitude: 116.407526, scale: 18, name: '北京市' }) ``` 使用解释：该 API 可以使用地图查看指定的位置。在上面的代码中，我们打开了一个地图，显示了北京市的位置，并设置了缩放比例为18。 17. wx.getNetworkType：获取网络类型。 使用案例代码： ```js wx.getNetworkType({ success(res) { const networkType = res.networkType console.log(networkType) } }) ``` 使用解释：该 API 可以获取当前设备的网络类型，如 WiFi、4G、3G 等。在上面的代码中，我们获取了当前设

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值