在线使用SuperMap Online上的地图

本例将带领您了解SuperMap Online的在线地图（http://www.supermapol.com/web/maps ），并在网页中快速插入其中一幅地图。

Step1 创建一个页面GettingStarted.html，添加地图容器

从零开始，您可以：

  • 先创建一个页面GettingStarted.html
  • 然后在页面中创建一个用于显示地图的容器：一个div，并设置id = "map"
  • 定义样式，如高度设为600px
<!DOCTYPE html>
<html>
<head>
    <title>GetStarted</title>
    <style>
        .mapcontainer{
            height: 600px;
        }
    </style>
</head>
<body>
<div id = "map" class="mapcontainer"></div>
</body>
</html>

Step2 引入在线JS库

在GettingStarted.html中的</body>标签前，加入引用的脚本，如下：

<script src='http://www.supermapol.com/resources/api/libs/SuperMap.Include.js'></script>

其中，SuperMap.Include.js是SuperMap Online提供的在线脚本，可以很方便地嵌入地图。

Step3 在页面中插入SuperMap Online在线地图

在GettingStarted.html中，插入“中国地图”（id为493）。使用SuperMap.Cloud.MapViewer(url,"map")创建一个地图浏览的窗口，url为SuperMap Online的网址，"map"为Step1中创建的地图容器的id。 代码如下：

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

在线演示与源码编辑

将GettingStarted.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(493);
    </script>
</body>
</html>

Learn More

如果您想把自己的地图数据在线发布、展示并在API中调用，这时候您可以通过SuperMap Online来上传、发布您的地图数据。具体操作方法，请参考：使用上传的GIS数据。

results matching ""

    No results matching ""