16°

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

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

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

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

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


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();
    });
  }
};

本文由【DY-Tao】发布于开源中国,原文链接:https://my.oschina.net/yuantao/blog/3159655

全部评论: 0

    我有话说: