安装Atlas-SDK

环境准备

• 环境要求

  • 推荐使用Node.js 16.0及以上版本。

  • 请参考Node.js安装下载和安装编译运行环境。

• 查看语言版本

  • 执行以下命令查看Node.js版本。

    node -v

  • 执行以下命令查看npm版本。

    npm -v

安装SDK

解压安装包得到atlas-sdk文件夹，并复制到项目根目录下。执行以下命令安装SDK：

npm install ./atlas-sdk/@datav-atlas/map

验证SDK

您可以使用以下命令来验证atlas-sdk是否安装成功并查看其版本。

npm list @datav-atlas/map

成功返回示例如下，以下示例表明您已经成功安装atlas-sdk。

your-project-name@ /path/to/your/project
└── @datav-atlas/map@0.0.x  -> ./atlas-sdk/@datav-atlas/map

快速上手

安装完成后，在项目的package.json中增加了依赖项：

"@datav-atlas/map": "file:atlas-sdk/@datav-atlas/map",

以create-vue项目为例，演示简单示例。在APP.vue中添加以下代码，即可生成一个地图。

// App.vue文件
<script setup lang="ts">
import { onMounted } from 'vue';
import {
  AtlasMap,
  FillLayer,
  GeoJsonSource,
  RasterLayer,
  RasterSource,
} from '@datav-atlas/map';

onMounted(() => {
  // 创建地图实例
  const map = new AtlasMap('container', {
    crs: 'EPSG:3857',
    center: [110, 40],
    zoom: 3,
    pitch: 0,
    rotate: 0,
  });
  
  // 创建栅格图层
  const baseMap = new RasterLayer({
    id: 'base',
    source: new RasterSource({
      id: 'base',
      data: 'https://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
      maxzoom: 18,
      tileSize: 256,
    }),
    order: 0,
  });

  // 地图GeoJSON数据
  const source = new GeoJsonSource({
    id: 'test',
    data: 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
    vector: false,
  });

  // 创建基础面图层
  const layer = new FillLayer({
    id: 'test',
    source: source,
    order: 10,
    style: {
      color: 'orange',
      opacity: 0.8,
    },
  });

  // 将图层添加到地图实例
  baseMap.addTo(map);
  layer.addTo(map);
}) 
</script>

<template>
  <div id="container" style="width: 800px;height: 600px"></div>
</template>