使用vue 开发地图类系统(openlayers.js)的注意。

使用vue 开发地图类系统的注意。

1、使用地图应该创建的对象 少使用 vue 的data 和计算属性(comments)存数据或是vuex。

为什么要要注意这个问题呢？

答：这个就要了解到vue的实现原理 。原理参考； 当你把一个普通的 JavaScript 对象传入 Vue 实例作为data选项，Vue 将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter 使用地图引擎创建的创建的实例往往都是创建的一个对象的 。这个实例的对象往往都是有许多的属性和方法。这个我们使用vue 的数据 存储的 ，那么vue就是把这个的属性全部转换成getter/setter。这个内存的就是会增加。 地图的变量我们可以使用局部变量存储。

地图引擎使用的是 openlayers

<template>
  <div ref="mapView" class="map-view">
    <!-- 弹窗 -->
    <div ref="popup" class="ol-popup">
      <a @click="popupcloser" class="ol-popup-closer"></a>
      <div class="ol-popup-content" v-html="popupContent"></div>
    </div>
  </div>
</template>

import "ol/ol.css";
import Map from "ol/Map";
import Overlay from "ol/Overlay";
import View from "ol/View";
import ol from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
//地图变量
let map = null;
// Overlay new的变量
let popup;
export default {
  data() {
    return {
      //
      popupContent: ""
    };
  },
  computed: {},
  methods: {
    init() {
      this.initMap();
      this.initPopup();
    },
    initMap() {
      console.log("map");
      map = new Map({
        target: this.$refs.mapView,
        layers: [
          new TileLayer({
            source: new XYZ({
              url:
                "http://mt{0-3}.google.cn/vt/lyrs=m&scale=2&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Galile"
            })
          })
        ],
        view: new View({
          center: [-472202, 7530279],
          zoom: 12
        })
      });
    },
    initPopup() {
      // Vienna marker
      popup = new Overlay({
        positioning: "bottom-center",
        element: this.$refs.popup,
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        },
        offset: [-140 + 48, 0]
      });
      console.log(popup);
      map.addOverlay(popup);
      map.on("singleclick", evt => {
        var coordinate = evt.coordinate;
        this.popupContent = "<p>You clicked here:</p><code>6666</code>";
        popup.setPosition(coordinate);
      });
    },
    initData() {},
    popupcloser() {
      popup.setPosition(undefined);
      //   closer.blur();
      return false;
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  }
};

.map-view {
  width: 100%;
  height: 100%;
  .ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 280px;
  }
  .ol-popup:after,
  .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 140px;
    margin-left: -10px;
  }
  .ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 140px;
    margin-left: -11px;
  }
  .ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
    &:hover {
      cursor: pointer;
      color: #f00;
    }
  }
  .ol-popup-closer:after {
    content: "✖";
  }
}

来源：oschina

链接：https://my.oschina.net/yuantao/blog/3159655