基於 Vue+Openlayer 地圖應用類庫xdh-Map

2020-10-23 web前端進階

今天給小孩們分享一個超強大的Vue地圖應用組件庫xdhMap。

xdh-map 新德匯團隊出品的基於vue.js和Openlayers地圖應用類庫。包含文本、圖形、html、熱力圖、航線、軌跡回放等20多個組件。支持與Echarts圖表結合。

安裝

使用地圖組件之前需要先安裝MyUI組件庫。

$ npm i @xdh/my -S

使用地圖

<template> <my-map adapter="Baidu" :zoom="12" :center="[180, 66]" :drag-pan="false" :mouse-wheel-zoom="true" @click="handleMapClick" > </my-map></template><script> import {MyMap} from '$ui/map' export default { components: { MyMap }, methods: { handleMapClick(e) { console.log('click', e) }, } }</script>

提供了超全面的應用示例及API。

內置了百度、高德、OSM，並支持與方正、超圖、山海經緯、航天精一等PGIS廠商對接。

so good，非常強大的一款集合超多功能的地圖應用庫，大家不要錯過哈！

# 文檔地址http://newgateway.gitee.io/my/ui/map/# gitee地址https://gitee.com/newgateway/xdh-map

okay，今天就介紹到這裡。如果在項目開發中需要用到的話，可以去看一看。

