搭建
- 安装 docker docker-compose
-
- wget http://download.bigemap.com/bm-server/linux/bm-server-installer.zip
- unzip bm-server-installer.zip
- chmod +x ./bm-server-installer
- ./bm-server-installer install bm-server/
- 离线地图下载器bigemap 离线地图
bigemap 离线地图操作 - 发布到 安装目录下的 tilesets
Vue 中使用 BIGEMap
-
src下 map.js
//map.js let script=[ 'http://172.18.100.63:3000/bigemap.js/v2.1.0/bigemap.js', //如果有更多的JS要引用 ,也一起放到这个数组中 ]; export default new Promise(resolve => { let link = document.createElement("link"); link.rel = "stylesheet"; link.async = false; link.href = "http://172.18.100.63:3000/bigemap.js/v2.1.0/bigemap.css"; document.head.appendChild(link); let loads=script.map(v=>{ let script = document.createElement("script"); script.type = "text/javascript"; script.async = false; script.src = v; document.head.appendChild(script); return script; }); let end=loads.pop(); end.onload=resolve; });
-
2D使用
<div id="app"> <div id="map"> </div> </div>
import map from "./map"; export default { name: 'App', components: { }, mounted() { map.then(()=>{ this.BM=window.BM; this.BM.Config.HTTP_URL = 'http://172.18.100.63:3000'; this.BM.map('map', 'bigemap.3p5yk2qg',{ center: [37.47193325, 121.46016598], zoom: 18, zoomControl: true }); }); } }
html,body,#app,#map{ font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; margin: 0; padding: 0; height: 100%; }
-
3D使用
<div id="app"> <div id="container"> </div> </div>
import maps from "./map"; export default { name: 'App', components: { }, mounted() { maps.then(()=>{ this.bmgl = window.bmgl; this.bmgl.Config.HTTP_URL = 'http://172.18.100.63:3000'; let viewer = new this.bmgl.Viewer('container', { mapId: 'bigemap.3p5yk2qg' }); viewer.camera.setView({ destination: this.bmgl.Rectangle.fromDegrees(121.40695190429688, 37.46430969238281, 121.47224426269531, 37.52668762207031) }); }); } }