# vue 项目安装 openlayer

vue 项目安装 openlayer

今天呢，稍微说一下关于 vue 项目使用 openlayer 的一些操作，我也是刚开始学习，在摸索。

比较讨厌的一点就是他的官网说明文档啥的都是英文的，对英语不好的很不友好，我也看不懂，但是我下了一个有道翻译，关键是刚接触，不了解，都不知道怎么检索能得到答案，没目的性，很难受。但是没关系，等我以后有钱了，我就收购了openlayer，然后拿着刀架在那群开发的洋鬼子脖子上逼他们把开发文档一个词一个词的给你们翻译成中文的。加油！

相关资料

openlayer 官网：https://openlayers.org/
openlayer API：https://openlayers.org/en/latest/apidoc/
openlayer 官网案例：https://openlayers.org/en/latest/examples/

vue 项目安装 openlayer

接下来就进入正题吧，就是 vue 项目中引入 openlayer 。

添加依赖

就是下面这一行命令。

npm install ol

然后等他安装完就可以了。

使用 openlayer

然后在我们需要使用openlayer的页面写一个div来放置地图，首先一点哈，要保证这个div有高度和宽度，不然显示不出来，有的人找了好久原因，发现是因为存放地图的div没有设置宽高，吃了这个亏。

<div id="map" ref="map"></div>

接下来就可以写ts代码接入openlayer了。

<script>
  // 首先引入几个会用的到库，具体可以查看官网API文档
  import 'ol/ol.css';
  import Map from 'ol/Map';
  import OSM from 'ol/source/OSM';
  import TileLayer from 'ol/layer/Tile';
  import View from 'ol/View';

  var map = null   // 创建一个地图实例
  export default {
    name: "Home",
    data() {
      return {

      }
    },
    mounted() {
      this.initMap()  // 调用初始化地图服务
    },
    methods: {
      // 初始化地图
      initMap() {
        map = new Map({  // 创建一个地图
          layers: [
            new TileLayer({
              source: new OSM(),
            }),
          ],
          target: 'map',
          view: new View({
            center: [0, 0],
            zoom: 2,
          }),
        });
      }
    },
  };

</script>

OK。上面的代码地图就展示出来了！奈斯！

加载高德地图底图

	  // 初始化地图
      initMap() {
        map = new Map({
          layers: [
            new TileLayer({
              visible: true,
              source: new XYZ({
                visible: true,
                url: 'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=2&scale=1&style=8',
              })
            })
          ],
          target: 'map',
          view: new View({
            center: [116.403218, 39.92372],
            zoom:12,
            maxZoom: 18,
            projection: 'EPSG:4326',
            constrainResolution: true,  // 设置缩放级别为整数 
            smoothResolutionConstraint: false,  // 关闭无级缩放地图
          }),
        });
      }

下面是加载进来的效果。