跳到主要内容
版本：9.4.1

NPM方式创建

此方式适用于通过 npm 方式搭建的工程（如Vue、React等），Vue工程搭建可参考教程：https://cli.vuejs.org/zh/ 。新建工程后，按照以下步骤操作：

1、设置源​

  • 在 Vue 项目目录下增加.npmrc文件，输入以下内容：
    registry = "https://registry.npmjs.org/"
    @mapmost:registry="https://npm.mapmost.com/"
    show

2、安装SDK​

  • 鼠标点击 终端 -> 新建终端，并在终端中输入以下命令后回车。

    npm install @mapmost/mapmost-webgl
    showshow

3、创建vue文件​

  • 创建 HelloMapmost.vue 文件，通过 import 引入SDK，具体代码如下：

    <template>
      <div class="hello">
        <div id="map"></div>
      </div>
    </template>

    <script>
    import mapmost from '@mapmost/mapmost-webgl';

    export default {
      name: 'HelloMapmost',
    }
    </script>
    show

4、地图初始化​

授权

您需要先拥有一个授权码，授权码获取请参考授权申请。

  • 在 HelloMapmost.vue 文件中创建一个用于地图渲染的dom元素。

  • 添加地图初始化代码。

  • 输入地图样式文件的url和授权码。

  • 完整代码如下：

    <template>
      <div class="hello">
        <div id="map"></div>
      </div>
    </template>

    <script>
    import mapmost from '@mapmost/mapmost-webgl';

    let map = new mapmost.Map({
      container: 'map', // 地图容器 id
      style: "https://www.mapmost.com/cdn/styles/sample_data.json", // 样式文件 URL
      center: [120.71923008473078, 31.29446443371741], // 地图初始中心点
      zoom: 14, // 地图初始级别
      userId: '***', // 授权码
    });

    export default {
      name: 'HelloMapmost',
    }
    </script>

    <style scoped>
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
    </style>
    show

5、运行工程​

  • 在终端中输入以下命令，按回车键启动工程。

    npm run serve
    show

6、效果查看​

  • 工程启动后，按住Ctrl键同时鼠标单击终端中本地地址（下图黄框中的网址）即可打开网页

    showshow