快速入门 ​

1 SDK介绍 ​

CompassEngine GL JS是一个JavaScript库，它使用WebGL从矢量切片和CompassEngine样式渲染交互式地图。它是CompassEngine GL生态系统的一部分，其中包括CompassEngine Mobile，这是一个用C ++编写的兼容渲染器，具有桌面和移动平台的绑定。

2 获取SDK ​

地图SDK是由JavaScript语言编写的，您在使用之前需要通过script标签将SDK引用到页面中：

<script src="http://172.16.108.201:8990/static/lib/compassengine-gl.js"></script>
<link href="http://172.16.108.201:8990/static/lib/compassengine-gl.css" rel="stylesheet" />

3 兼容性问题 ​

浏览器：Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome

操作系统：Windows、Mac、Linux

4 调用示例 ​

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title> 
    <script src="http://172.16.108.201:8990/static/lib/compassengine-gl.js"></script>
    <link href="http://172.16.108.201:8990/static/lib/compassengine-gl.css" rel="stylesheet" />
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
    <div id='map'></div>
    <script>
        var map = new compassengine.Map({
            container: 'map',
            style: "http://172.16.108.201:8990/api/v1/styles/1",
            zoomOffset: -1,
            epsg: 'EPSG:4490'
        });
    </script>
</body>
</html>

您可以复制示例代码到您的剪贴板中。

下面来说明这些步骤：

一、准备页面 根据HTML 标准，每一份HTML 文档都应该声明正确的文档类型，我们建议您使用最新的符合HTML5 规范的文档声明：

<!DOCTYPE html>

二、引入SDK文件

<script src="http://172.16.108.201:8990/static/lib/compassengine-gl.js"></script>
<link href="http://172.16.108.201:8990/static/lib/compassengine-gl.css" rel="stylesheet" />

三、创建地图容器元素

<div id='map'></div>

地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。将div元素的宽和高分别设置为100%，使其充满整个屏幕，或者您也可以计算浏览器窗口的大小并进行设置。

四、创建地图实例

var map = new compassengine.Map({
    container: 'map',
    style: "http://172.16.108.201:8990/api/v1/styles/1"
    zoomOffset: -1,
    epsg: 'EPSG:4490'
});

参数container指定使用的地图容器id。

参数style用于指定使用的CompassEngine地图。

参数epsg设置地图坐标系，'EPSG:4490'表示经纬度，'EPSG:3857'表示墨卡托。

最后更新时间: