【Babylon提升】加载wms瓦片地图
资源内容介绍
【Babylon提升】加载wms瓦片地图 <template> <canvas class='map-box' id="map"></canvas></template><script lang="ts">import * as BABYLON from 'babylonjs'// debuggerimport 'babylonjs-loaders'import 'babylonjs-inspector'import MapManger from './MapManger/index.ts'import axios from 'axios';export default { name: 'HelloWorld', props: { msg: String }, data() { return { manager: undefined } }, async mounted (){ const canvas = document.getElementById("map") // Get the canvas element const engine = new BABYLON.Engine(<HTMLCanvasElement>canvas, true, { disableWebGL2Support: true, stencil: true }, true) // Generate the BABYLON 3D engine engine.enableOfflineSupport = false // 关闭索引数据库 engine.doNotHandleContextLost = true // 关闭对上下文丢失恢复的支持 const scene = new BABYLON.Scene(engine); const camera = new BABYLON.ArcRotateCamera("Camera", -0.8028206668023489, 0.9460847909507382, 18.063850187886946, new BABYLON.Vector3(0.058185758103861104,-0.03608737237544263,0.025743706286165586), scene); camera.attachControl(canvas, true); const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene); // 循环渲染 engine.runRenderLoop( () => { scene?.render(true, true) }); // 窗口自适应 window.addEventListener("resize", function () { engine.resize(); }); const mapManger = new MapManger([120.16098814531,30.160642363432] , 7) mapManger.createTiled(scene, [120.16098814531,30.160642363432]) // 加载xyz坐标系 const node = new BABYLON.TransformNode('xyzNode') const linex = BABYLON.MeshBuilder.CreateLines( 'axisX', { colors: [ new BABYLON.Color4(1, 0, 0, 1), new BABYLON.Color4(1, 0, 0, 1) ], points: [new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(1000, 0, 0)] }, scene ) const liney = BABYLON.MeshBuilder.CreateLines( 'axisY', { colors: [ new BABYLON.Color4(0, 1, 0, 1), new BABYLON.Color4(0, 1, 0, 1) ], points: [new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(0, 1000, 0)] }, scene ) const linez = BABYLON.MeshBuilder.CreateLines( 'axisZ', { colors: [ new BABYLON.Color4(0, 0, 1, 1), new BABYLON.Color4(0, 0, 1, 1) ], points: [new BABYLON.Vector3(0, 0, 0), new BABYLON.Vector3(0, 0, 1000)] }, scene ) linex.parent = node liney.parent = node linez.parent = node this.test() }, methods: { // 存储 test() { } }}</script><style lang="stylus" scoped>.map-box width: 100% height: 100%.css-container z-index: 1;.base{ width: 500px; height: 500px; z-index: 1; background-color: #7ec8ff; position: absolute;}.echarts-box { width: 1000px; height: 500px; position: absolute; display: none}</style>