相關焦點

  • vue + ArcGIS 地圖應用系列二：加載地圖
    創建 Vue 項目我們利用 Vue-CLI 工具進行快捷創建下載 Vue-CLI 工具yarn add global @vue/cli  # or: npm i @vue/cli -
  • vue-mapvgl v0.0.9 發布,基於 Vue 2.0 和百度地圖的地圖組件
    vue-mapvgl v0.0.9 已經發布，此版本更新內容包括：增加 el-gltf-three-layer （gltf的threejs實現圖層）所有圖層增加visible
  • vue-mapvgl v0.0.2 發布
    vue-mapvgl v0.0.2 已發布，此版本更新內容包括：目前完成組件： el-bmapv-view (圖層管理器，圖層的容器) el-bmapv-point-layer
  • 超優秀 Vue+ElementUI 桌面端一站式框架MyUI
    my-ui 新德匯推出的基於vue.js+element-ui 構建的web前端項目工程框架。特性內置超過150+個常用的基礎UI組件；集成圖表庫、關係圖、地圖應用類庫；支持子前端微服務子應用，可獨立開發、運行、部署；自動生成路由；支持組件自動註冊及按需加載；支持自定義主題，可以進行在線切換；支持靜態配置；
  • vue.js下引入百度地圖jsApi的兩種方法
    ，一般我們在移動端使用百度地圖，都是直接通過這樣的方式，直接引入百度地圖的jsApi。= new BaiduMap.Marker(point) // 創建標註 map.centerAndZoom(point,15) // 初始化地圖，設置中心點坐標和地圖級別 map.addOverlay(marker) // 將標註添加到地圖中}注意這裡，實例化地圖api，最好要在mounted階段進行，如果你的
  • vue入門002~vue項目的兩種創建方式
    3，使用webpack模板創建一個vue項目vue init webpack my-project如項目名為vue001>在出現下面幾個詢問項時，直接按照箭頭所示的操作即可下載項目所需類庫5，執行 npm install 下載所需類庫
  • Vue PC端框架
    Vuetify 支持SSR（服務端渲染），SPA（單頁應用程式），PWA（漸進式Web應用程式）和標準HTML頁面。Vue Beauty基於 ant design 的漂亮的 vue 組件庫；vue-beauty 是一套基於 vue.js 和 ant-design樣式 的PC端 UI 組件庫，旨在幫助開發者提升產品體驗和開發效率
  • vue 常用插件集合(最全)
    vue-blu- 幫助你輕鬆創建web應用vueAdmin- 基於vuejs2和element的簡單的管理員模板vue-syntax-highlight- Sublime Text語法高亮vue-infinite-scroll- VueJS的無限滾動指令Vue.Draggable- 實現拖放和視圖模型數組同步vue-awesome-swiper
  • 面向自動駕駛的高精度地圖框架解析和實戰
    物理元素基於配準的定位需要直接訪問某些地圖中的某些物理元素，這些物理元素的類別和具體的定位方法相關。包括landmark（路標）、護欄、道路邊緣等信息，HAD map理論上應該包含這些物理元素以支持基於地圖的配準定位。
  • vue + ArcGIS 地圖應用系列一：arcgis api本地部署(開發環境)
    (Express靜態文件伺服器放在了 https://github.com/LuckRain7/arcgis-api-for-javascript-vue 倉庫中的 static-server 文件中，大家可以去 clone 使用。)
  • 基於 vue+element-ui 桌面端UI組件庫Avue
    avue 基於 Vue2.0靈活易用，基於Vue Element-UI開發高效兼容，兼容主流瀏覽器豐富組件，包含大量常用組件庫及豐富的插件庫安裝$ npm i @smallwei/avue -S引入組件import Vue from &39;import Avue from &39;import &39;Vue.use
  • 以及和vue的區別
    切圖網是國內專業的web前端外包服務公司，提供psd轉html切圖以及vue等開發服務，vue同樣是基於js的類庫，但是它的邏輯完全顛覆了我們對jquery說了解到的認知（沒有dom概念），那一些特效交互怎麼實現呢？ 答案是通過數據驅動。
  • 超優秀 Avue 數據大屏可視化系統Avue-data
    avue-data 基於 vue+element-ui 二次封裝的大屏可視化平臺。提供2000多個模板庫，屏幕自適應，支持自定義地圖選擇器。通過點擊想要的地圖區域生成json數據，複製新增即可實現自定義地圖效果。
  • 使用Android Google Map開發LBS應用
    【IT168技術】在本系列的上一講中，我們學習了google map 使用的一些簡單步驟，其中學習到了如何註冊google map api以及如何使用mapview控制項。在本講中，將學習如何根據若干指定的地理位置(給出了經緯度)，並在地圖上用指定的方法進行彈出顯示其地理位置詳細信息，其中用到了一個不錯的第三方氣球標識類庫。
  • vue項目結構簡介
    process.env.NODE_ENV) { process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)} //opn -- A better node-open. Opens stuff like websites, files, executables. Cross-platform.
  • 經驗分享：Vue CLI無法使用全局變量的解決辦法
    如今mvvm大行其道，然而支持vue的地圖少之又少，項目中我們一定遇到vue-echarts，無法使用全局變量的問題，不能new echarts實現漸變效果，不能用jquery，不能用mapv，怎麼辦，其實窗戶紙一旦捅破，一切都是那麼的簡單，直接上代碼，vue.config.js,找到plugins節點添加以下內容：new webpack.ProvidePlugin({ '$': 'jquery', 'jQuery': 'jquery', 'windows.jQuery': 'jquery', 'echarts
  • 高性能 vue.js+ztree 樹形組件Vue-GiantTree
    vue-giant-tree 基於 為什麼需要vue-giant-treeVue的數據監聽機制決定了在大數據量場景下的渲染性能非常低下，基於Vue實現的常規樹組件幾乎無法勝任上萬條數據的高性能渲染，在IE瀏覽器中很容易導致頁面卡死甚至瀏覽器崩潰。
  • 基於 Vue3.0+Antv 可視化大屏模板
    vue-datav-chart 基於vue3.x+echarts+antv構建的數據可視化大屏展示模板。包含各種動態圖表、地圖下鑽# 進入目錄cd vue-datav-chart# 安裝依賴npm install# 本地服務npm run serve# 構建項目npm run build
  • Vue學習筆記（一）
    了不起的vue1.官方介紹Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
  • Vue初體驗 -Vue的安裝和使用
    與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。