简介

本地图基于WebGL1.0打造，需运行在支持WebGL的浏览器、操作系统中。本教程推荐使用Chrome和Windows10+操作系统。

windows7操作系统需要进行设置才能启用浏览器的WebGL功能。

准备工作

强大的效果需要强大的硬件支持，流畅使用地图的设备需配备高性能GPU，推荐使用GTX1660型号及以上性能的GPU。

本教程使用Vue.js框架来进行演示，如果你还不熟悉Vue.js，可以点击这里 (opens new window)来进行学习。

安装

使用模块化：

npm i ark-map -S

使用

import arkmap from "ark-map"导入模块

import "ark-map/dist/ark-map.css" 导入样式

TIP

在离开页面时，需要调用map.destroy() 销毁地图

在离开页面时，需要调用map.destroy() 销毁地图

<template>
  <div id="map-container"></div>
</template>

<script>
import arkmap from "ark-map";
import "ark-map/dist/ark-map.css";
import style from "./quick-start-style.js";

export default {
  data: () => ({
    map: null,
  }),
  mounted() {
    this.map = new arkmap.Map({
      container: "map-container",
      zoom: 12,
      center: [120.18773, 30.23019],
      pitch: 43,
      style,
      hash: false,
      antialias: true,
      fixedZoom: true,
      devicePixelRatio: 2,
    });
  },
  beforeDestroy() {
    if (this.map) this.map.destroy();
  },
};
</script>

<style lang="less" scoped>
#map-container {
  height: 500px;
}
</style>

显示代码