leaflet实现3d地图及室内地图(开源库)

559次阅读
没有评论

https://github.com/wrld3d/wrld.js

WRLD JavaScript API使您可以轻松地将精美的3D地图嵌入到任何支持WebGL的现代浏览器的任何网页中。有关运行中的3D地图的示例,请参见https://www.wrld3d.com/wrld.js/examples/

它基于Leaflet.js,提供了用于在网页中嵌入3D地图的熟悉的API。

例子

您可以在我们的网站上找到逐个特征的示例

原料药

一个完整的API参考也可以在我们的网站。

入门

在开始之前,您需要获取一个API密钥,您可以通过在wrld3d.com上注册一个帐户并选择Digital Twin计划来完成-免费试用!

您可以轻松地在任何网页中嵌入3D地图。下面的代码显示了一个简单的示例:

<!-- Create a map in an HTML element with wrld.js -->
<!DOCTYPE HTML>
<html>
  <head>
    <script src="https://cdn-webgl.wrld3d.com/wrldjs/dist/latest/wrld.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css" rel="stylesheet" />
  </head>
  <body>
    <div id="map" style="width: 400px; height: 400px;"></div>
    <script type="text/javascript">
      var map = L.Wrld.map("map", "your_api_key_here");
    </script>
  </body>
</html>

只需替换your_api_key_herewrld3d.com的API密钥即可

支持

如果您有任何问题,错误报告或功能请求,请随时向GitHub上的wrld.js提交问题跟踪器

构建API

您可能希望自己构建API。这很容易做到,只需要安装node.js即可

要求

  • Node.js(已测试v4.4.1)
  • npm(与Node.js一起安装)

建筑

请按照以下步骤构建API:

  1. 克隆此仓库: git clone https://github.com/wrld3d/wrld.js.git
  2. 在仓库的根目录中,运行npm install以安装开发依赖项。
  3. 仍然在仓库的根目录中,运行命令npm run build

这将创建文件dist/wrld.jsdist/wrld.min.js分别是API和最小化形式。

您还可以使用该命令npm run watch来连续构建,监视文件中的更改。

leaflet实现3d地图及室内地图(开源库)

仅显示室内地图

隐藏外部视图,仅显示室内地图。使用Switch Indoor Map按钮在室内地图之间切换。 leaflet实现3d地图及室内地图(开源库)

<!DOCTYPE HTML>
<html>
  <head>
    <script src="https://cdn-webgl.wrld3d.com/wrldjs/dist/latest/wrld.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.1/leaflet.css" rel="stylesheet" />

    <link href="https://cdn-webgl.wrld3d.com/wrldjs/addons/resources/latest/css/wrld.css" rel="stylesheet"/>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
    <script src="https://cdn-webgl.wrld3d.com/wrldjs/addons/indoor_control/latest/indoor_control.js"></script>

  </head>

  <body>
  <div style="position: relative">
<style>
  .loading-screen {
      position: absolute;
      right: 0px;
      left: 0px;
      top: 0px;
      bottom: 0px;
      z-index: 150;
      background-color: rgb(61, 68, 71);
      height: 400px;
  }

  .hidden {
      visibility: hidden;
  }

  .loading-text {
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      height: inherit;
      font-family: amsibold,'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
  }

  .eegeo-indoor-control #eegeo-exit-interior-button-container { 
      visibility: hidden;
  }
</style>

<div id="loading-screen" class="loading-screen">
  <div class="loading-text">Loading...</div>
</div>
<div id="topRightButtons" style="position: absolute; right: 0; bottom: 20px; z-index: 20">
  <button type="button" onclick="switchIndoorMap()">Switch Indoor Map</button>
</div>
<div id="widget-container" class="wrld-widget-container"></div>
<div id="map" style="height: 400px"></div>
<script>

  const indoorMaps = ["westport_house", "EIM-e16a94b1-f64f-41ed-a3c6-8397d9cfe607", "intercontinental_hotel_8628", "70f9b00f-8c4f-4570-9a23-62bd80a76f8a"];
  var indoorMapLoaded = {};
  var currentIndoorMapIndex = 0;
  var currentIndoorMap = indoorMaps[currentIndoorMapIndex];

  var map = L.Wrld.map("map", "your_api_key_here", {
    center: [56.459993, -2.978231],
    indoorsEnabled: true,
    drawClearColor: "#3d4447",
    indoorMapBackgroundColor: "#3d4447"
  });

  var indoorControl = new WrldIndoorControl("widget-container", map);
  var isShowingLoadingScreen = true;

  setLoadingScreenVisibility(isShowingLoadingScreen);

  function onIndoorMapEntered(event) {
    if (isShowingLoadingScreen) {
      if (currentIndoorMap in indoorMapLoaded && indoorMapLoaded[currentIndoorMap]) {
        setLoadingScreenVisibility(false);
      }
      else {
        indoorMapLoaded[currentIndoorMap] = true;
        setTimeout(() => {
          setLoadingScreenVisibility(false);
        }, 500);
      }
    }
  }

  function onInitialStreamingComplete() {
    enterCurrentIndoorMap();
  }

  function setLoadingScreenVisibility(visible) {
    var className = visible ? "loading-screen" : "loading-screen hidden";
    var loadingScreen = document.getElementById("loading-screen");
    loadingScreen.className = className;
    isShowingLoadingScreen = visible;
  }

  function enterCurrentIndoorMap() {
    if (map.indoors.isIndoors()) {
      map.indoors.exit();
    }
    map.indoors.enter(currentIndoorMap, {
          animate: false
    });
  }

  var switchIndoorMap = function () {
    currentIndoorMapIndex = (currentIndoorMapIndex + 1) % indoorMaps.length;
    currentIndoorMap = indoorMaps[currentIndoorMapIndex];

    if (!isShowingLoadingScreen) {
      setLoadingScreenVisibility(true);
      enterCurrentIndoorMap();
    }
  }

  function onIndoorMapEnterFailed(event) {
    console.log("onIndoorMapEnterFailed");
  }

  map.on("initialstreamingcomplete", onInitialStreamingComplete)
  map.indoors.on("indoormapenter", onIndoorMapEntered);
  map.indoors.on("indoormapenterfailed", onIndoorMapEnterFailed);
</script>

  </div>
  </body>
</html>