OSG開源框架：開源地圖引擎有哪些

《開源精選》是我們分享Github、Gitee等開源社區中優質項目的欄目，包括技術、學習、實用與各種有趣的內容。本期推薦的是一套基於Vue 2.0和高德地圖2.0的地圖組件——vue-amap。

vue-amap是一套基於Vue 2.0和高德地圖2.0的地圖組件。該版本對原vue-amap組件進行升級，主要適配amap2.0相關的接口，同時調整事件綁定形式，調整為使用v-on進行事件綁定，數據狀態與地圖狀態單向綁定，發者無需關心地圖的具體操作。組件中將會對高德可視化組件loca進行封裝，同時提供threejs的接口。

功能特性：

控件：比例尺、地圖操作工具條、地圖控制插件、地圖類型切換、鷹眼控件
高德官方圖層：默認圖層、切片圖層、實時交通圖層、衛星圖層、路網圖層、建築樓塊3D圖層、簡易行政區劃圖、室內圖層
行業標準圖層：WMS、WMtS、矢量瓦片塊
自由數據圖層：熱力圖、標註圖層、自定義圖層、靈活切片圖層、圖片圖層、Canvas圖層、3D自定義圖層
自定義ThreeJS：Three圖層、GLTF
點標記：點標記、標註、文本、靈活點標記、點聚合、海量點
窗體：信息窗體
矢量圖形：多邊形、折線、貝塞爾曲線、圓、橢圓、矩形、GeoJSON
Loca可視化：圓點圖層、圖標圖層、稜柱圖層、線圖層、面圖層、鏈接線圖層、熱力圖、蜂窩網格圖、網格圖、貼地點圖層、軌跡線圖層、連接飛線圖層

安裝初始化：

推薦npm安裝：

npm install @vuemap/vue-amap --save

或者使用CDN：

<script src="https://unpkg.com/@vuemap/vue-amap/dist/index.js"></script>

<!--加載自定義threeJS組件-->

<script src="https://unpkg.com/@vuemap/vue-amap/dist/three.js"></script>

<script src="https://unpkg.com/@vuemap/vue-amap/dist/style.css"></script>

腳本初始化：

// 引入vue-amap
import VueAMap from '@vuemap/vue-amap';
import '@vuemap/vue-amap/dist/style.css';

Vue.use(VueAMap);

// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  key: 'YOUR_KEY',
});

//如果需要使用自定義的threeJS相關的組件，需要額外引入庫中的three。該包只提供常用的模型加載，燈光，HDR等相關能力，更細緻的控制需要在模型初始化後獲取對象進行操作
import VueAmapThree from '@vuemap/vue-amap/dist/three'
Vue.use(VueAmapThree);

示例：

獲取地圖實例方式有三種：

1、通過init事件

2、通過ref獲取地圖組件對象，然後調用$$getInstance方法

基礎示例：

<template>
    <div class="bmap-page-container">
      <el-amap ref="map" :min-zoom="10" :max-zoom="22" :center="center" :zoom="zoom" @init="init" @click="click" class="bmap-demo">
      </el-amap>
      <div class="toolbar">
        <button @click="getMap()">get map</button>
      </div>
    </div>
  </template>

  <style>
    .bmap-demo {
      height: 300px;
    }
  </style>

  <script>
    module.exports = {
      data: function() {
        return {
          zoom: 16,
          center: [121.59996, 31.197646],
          map: null,
        };
      },
      mounted() {
      },
      methods: {
        getMap() {
          // bmap vue component
          console.log('$refs: ', this.$refs.map.$$getInstance())
        },
        init(o) {
          this.map = o;
          console.log(o.getCenter())
          console.log(this.$refs.map.$$getInstance())
        },
        click(){
          alert('click map')
        }
      }
    };
</script>

運行結果：