3D地图制作

weixin_45353536

已于 2023-03-28 14:10:16 修改

阅读量160

点赞数

分类专栏： vue3+ts 文章标签： 3d javascript 前端

于 2023-03-19 17:27:09 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45353536/article/details/129652685

版权

本文档详细介绍了如何使用JavaScript和百度地图API创建3D地图，包括获取地图实例、设置3D皮肤、构建建筑物、添加标记以及实现交互效果。通过自定义皮肤和管理楼层数据，实现了动态展示和地图交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

需要和2D地图BMap一样在这里加上
在这里插入图片描述

一、3D原图

1.定义，异步加载，使用的时候再调用

export function MP3D(ak) {
   
  return new Promise(function (resolve, reject) {
   
    window.onload = function () {
   
      resolve(BMapGL);
    };
    const protocolStr = document.location.protocol;
    const scriptMap = document.createElement("script");
    scriptMap.type = "text/javascript";
    if (protocolStr === "https:") {
   
      // 后面加 &s=1 使用 https 默认为 0 ,但此处里面还是访问的 http 无效
      scriptMap.src =
        "https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=" +
        ak +
        "&s=3&callback=onload";
      // 手动添加mate标签
      const addMeta = (httpEquiv, content) => {
   
        const meta = document.createElement("meta");
        meta.content = content;
        meta.httpEquiv = httpEquiv;
        // document.getElementsByTagName('meta')[1].appendChild(meta);
        document
          .getElementsByTagName("head")[0]
          .insertBefore(meta, document.getElementsByTagName("meta")[1]);
      };
      addMeta("Content-Security-Policy", "upgrade-insecure-requests");
    } else {
   
      // 获取百度地图
      scriptMap.src =
        "http://api.map.baidu.com/api?v=1.0&&type=webgl&ak=" +
        ak +
        "&callback=onload"; //此为v1.0版本的引用方式
      // "http://api.map.baidu.com/api?v=2.0&ak=" + ak + "&callback=onload"; //此为v2.0版本的引用方式

      // script.src = "http://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=initialize";//此为v2.0版本的引用方式
      // http://api.map.baidu.com/api?v=1.4&ak=您的密钥&callback=initialize"; //此为v1.4版本及以前版本的引用方式
    }
    scriptMap.onerror = reject;
    document.head.appendChild(scriptMap);
  });
}

2.调用

import {
    MP3D } from "/@/utils/map/map";
const baidumap = ref(null);
const mapTrue = ref(false); // 如果已经添加了 baidu 的 script 标签，设置为 true ,此时监听到 data 的变化时才去执行 mapLabel(data)  //

防止当前页面刷新时报错 BMap 未定义
// 获取 BMap
//我这里下载一个个人版的ak就可以使用了，用自己的手机号注册了一个ak。企业版的我没用过。个人班是可以注册多个ak的，有客户端版本的，也有服务端版本的。
const ak = ref(“此处为百度地图申请的ak，使用自己的”);

MP3D(ak.value).then(BMapGL => {
   
  if (BMapGL) {
   
    mapTrue.value = true;
    creatMap();
  } else {
   
    mapTrue.value = false;
  }
});

3.创建地图实例和中心点

 var bmapgl = new BMapGL.Map(baidumap.value);
  var point = new BMapGL.Point(101.759972, 36.683583);
  bmapgl.centerAndZoom(point, 18);

二、3D皮肤

1.下载皮肤样式
在百度地图的官方插件中下载一个自己满意的皮肤，有很多，我选了一种

