<!DOCTYPE html> <html> <> <meta charset="UTF-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <link href="http://bigemap.com:9000/bigemap-gl.js/v1.1.0/Widgets/widgets.css" rel="stylesheet" /> <script src="http://bigemap.com:9000/bigemap-gl.js/v1.1.0/bigemap-gl.js"></script> <script src="http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js"></script> <script src="http://www.bigemap.com/Public/common/js/jquery.min.js"></script> <script type="text/javascript" src="http://www.bigemap.com/mapoffline/js/togeojson.js"></script> <script src="https://unpkg.com/@turf/turf/turf.min.js"></script> <script src="http://www.bigemap.com/my/js/GeometryUtil.js"></script> <script src="http://www.bigemap.com/my/js/movemarker.js"></script> <script src="http://www.bigemap.com/my/Lineback.js"></script> <style> body { margin: 0; padding: 0; } #container { position: absolute; top: 0; bottom: 0; width: 100%; } .bmgl-widget-credits { display: none; } #map { display: none; opacity: 0; } .toolbox { height: 300px; width: 200px; background-color: bisque; display: flex; flex-direction: column; position: absolute; top: 10px; left: 50px; z-index: 1; } .toolbox>li { margin-top: 20px; display: flex; } .toolbox>li>span { margin: 0 10px; } .toolbox>li>div>button { padding: 0 10px; cursor: pointer; margin: 3px; } </style> <title>Google Map Streets</title> </head> <body> <div id="container"></div> <div id="map"></div> <div class="toolbox"> <li> <span>高度:</span> <div> <button onClick="jian('gd')"> - </button> <span id="gdspan">50</span> <button onClick="add('gd')">+</button> </div> </li> <li> <span>角度:</span> <div> <button onClick="jian('jd')">-</button> <span id="jdspan">-3</span> <button onClick="add('jd')">+</button> </div> </li> <li> <span>速度:</span> <div> <button onClick="jian('sd')">-</button> <span id="sdspan">100</span> <button onClick="add('sd')">+</button> </div> </li> <li> <span>是否聚焦:</span> <div> <select onchange="setlookat(this.value)"> <option value="1">聚焦</option> <option value="2">不聚焦</option> </select> </div> </li> </div> <script> //高度 let gd = 200 //角度 let jd = -23 //速度 let sd = 100 let lookat = true let carshow = true let replay = true let my function init_earth(params) { bmgl.Config.HTTP_URL = "http://bigemap.com:9000"; BM.Config.HTTP_URL = "http://bigemap.com:9000"; var viewer = new bmgl.Viewer("container", { mapId: "bigemap.zhongkexingtu", requestRenderMode: false, }); var map = BM.map("map", "bigemap.zhongkexingtu", { center: [30.4, 104.5], zoom: 7, zoomControl: true, attributionControl: false, }); //定义线段数组 let linearr = [ [ 24.052854180336, 117.77287423610687 ], [ 24.052736163139343, 117.76613116264343 ], [ 24.052687883377075, 117.76526212692261 ], [ 24.052467942237854, 117.76374399662018 ], [ 24.05210316181183, 117.76218295097351 ], [ 24.050960540771484, 117.75919497013092 ], [ 24.049775004386902, 117.75666296482086 ], [ 24.049168825149536, 117.75541305541992 ], [ 24.048621654510498, 117.75388956069946 ], [ 24.048272967338562, 117.75229632854462 ], [ 24.0480637550354, 117.7503114938736 ], [ 24.0481173992157, 117.7483856678009 ], [ 24.048213958740234, 117.74764001369476 ], [ 24.04828369617462, 117.74726450443268 ], [ 24.048482179641724, 117.7462238073349 ], [ 24.049023985862732, 117.74337530136108 ], [ 24.049415588378906, 117.74092376232147 ], [ 24.049479961395264, 117.73954510688782 ], [ 24.049442410469055, 117.73835957050323 ], [ 24.049270749092102, 117.73713111877441 ], [ 24.049131274223328, 117.7360475063324 ], [ 24.04884159564972, 117.734534740448 ], [ 24.04835343360901, 117.73132145404816 ], [ 24.047951102256775, 117.72918105125427 ], [ 24.04758632183075, 117.72697627544403 ], [ 24.04729127883911, 117.7253133058548 ], [ 24.04681384563446, 117.72384345531464 ], [ 24.04608964920044, 117.72271156311035 ], [ 24.04536545276642, 117.72183179855347 ], [ 24.04434621334076, 117.72098422050476 ], [ 24.03879404067993, 117.71749198436737 ] ] let config = { sd:sd, jd:jd, lookat:lookat, replay:replay, carshow:carshow, // carurl:'./glb/car.glb' } //初始化回放对象 lb = new Lineback(viewer, map, linearr, config) lb.move() } function jian(type) { console.log(type); switch (type) { case 'gd': gd -= 100 lb.setgd(gd) break; case 'jd': jd -= 1 lb.setjd(jd) break; case 'sd': sd -= 100 lb.setsd(sd) break; } fz() } function add(type) { console.log(type); switch (type) { case 'gd': gd += 100 lb.setgd(gd) break; case 'jd': lb.setjd(jd) jd += 1 break; case 'sd': sd += 100 lb.setsd(sd) break; } fz() } function setlookat(val){ console.log(val); if (val == 1) { lb.setlookat(true) }else{ lb.setlookat(false) } } function fz() { document.getElementById('gdspan').innerText = gd document.getElementById('jdspan').innerText = jd document.getElementById('sdspan').innerText = sd } fz() init_earth() </script> </body> </html>
源码