BIGEMAP搭建使用

bigemap官网

搭建

1. 安装 docker docker-compose
2. 1. wget http://download.bigemap.com/bm-server/linux/bm-server-installer.zip
   2. unzip bm-server-installer.zip
   3. chmod +x ./bm-server-installer
   4. ./bm-server-installer install bm-server/
3. 离线地图下载器bigemap 离线地图
   bigemap 离线地图操作
4. 发布到 安装目录下的 tilesets

Vue 中使用 BIGEMap

1. 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;
   });
   

2. 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%;
     }
   

3. 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)
         });
       });
     }
   }