【教程】如何使用星图地球数据云地图API调用服务-CFANZ编程社区

【教程】如何使用星图地球数据云地图API调用服务_地图api

国内又一个在线地理信息综合服务平台——星图地球数据云正式上线，种类齐全且更新频次高的基础地图数据资源均可以通过平台提供的应用程序开发接口实现在线免费调用。

下面就给大家介绍下，如何使用星图地球数据云实现各类底图数据调用。

使用说明：
星图地球数据云的地图API支持HTTPS协议。
星图地球数据云的地图API对所有用户开放。
使用本组服务之前，需要先注册账号并完成开发者认证。
https://datacloud.geovisearth.com

地图SDK：
星图地球数据云的地图API提供SDK简化开发者的代码调用，需要配合相关GIS开发地图框架共同使用，目前支持Cesium、 Openlayers。
星图地球数据云的地图SDK对所有用户开放

引用
你可以下载SDK文件，然后直接在script标签中引用即可。

<script src="path/to/daas.geovis.ol.min.js"></script>

或者

<script src="path/to/daas.geovis.cesium.min.js"></script>

代码示例
openlayers：
javascript

let map = new ol.Map({
        target: document.getElementById('olContainer'),
        layers: [],
        controls:[],
        view: new ol.View({
            projection: 'EPSG:3857',
            center: [0, 0],
            zoom: 2.9068905956085187,
            maxZoom: 20
        })
    })


    let instance = daas.useOpenlayer(map);



    //增
    let layer = instance.addLayer({
        name: 'yingxiang',
        index: 0,
        baseUrl: "https://tiles.geovis.online/base/v1/img/{z}/{x}/{y}",
        tmsIds: "w",
        format:'webp',
        token: "申请的token",
        minimumLevel: 0,
        maximumLevel: 18,
    });

    let yxzjLayer = instance.addLayer({
        name: 'yxzj',
        index: 1,
        baseUrl: "https://tiles.geovis.online/base/v1/cia/{z}/{x}/{y}",
        tmsIds: "w",
        format:'webp',
        token: "申请的token",
        minimumLevel: 0,
        maximumLevel: 18
    });

    let vecLayer = instance.addLayer({
        name: 'vec',
        index: 2,
        baseUrl: " https://tiles.geovis.online/base/v1/vec/{z}/{x}/{y}",
        tmsIds: "w",
        format:'webp',
        token: "申请的token",
        minimumLevel: 0,
        maximumLevel: 18
    });

    //删
    // instance.removeLayerByName('yingxiang');

    //查
    //let layer = instance.getLayerByName('yingxiang');

    //显示
    layer.show = true;
    yxzjLayer.show = false;
    vecLayer.show = false;

    //修改层级
    layer.index = 2;

html
<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <script src="js/openlayer/ol.js"></script>
  <script src="js/daas.geovis.ol.min.js"></script>
  <style>
    html,body{
      width: 100%;
      height: 100%;
      margin: 0;
    }
    #olContainer{
      width: 100%;
      height: 100%;
    }
  </style></head><body>
  <div id="olContainer"></div>
  <script src="js/demo.js"></script>
 </div></body></html>

cesium:
Javascript

const viewer = new Cesium.Viewer('cesiumContainer');    
  viewer.scene.globe.showGroundAtmosphere = false;
  let instance = daas.useCesium(viewer);
  //增
  let layer = instance.addLayer({
      name: 'yingxiang',
      index: 0,
      baseUrl: "https://tiles.geovis.online/base/v1/img/{z}/{x}/{y}",
      tmsIds: "w",
      format:'webp',
      token: "申请的token",
      minimumLevel: 0,
      maximumLevel: 18,
  });

  let yxzjLayer = instance.addLayer({
      name: 'yxzj',
      index: 1,
      baseUrl: "https://tiles.geovis.online/base/v1/cia/{z}/{x}/{y}",
      tmsIds: "w",
      format:'webp',
      token: "申请的token",
      minimumLevel: 0,
      maximumLevel: 18
  });

  let vecLayer = instance.addLayer({
      name: 'vec',
      index: 2,
      baseUrl: " https://tiles.geovis.online/base/v1/vec/{z}/{x}/{y}",
      tmsIds: "w",
      format:'webp',
      token: "申请的token",
      minimumLevel: 0,
      maximumLevel: 18
  });

  //删
  // cesiumIns.removeLayerByName('yingxiang');

  //查
  //let layer = instance.getLayerByName('yingxiang');

  //显示和隐藏
  layer.show = true;
  yxzjLayer.show = false;
  vecLayer.show = false;
  //修改层级
  layer.index = 2;
html
<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <script src="js/Cesium/Cesium.js"></script>
  <link href="js/Cesium/Widgets/widgets.css" rel="stylesheet">
  <script src="js/daas.geovis.cesium.min.js"></script>
  <style>
    html,body{
      width: 100%;
      height: 100%;
      margin: 0;
    }
    #cesiumContainer{
      width: 100%;
      height: 100%;
    }
  </style></head><body>
  <div id="cesiumContainer"></div>
  <script src="js/demo.js"></script>
 </div></body></html>