文档章节

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

DY-Tao
 DY-Tao
发布于 01/17 23:39
字数 613
阅读 97
收藏 0

使用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: "✖";
  }
}

© 著作权归作者所有

DY-Tao
粉丝 0
博文 7
码字总数 3278
作品 0
肇庆
程序员
私信 提问
加载中

评论(0)

干货分享:vue2.0做移动端开发用到的相关插件和经验总结(2)

最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少。经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及...

wdlhao
2018/09/17
0
0
vue2.0做移动端开发用到的相关插件和经验总结(2)

最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少。经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及...

大灰狼的小绵羊哥哥
2018/09/18
0
0
微信小程序 + 腾讯地图SDK 实现路线规划

原文链接 最近小程序的发展越来越火了,作为各个产品线的extra服务入口,以轻便、快速、强大的社交链吸引着大量的用户和开发者。业内开发框架层出不穷,wepy,mpvue,taro等等,都在朝着更快...

棱镜_jh
2019/03/29
0
0
Vue-CLI and Leaflet (5): 点 绘制

(一) Vue-CLI and Leaflet:起步 - 在 Vue-CLI 中使用 Leaflet (二) Vue-CLI and Leaflet:地图基本操作(放大,缩小,平移,定位等) (三) Vue-CLI and Leaflet: 添加 marker, polyli...

蓝波丶坎迪
2019/06/23
0
0
vue中使用高德地图搭建实时公交应用(地图 + 附近站点+线路详情 + 输入提示+换乘详情)

最近项目要使用高德地图写了一个实时公交的应用,这边分享一个小应用主要熟悉下高德地图在vue中的使用,常用api,vue的常用指令 先给大家看下页面效果: 如果有需要源码的童鞋请移步我的git...

blueCoder
2018/05/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

00-Java 面试准备

面试之前 面试前准备简历需要注意的几个方面: 写简历、改简历,这个一定要干的。简历有两个作用,一个是吸引别人,能让别人邀请你去面试,这是前提;另一个是引导面试的人,让面试的人问你所...

源程序
今天
54
0
OSChina 周二乱弹 —— 大王(@罗马的王)颜值制霸Osc社区

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @巴拉迪维 :Lunik的单曲《Seeing You Soar》 I hope you’re smiling,When seeing me soar. #今日歌曲推荐# 《Seeing You Soar》- Lunik 手...

小小编辑
今天
83
0
wordcount代码

1.写出map类 public class WCMapper extends Mapper<LongWritable,Text,Text,LongWritable>{ @Override protected void map(LongWritable key,Text value,Context context)throws IOExcepti......

七宝1
今天
59
0
Spring Batch 小任务(Tasklet)步骤

Chunk-Oriented Processing不是处理 step 的唯一方法。 考虑下面的一个场景,如果你仅仅需要调用一个存储过程,你可以在 ItemReader 中实现这个调用,然后在存储过程完成调用后返回 null。这...

honeymoose
今天
67
0
Linux日志分析

1. Linux日志文件的类型 2. 系统服务日志 2.1 syslogd的简介 2.2 syslogd的配置和使用 2.3 日志的安全性设置 2.4 远程日志记录服务 3. 日志的轮替 3.1 logrotate简介 3.2 logrotate的配置 3....

JiaMing
昨天
67
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部