快速上手

约 642 字大约 2 分钟

2025-02-13

获取 mirage2d

mirage2d 支持多种下载方式，可以在下一篇教程获取 mirage2d SDK类库中查看所有方式。

这里，我们以从 CDN 上获取为例，介绍如何快速安装。

引入 mirage2d

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

VS Code 的使用请参考开发环境搭建章节教程在项目目录下新建一个D:\test\index.html文件，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    
    <!--引入mirage2d库lib-->
    <link
      href="https://unpkg.com/mirage2d/dist/mirage2d.css"
      rel="stylesheet"
      type="text/css"
    />
    <script
      src="https://unpkg.com/mirage2d/dist/mirage2d.js"
      type="text/javascript"
    ></script>
  </head>
</html>

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

绘制一个简单的二维地图

在绘二维地图前我们需要为 mirage2d 准备一个定义了高宽的 DOM 容器。在刚才的例子 </head>之后，添加：

<body>
  <!-- 为 mirage2d 准备一个定义了宽高的 DOM -->
  <div id="mirage2dContainer" class="mirage2d-container"></div>
</body>

然后就可以通过[new mirage2d.Map] 方法初始化一个 mirage2d 实例并通过传入 mapOptions 参数生成一个简单的二维地图，下面是完整代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>mirage2d</title>

    <!--引入mirage2d库lib-->
    <link
      href=" https://cdn.jsdelivr.net/npm/mirage2d@1.2.5/dist/css/style.css"
      rel="stylesheet"
      type="text/css"
    />

    <script src="
    https://cdn.jsdelivr.net/npm/mirage2d@1.2.5/dist/mirage2d.umd.min.js
    "></script>
    <style>
      html,
      body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <!-- id="map" 暂时不可更改 -->
    <div id="map" class="mirage2d-container"></div>

    <script type="text/javascript">
      let mapOptions = {
        map: {
          zoom: 5,
          center: {
            lng: 104,
            lat: 37,
          },
          minZoom: 2,
          maxZoom: 26,
          basemap: "天地图卫星",
          centerAutoLevel: 15,
          controls: {
            scale: true,
            locationBar: {
              crs: "CGCS2000_GK_Zone_3",
              template:
                "<div style='float: left;margin-right: 15px'>经度:{lng}</div> <div style='float: left;margin-right: 15px'>纬度:{lat}</div> <div style='float: left;margin-right: 15px'>横{crsx}  纵{crsy}</div> <div style='float: left;margin-right: 15px'>层级:{level}</div>",
            },
          },
          basemaps: [
            {
              pid: 10,
              name: "天地图卫星",
              type: "TileGroupLayer",
              icon: "image/basemaps/02/天地图卫星.png",
              layers: [
                {
                  name: "底图",
                  type: "xyz",
                  layertype: "img_d",
                  url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=9d8764edc63bda32cbca6c23a0286cc4",
                },
                {
                  name: "注记",
                  type: "xyz",
                  layertype: "img_z",
                  url: "http://t{0-7}.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk=9d8764edc63bda32cbca6c23a0286cc4",
                },
              ],
            },
          ],
        },
      };
      let map = new mirage2d.Map("map", mapOptions);
    </script>
  </body>
</html>

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

新窗口查看