在线制作自己的地图并使用


根据上一节的内容,您已经创建了一个SuperMap账户。登录SuperMap Online后,您可以看到“我的内容”中,“我的地图”等都还是空的。本节将介绍如何在线制作您自己的地图“我的足迹”,并在您的网页中使用该地图。

在线制作地图

在“我的地图”页面,点击“创建地图”按钮,进入地图编辑器。

Step1 选择底图

在地图编辑器的左侧,选择一个底图,本例使用默认底图

Step2 添加标注图层"足迹"

点击切换到“图层”页面,在“添加图层”按钮下,选择“添加标注图层”,在弹出的对话框中设置您的图层名称,如“足迹”,点击“确定”按钮。

Step3 为新图层添加要素

点击“家乡”图层对应的点符号(p),然后在右侧的地图窗口中,通过鼠标缩放和平移,在地图上找到您的家乡。点击您的家乡所在的位置,地图上会出现一个“属性编辑”对话框,根据您的需要为您添加的要素输入一个标题和描述。

继续添加其他位置,如您上学的城市、工作过的城市等,您可以为这些位置选择不同的符号样式。然后通过线要素(l)将这些位置串起来,绘制您的成长足迹。

f

Step4 保存地图

点击页面左上角的“保存”按钮,保存您制作的地图。您可以为地图设置标题(如:我的足迹)、标签以及详细的描述信息。点击“确定”按钮完成保存操作。地图保存后,您可以看到浏览器的地址栏中显示了地图的id,本例中为893(viewer/893)。这个id就是将地图嵌入网页中时需要使用的id。

Step5 分享地图

您可以将地图分享给其他人,点击“共享”按钮分享地图。或者在“我的地图”中,找到上一步保存的地图“我的足迹”,点击共享设置列的“分享”按钮。在弹出的对话框中,点击“复制链接”即可把地图分享至您需要的地方。

本例的分享链接为:http://www.supermapol.com/apps/viewer/893/share?key=bjzr7NZmCw5a4NfVYdcUjlJo

在网页中嵌入地图

在网页中嵌入地图的方法与使用SuperMap Online的其他地图方式一样,您只需要将viewer.previewMapById(893)中的id设置为您自己的地图,本例为:893。

<script>
    var url="http://www.supermapol.com";
    var viewer=new SuperMap.Cloud.MapViewer(url,"map");
    viewer.previewMapById(893);
</script>

在线演示与源码编辑

在线演示 编辑源码

<!DOCTYPE html>
<html>
<head>
    <title>GetStarted</title>
    <style>
        .mapcontainer{
            height: 600px;
        }
    </style>
      <script src='http://www.supermapol.com/resources/api/libs/SuperMap.Include.js'></script>
</head>
<body>
    <div id="map" class="mapcontainer"></div>
    <script>
        var url="http://www.supermapol.com";
        var viewer=new SuperMap.Cloud.MapViewer(url,"map");
        viewer.previewMapById(893);
    </script>
</body>
</html>

Where to go next

如果您手上已经有了GIS数据,您可能会希望将您的GIS数据直接发布成地图服务