快速上手

638字约2分钟

2024-11-14

本页目标

用 CDN 方式，5 分钟跑通第一个 Mars2D 地图。

Mars2D支持多种集成方式，可以在下一篇教程中查看所有方式。在本章为了方便快速演示，我们以从CDN上获取为例，介绍如何快速安装及使用Mars2D。

引入 Mars2D

在电脑新建一个目录来存放代码文件，比如 D:\test\, 通过VS Code打开此项目目录。

VS Code的使用请参考开发环境搭建章节教程

在项目目录下新建一个 D:\test\index.html 文件，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!--引入leaflet基础lib-->
    <link href="https://registry.npmmirror.com/leaflet/latest/files/dist/leaflet.css" rel="stylesheet" type="text/css" />
    <script src="https://registry.npmmirror.com/leaflet/latest/files/dist/leaflet.js" type="text/javascript"></script>

    <!--引入mars2d库lib-->
    <link href="https://registry.npmmirror.com/mars2d/latest/files/mars2d.css" rel="stylesheet" type="text/css" />
    <script src="https://registry.npmmirror.com/mars2d/latest/files/mars2d.js" type="text/javascript"></script>
  </head>
</html>

在VS Code中打开这个 D:\test\index.html，通过右键采用Open with live server方式运行，你会看到一片空白。但是不要担心，打开控制台确认没有报错信息，并有正确的mars2d版本等信息提示，就可以进行下一步。

准备DIV容器

在绘二维地图前我们需要为 Mars2D 准备一个DIV DOM 容器，并注意设置 div 的 css 高宽样式（可以直接用内置样式mars2d-container），在刚才的例子 </head> 之后添加，如下：

<div id="mars2dContainer" class="mars2d-container"></div>

编写渲染代码

然后就可以通过 new mars2d.Map方法初始化一个 mars2d 实例并通过传入 mapOptions 参数生成一个简单的二维地图。

// Map的参数请看API文档：http://mars2d.cn/api/Map.html
const map = new mars2d.Map("mars2dContainer", {
  basemaps: [{ name: "高德地图", type: "gaode", layer: "vec", show: true }]
})

完整代码及效果

下面是完整代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>mars2d</title>
    <!--引入leaflet基础lib-->
    <link href="https://registry.npmmirror.com/leaflet/latest/files/dist/leaflet.css" rel="stylesheet" type="text/css" />
    <script src="https://registry.npmmirror.com/leaflet/latest/files/dist/leaflet.js" type="text/javascript"></script>

    <!--引入mars2d库lib-->
    <link href="https://registry.npmmirror.com/mars2d/latest/files/mars2d.css" rel="stylesheet" type="text/css" />
    <script src="https://registry.npmmirror.com/mars2d/latest/files/mars2d.js" type="text/javascript"></script>
    <style>
      html,
      body,
      .mars2d-container {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <div id="mars2dContainer" class="mars2d-container"></div>
    <script type="text/javascript">
      var map = new mars2d.Map("mars2dContainer", {
        zoom: 13, //地图层级
        center: { lng: 117.240601, lat: 31.827107 }, //地图中心点
        basemaps: [
          { name: "高德地图", type: "gaode", layer: "vec", show: true } //底图
        ]
      })
    </script>
  </body>
</html>

这样你的第一个二维地图就诞生了！

新窗口查看