• openlayers原理小故事(1)


    办公室来了一个新同事,女的,挺漂亮,名叫柳飘飘。做了多年孤寡老人的王大锤仿佛看到了一丝希望,愉悦之情溢于言表。

    第二天柳飘飘小姐姐主动搭讪,王大锤心里仿佛有千万只锤同时在敲,原来是一个问题:

    // 柳:请问ol是如何调用这个OSM地图的呢?
    // 王:……
    const map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      target: "map",
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });
    

    王大锤心中一喜,心想这还不是我的看家本领。于是洋洋洒洒的答道:

    OSM是OpenStreetMap公司开发的地图切片服务,采用Web Mecator投影,除了两极地区,可以实现全球范围内的覆盖。所谓的切片服务本质上就是将球面投影而成的图片经过切片,拆分,编号,放在服务器里,前端渲染的时候根据显示的范围和缩放层级而去请求对应的图片。通常Web端绘制图片的方式有Image标签,canvas,和WebGL,现在的高性能前端地图框架会采用WebGL绘制,更高效,还支持三维。

    说这段话的时候,王大锤特意把本质上这三个字着重强调了一下,看着柳飘飘在耐心的听着,心里眉飞色舞,好不自在。他现在急需对方的一个肯定,结果他并没有等到,他等来的是“一记重拳”,柳飘飘又提了三个问题。

    一张草稿纸上写了几行字,写得很秀气,内容如下:

    1. 初始化Map时,传入的属性做了哪些处理
    2. TileLayer和OSM是如何设计的,两者的关系是什么
    3. canvas的绘制是如何一步步触发的
    

    王大锤心中一惊,仿佛又千万只锤同时在敲。本来打算想在妹子前表现一下自己的,没想到弄巧成拙,刘三炮的挤眉弄眼更是让自己更加尴尬。刘三炮和王大锤同是GIS开发组的,平时都是自己的手下败将,想到自己被他嘲笑更是气不过。

    第二天一大早,枯木逢春的王大锤特意吹了一个时髦的发型,在镜子前看了很久。在得出自己依然风华无限,光彩照人的结论后出了门。诚惶诚恐地把昨天晚上苦思冥想的答案放在柳飘飘的桌上后,心里忐忑不安,上面写道:

    1. 初始化Map时,传入的属性做了哪些处理?
    初始化视口viewport的div;监视地图属性值变化,如监视layer和view的变化;初始化控件(旋转,缩放和属性)和默认交互(拖拽,双击等);
    Map类继承自Object类,Object类型继承自EventTarget类,这也是ol中大部分类的继承框架。Object类用于设置属性值,EventTarget用于注册事件和触发事件。
    
    2. TileLayer和OSM是如何设计的,两者的关系是什么?
    实例化TileLayer的主要目的是监视source的变化,等待source的加载; OSM是一种XYZ切片格式的数据源,继承自TileImage类,TileImage类用于创建切片,创建缓存等。
    
    3. canvas的绘制是如何一步步触发的
    以OSM为例,OSM其实是封装的切片图层。初始化Map时,layers属性的注入,会触发渲染机制,将解析出来的切片地图按照一定的规则排列在canvas中。
    

    如果关注了一个人,即时不看到他,也知道对方出现了。柳飘飘出现了,一身针织衬衫,走过后王大锤能感受到一阵温柔的风吹过后脖领。

    柳飘飘似乎并没有注意到王大锤的新发型,但是发现了桌上的字。

  • 相关阅读:
    java8 list 删除元素 简单版
    java8 list 删除元素 结构复杂版
    xshell 连接 centos 中的 vi 配色
    Redis 运行出错
    电脑清理秘籍 [ 精心总结 ]
    团队项目之后的反思
    团队项目心得 [ 感想 ]
    团队项目心得 [ 第二阶段项目总结 ]
    团队项目心得 [ 第一阶段项目总结 ]
    《创新者》读书笔记
  • 原文地址:https://www.cnblogs.com/asdlijian/p/14719473.html
Copyright © 2020-2023  润新知