export const mapstyle = [
  {
   
    featureType: "land",
    elementType: "geometry",
    stylers: {
   
      visibility: "on",
      color: "#091220ff"
    }
  },
  {
   
    featureType: "water",
    elementType: "geometry",
    stylers: {
   
      visibility: "on",
      color: "#113549ff"
    }
  },
  {
   
    featureType: "green",
    elementType: "geometry",
    stylers: {
   
      visibility: "on",
      color: "#0e1b30ff"
    }
  },
  {
   
    featureType: "building",
    elementType: "geometry",
    stylers: {
   
      visibility: "on"
    }
  },
  {
   
    featureType: "building",
    elementType: "geometry.topfill",
    stylers: {
   
      color: "#113549ff"
    }
  },
  {
   
    featureType: "building",
    elementType: "geometry.sidefill",
    stylers: {
   
      color: "#143e56ff"
    }
  },
  {
   
    featureType: "building",
    elementType: "geometry.stroke",
    stylers: {
   
      color: "#dadada00"
    }
  },
  {
   
    featureType: "subwaystation",
    elementType: "geometry",
    stylers: {
   
      visibility: "on",
      color: "#113549B2"
    }
  },
  {
   
    featureType: "education",
    elementType: "geometry",
    stylers: {
   
      visibility: "on",
      color: "#12223dff"
    }
  },
  {
   
    featureType: "medical",
    elementType: "geometry",
    stylers: {
   
      visibility: "on",
      color: "#12223dff"
    }
  },
  {
   
    featureType: "scenicspots",
    elementType: "geometry",
    stylers: {
   
      visibility: "on",
      color: "#12223dff"
    }
  },
  {
   
    featureType: "highway",
    elementType: "geometry",
    stylers: {
   
      visibility: "on",
      weight: "4"
    }
  },
  {
   
    featureType: "highway",
    elementType: "geometry.fill",
    stylers: {
   
      color: "#12223dff"
    }
  },
  {
   
    featureType: "highway",
    elementType: "geometry.stroke",
    stylers: {
   
      color: "#fed66900"
    }
  },
  {
   
    featureType: "highway",
    elementType: "labels",
    stylers: {
   
      visibility: "on"
    }
  },
  {
   
    featureType: "highway",
    elementType: "labels.text.fill",
    stylers: {
   
      color: "#12223dff"
    }
  },
  {
   
    featureType: "highway",
    elementType: "labels.text.stroke",
    stylers: {
   
      color: "#ffffff00"
    }
  },
  {
   
    featureType: "highway",
    elementType: "labels.icon",
    stylers: {
   
      visibility: "on"
    }
  },
  {
   
    featureType: "arterial",
    elementType: "geometry",
    stylers: {
   
      visibility: "on",
      weight: "2"
    }
  },
  {
   
    featureType: "arterial",
    elementType: "geometry.fill",
    stylers: {
   
      color: "#12223dff"
    }
  },
  {
   
    featureType: "arterial",
    elementType: "geometry.stroke",
    stylers: {
   
      color: "#ffeebb00"
    }
  },
  {
   
    featureType: "arterial",
    elementType: "labels",
    stylers: {
   
      visibility: "on"
    }
  },
  {
   
    featureType: "arterial",
    elementType: "labels.text.fill",
    stylers: {
   
      color: "#2dc4bbff"
    }
  },
  {
   
    featureType: "arterial",
    elementType: "labels.text.stroke",
    stylers: {
   
      color: "#ffffff00"
    }
  },
  {
   
    featureType: "local",
    elementType: "geometry",
    stylers: {
   
      visibility: "on",
      weight: "1"
    }
  },
  {
   
    featureType: "local",
    elementType: "geometry.fill",
    stylers: {
   
      color: "#12223dff"
    }
  },
  {
   
    featureType: "local",
    elementType: "geometry.stroke",
    stylers: {
   
      color: "#ffffff00"
    }
  },
  {
   
    featureType: "local",
    elementType: "labels",
    stylers: {
   
      visibility: "on"
    }
  },
  {
   
    featureType: "local",
    elementType: "labels.text.fill",
    stylers: {
   
      color: "#979c9aff"
    }
  },
  {
   
    featureType: "local",
    elementType: "labels.text.stroke",
    stylers: {
   
      color: "#ffffffff"
    }
  },
  {
   
    featureType: "railway",
    elementType: "geometry",
    stylers: {
   
      visibility: "off"
    }
  },
  {
   
    featureType: "subway",
    elementType: "geometry",
    stylers: {
   
      visibility: "off",
      weight: "1"
    }
  },
  {
   
    featureType: "subway",
    elementType: "geometry.fill",
    stylers: {
   
      color: "#d8d8d8ff"
    }
  },
  {
   
    featureType: "subway",
    elementType: "geometry.stroke",
    stylers: {
   
      color: "#ffffff00"
    }
  },
  {
   
    featureType: "subway",
    elementType: "labels",
    stylers: {
   
      visibility: "on"
    }
  },
  {
   
    featureType: "subway",
    elementType: "labels.text.fill",
    stylers: {
   
      color: "#979c9aff"
    }
  },
  {
   
    featureType: "subway",
    elementType: "labels.text.stroke",
    stylers: {
   
      color: "#ffffffff"
    }
  },
  {
   
    featureType: "continent",
    elementType: "labels",
    stylers: {
   
      visibility: "on"
    }
  },
  {
   
    featureType: "continent",
    elementType: "labels.icon",
    stylers: {
   
      visibility: "on"
    }
  },
  {
   
    featureType: "continent",
    elementType: "labels.text.fill",
    stylers: {
   
      color: "#2dc4bbff"
    }
  },
  {
   
    featureType: "continent",
    elementType: "labels.text.stroke",
    stylers: {
   
      color: "#ffffff00"
    }
  },
  {
   
    featureType: "city",
    elementType: "labels.icon",
    stylers: {
   
      visibility: "off"
    }
  },
  {
   
    featureType: "city",
    elementType: "labels",
    stylers: {
   
      visibility: "on"
    }
  },
  {
   
    featureType: "city",
    elementType: "labels.text.fill",
    stylers: {
   
      color: "#2dc4bbff"
    }
  },
  {
   
    featureType: "city",
    elementType: "labels.text.stroke",
    stylers: {
   
      color: "#ffffff00"
    }
  },
  {
   
    featureType: "town",
    elementType: "labels.icon",
    stylers: {
   
      visibility: "on"
    }
  },
  {
   
    featureType: "town",
    elementType:<

最低0.47元/天解锁文章