开源地图引擎有哪些 OSG开源框架
开源精选是我们在Github、Gitee等开源社区分享优质项目的专栏，包括技术、学习、实用和各种有趣的内容。本期推荐一套基于Vue 2.0和高德地图2.0的地图组件——Vue-Amap。Vue-a
开源精选是我们在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点标记：点标记、标注、文本、灵活点标记、点聚合、海量点窗体：信息窗体矢量图形：多边形、折线、贝塞尔曲线、圆、椭圆、矩形、GeoJSONLoca可视化：圆点图层、图标图层、棱柱图层、线图层、面图层、链接线图层、热力图、蜂窝网格图、网格图、贴地点图层、轨迹线图层、连接飞线图层
设置:
推荐的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-amapimport VueAMap from '@vuemap/vue-amap';import '@vuemap/vue-amap/dist/style.css';Vue.use(VueAMap);// 初始化vue-amapVueAMap.initAMapApiLoader({ // 高德的key key: 'YOUR_KEY',});//如果需要使用自定义的threeJS相关的组件，需要额外引入库中的three。该包只提供常用的模型加载，灯光，HDR等相关能力，更细致的控制需要在模型初始化后获取对象进行操作import VueAmapThree from '@vuemap/vue-amap/dist/three'Vue.use(VueAmapThree);
示例:
有三种方法可以获取地图实例:
1.通过初始化事件
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>
运行结果:
其他示例:
地图类型切换
室内图层
热力图
图片图层
网格图
面图层
轨迹线图层
更多内容大家可自行前往阅读。室内层的内容可以自己多了解一下。
