外观
快速上手
585字约2分钟
2024-11-14
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>
这样你的第一个二维地图就诞生了!
新窗口查看