高德地图中加载three.js（vue中）（封装

这几天公司有一个要结合高德地图的智慧园区的项目（大致就是在3d地图中加载自己的three.js模型）

1.首先要引入高德地图

官方文档给出来的引用方法

<template><div id="container"></div>
</template><script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {data() {return {map: null,};},mounted() {//DOM初始化完成进行地图初始化this.initMap();},methods: {initMap() {AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等}).then((AMap) => {this.map = new AMap.Map("container", {//设置地图容器idviewMode: "3D", //是否为3D地图模式zoom: 5, //初始化地图级别center: [105.602725, 37.076636], //初始化地图中心点位置});}).catch((e) => {console.log(e);});},},
};
</script><style  scoped>
#container {padding: 0px;margin: 0px;width: 100%;height: 800px;
}
</style>

因为新的key中增加了秘钥（不加载的话，我们的自定义地图无法加载）

created() {window._AMapSecurityConfig = {securityJsCode:"",//初始化时加载秘钥};},

2.接下来就是加载three.js了（这就是封装完成的组件）

<template><!-- 高德地图加载器 --><div class="geomap" ref="geomap" id="container"></div>
</template><script>
import * as THREE from "three"; //三维
import AMapLoader from "@amap/amap-jsapi-loader"; //高德地图export default {name: "geomap", //高德地图加载器props: {// 传入要获取的地图信息AMapinfo: {type: [Object],default: () => {return {version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等amap: {rotateEnable: false, //控制地图是否可以旋转pitchEnable: false, //控制地图是否可以倾斜pitch: 65, //初始化角度viewMode: "3D", //是否为3D地图模式zoom: 20, //初始化地图级别center: [121.187344, 31.46736], //初始化地图中心点位置mapStyle: "amap://styles/id", //初始化地图样式},};},},//  传入模型函数initLoader: {type: [Function],},// 传入光源数组lightlist: {type: [Array],default: () => {return [{type: "AmbientLight", //光的类型color: 0xffffff, //光的颜色intensity: 1, //光照强度posiy: [0, 0, 0], //光照位置},];},},},data() {return {map: null, //地图对象scene: null, //场景对象Scenecamera: null, //相机对象render: null, //渲染器对象isclick: null, //判断鼠标状态customCoords: null, //初始化数据转换工具security: "", // 初始化时加载秘钥key: "", // 申请好的Web端开发者Key，首次调用 load 时必填gllayer: null, //three数据isadd: false, //是否添加aminonte: true,};},created() {window._AMapSecurityConfig = {securityJsCode: this.security,};},mounted() {// 初始化地图数据this.initMap();},methods: {// 添加全局方法addmeth() {// 设置在什么缩放比例的时候隐藏this.map.on("zoomend", () => {if (this.map.getZoom() < 16.9) {this.map.remove(this.gllayer);this.isadd = true;} else {if (this.isadd) {this.map.add(this.gllayer);this.isadd = false;}}});// 监听窗口尺寸变化window.addEventListener("resize", this.changeSize, false);// 监听鼠标按下window.addEventListener("mousedown", this.mouseDown, false);//  监听鼠标移动window.addEventListener("mousemove", this.mouseMove, false);// 监听鼠标弹起window.addEventListener("mouseup", this.mouseUp, false);},// 添加3daddthree() {// 初始化数据转换工具this.customCoords = this.map.customCoords;// 经纬度数据转换this.customCoords.lngLatsToCoords([this.AMapinfo.amap.center]);// 引入three图层this.gllayer = new AMap.GLCustomLayer({// 图层的层级czIndex: 2000,// 初始化的操作，创建图层过程中执行一次。init: (gl) => {this.render = new THREE.WebGLRenderer({context: gl, // 地图的 gl 上下文alpha: true,});//  初始化场景对象this.initScene();// 初始化模型this.initLoader();// 初始化光源this.initLight();// 初始化相机this.initCamera();// 自动清空画布这里必须设置为 false，否则地图底图将无法显示// 这里我们的地图模式是 3D，所以创建一个透视相机，// 相机的参数初始化可以随意设置，因为在 render 函数中，每一帧都需要同步相机参数，//因此这里变得不那么重要。// 如果你需要 2D 地图（viewMode: '2D'），那么你需要创建一个正交相机// 环境光照和平行光this.render.autoClear = false;},render: () => {this.renderer();},});// 把three图层引入地图this.map.add(this.gllayer);// 渲染图层this.animate();// 设置动画this.tweenUpdate();},// 监听鼠标按下mouseDown(event) {this.isclick = {clientX: event.clientX,clientY: event.clientY,};},// 监听鼠标移动mouseMove(event) {this.aminonte = false;if (!this.isclick) {if (this.$refs.geomap) {var list = this.countmouse(event);if (list.length > 0) {// 传出鼠标移动事件this.$emit("change", "move", list);}}}},// 监听鼠标弹起mouseUp(event) {// 如果相等说明是点击事件if ((this.isclick.clientX === event.clientX) &(this.isclick.clientY === event.clientY)) {// 传出点击事件this.isclick = null;if (this.$refs.geomap) {var list = this.countmouse(event);if (list.length > 0) {this.$emit("change", "click", list);}}} else {this.isclick = null;}},// 判断当前点击的事件countmouse(event) {let raycaster = new THREE.Raycaster();let mouse = new THREE.Vector2();//将鼠标点击位置的屏幕坐标转换成threejs中的标准坐标var dom = this.$refs.geomap.getBoundingClientRect();if (event.clientX >= dom.left &&event.clientY >= dom.top &&event.clientX <= dom.left + this.$refs.geomap.offsetWidth &&event.clientY <= dom.top + this.$refs.geomap.offsetHeight) {mouse.x = (event.clientX / this.$refs.geomap.offsetWidth) * 2 - 1;mouse.y = -(event.clientY / this.$refs.geomap.offsetHeight) * 2 + 1;// 通过鼠标点的位置和当前相机的矩阵计算出raycasterraycaster.setFromCamera(mouse, this.camera);// 获取raycaster直线和所有模型相交的数组集合var list = raycaster.intersectObjects(this.scene.children, true);if (list.length > 0) {return list;} else {return [];}} else {return [];}},// 监听尺寸变化changeSize() {//窗口宽高比var k = this.$refs.geomap.offsetWidth / this.$refs.geomap.offsetHeight;     this.camera.aspect = k;this.camera.updateProjectionMatrix();},// 初始化地图数据initMap() {AMapLoader.load({key: this.key,version: this.AMapinfo.version,plugins: this.AMapinfo.plugins,}).then((AMap) => {// 初始化地图this.map = new AMap.Map("container", this.AMapinfo.amap);// 监听事件this.addmeth();// 添加动画this.addthree();}).catch((e) => {this.$message.error(e);});},// 初始化场景对象initScene() {// 初始化场景this.scene = new THREE.Scene();// 旋转场景this.scene.rotation.x = (Math.PI / 180) * 90;this.scene.rotation.y = (Math.PI / 180) * -58;this.scene.scale.set(1.18, 1.18, 1.18);// 创建三维坐标系var axesHelper = new THREE.AxesHelper(100);this.scene.add(axesHelper);},// 初始化光源initLight() {// 遍历添加光源this.lightlist.forEach((item) => {var light = new THREE[item.type](item.color, item.intensity);light.position.set(item.posiy[0], item.posiy[1], item.posiy[2]); //点光源位置if (item.type === "DirectionalLight") {}this.scene.add(light);});},// 初始化相机initCamera() {this.camera = new THREE.PerspectiveCamera(60,this.$refs.geomap.offsetWidth / this.$refs.geomap.offsetHeight,100,1 << 30);},// 渲染器对象renderer() {// 这里必须执行！！重新设置 three 的 gl 上下文状态。this.render.state.reset();var { near, far, fov, up, lookAt, position } =this.customCoords.getCameraParams();// 2D 地图下使用的正交相机// 这里的顺序不能颠倒，否则可能会出现绘制卡顿的效果。this.camera.near = near;this.camera.far = far;this.camera.fov = fov;this.camera.position.set(...position);this.camera.up.set(...up);this.camera.lookAt(...lookAt);this.camera.updateProjectionMatrix();// 2D 地图使用的正交相机参数赋值//   this.camera.top = top;//   this.camera.bottom = bottom;//   this.camera.left = left;//   this.camera.right = right;//   this.camera.position.set(...position);//   this.camera.updateProjectionMatrix();this.render.render(this.scene, this.camera);},// 动画animate() {// 渲染时刷新地图this.map.render();//   添加了一个旋转地图的动画if (this.aminonte) {var totation = this.map.getRotation();// -360 - 360 范围// 在-180的时候重置为180 （aminonte是停止一下动画的if (totation > -180) {this.map.setRotation((totation - 0.2) % 360, true);} else if (totation <= -180) {this.aminonte = false;this.map.setRotation(180, true);this.aminonte = true;}}// 自动刷新requestAnimationFrame(this.animate);},// 设置动画tweenUpdate() {requestAnimationFrame(this.tweenUpdate);this.$tweener.update();},// 运动动画tweenobj(object, y) {this.$tween.fade(object.position,{x: object.position.x,y: object.position.y + y,z: object.position.z,},1000,0,this.$tweener.Easing.Cubic.InOut);},},
};
</script><style lang="less" scoped>
// 高德地图加载器
.geomap {width: 100%;height: 100%;color: transparent;
}
</style>

这里也是使用tween.js进行一些动画,只按照这篇文章的话可能缺少一些依赖

3.使用方法

使用的方法和我的另一篇文章一样，链接放下面了

vue中使用three.js加载各种模型文件（obj,mtl,fbx..）(封装

你可能缺少的依赖

//three依赖
npm i three 或者 yarn add three//tween.js依赖
npm i @tweenjs/tween.js 或者 yarn add @tweenjs/tween.js //obj,mtl 文件加载依赖
npm i three-obj-mtl-loader 或者 yarn add three-obj-mtl-loader //高德地图
npm i @amap/amap-jsapi-loader 或者 yarn add @amap/amap-jsapi-loader

就是这样，下班！！！

高德地图中加载three.js（vue中）（封装相关推荐

ios 高德地图加载瓦片地图_IOS 高德地图 API 加载 WMS 服务
IOS 高德地图 API 加载 WMS 服务本文主要介绍通过自定义高德地图 MATileOverlay 接口,添加 WMS 服务到地图上.废话少说,先贴代码. 代码自定义类 WMSTileOver ...
web高德地图怎么加载离线地图_基于 QGIS 在内网中离线加载卫星地图的方法
1. 概述我们之前为大家分享过在三维地球开源平台离线加载卫星影像的方法,主要包括基于桌面端的OsgEarth开源三维地球和基于Web端的Cesium开源三维地球等平台的局域网离线影像加载. 另外,也 ...
高德地图 sdk 加载 geoserver 发布的瓦片地图服务
前言最近,碰到了需求,想要在高德 sdk 中使用在 geoserver 里面发布的瓦片地图. 还好经过一番研究,在其官方文档中发现,从新版本(v1.4.3开始)的高德 sdk 开始,已经支持加载第三 ...
如何利用高德地图URI加载区域边界
高德URI 以下是高德地图API官网中URI API以及行政区查询的相关页面展示.在行政区域查询中对相应的参数也有详细的描述. 利用URI API进行调用的实例:在返回的数据中districts中包含 ...
iframe中加载html,在iframe中加载外部html并访问内容
我只需要提供src属性即可加载外部页面时,我需要知道如何访问iframe内容.在iframe中加载外部html并访问内容我正在使用iframe在jquery对话框中加载HTML页面.在这里,我不能修 ...
div中加载html js,Div里面载入另一个页面的实现(Ajax取代框架)
随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便今天突然遇到一个问题,那就是需要导入另一个页 ...
js文件中加载其他js文件
1:使用sea.js等第三方库进行加载: 2:工程化前端项目使用import即可 3:非工程化前端: 参照html文件引入js的方式,可以通过动态添加script标签实现js文件的异步加载,代码如下: ...
JS文件中加载jquery.js(JS文件添加其他JS文件)
最近有一个需求: 1.在一个html中只能引入一个JS文件不能有JS代码和其他JS文件的引入 2.这个JS文件中还要引入其他的JS文件 3.所有JS功能都写在这个JS文件中这些代码用到了jque ...
web高德地图怎么加载离线地图_春节变胖了？高德地图隐藏的实用跑步功能想怎么跑都随你...
春节期间,好吃的太多,胡吃海塞管不住嘴,一不小心就会变胖.面对我们变粗的腰围.腿围,春节过后抓紧时间跑步减肥,实在是太有必要了. 可是怎么跑圈最合理呢?这时候,高德地图的跑步功能"周边跑步路 ...

高德地图中加载three.js（vue中）（封装

1.首先要引入高德地图

官方文档给出来的引用方法

因为新的key中增加了秘钥（不加载的话，我们的自定义地图无法加载）

2.接下来就是加载three.js了（这就是封装完成的组件）

3.使用方法

你可能缺少的依赖

高德地图中加载three.js（vue中）（封装相关推荐

最新文章

热门文章