Vue中使用geoserver中的wmts(EPSG:900913)

import TileLayer from "ol/layer/Tile"

import { WMTS } from 'ol/source'

import { optionsFromCapabilities } from 'ol/source/WMTS';

import WMTSCapabilities from 'ol/format/WMTSCapabilities';

var streetmap = function(success) {

    const namespace = “xxx”;

    const layername = “xxx”;

    //成功后返回

    var parser = new WMTSCapabilities();

    fetch(“>

目前Vue官网上只解释了数组内修改string、number等深层次响应 数组更新检测

但是没有解释如何解决 Vue深度响应Array中的Object ，我自己想出了一套解决方案

首先需要这几个数据:

1、 需要深度响应的数组

2、 取出需要响应的Object，复制一份

3、 获取需要响应的Object的下坐标index

*** 作：

分析该过程，可拆分成两个步骤：

该布局基于 element-ui，一个父容器 box，里面一个 mask div，一个 el-checkbox-group 块。其中父容器设置 position: relative; 子 mask 容器设置 position: absolute;并且其宽、高、偏移值根据鼠标当前位置动态计算

该部分逻辑实际上可拆分为 4 个步骤：

1 给 box 绑定 mousedown 事件

2 mousemove 事件，比较简单，只是更新 end_x，end_y 坐标

3 mouseup 事件，移除 mousemove、mouseup 事件，并调用判断方法

4 处理框选逻辑

难点是如何判断元素是否被框选住

问题可转化为 框选矩形是否与 checkbox 矩形 相交或者包含在内,即 两矩形是否相交或者存在包含关系

假定矩形 A1 左上角坐标为 (x1,y1);矩形宽度为 width1,高度为 height1;

假定矩形 A2 左上角坐标为 (x2,y2);矩形宽度为 width2,高度为 height2;

画图分析，只看水平方向：

由图可以得出，x 方向上：

令 maxX = Mathmax(x1 + width1, x2 + width2)

令 minX = Mathmax(x1, x2)

若相交或包含则必满足： maxX - minX <= width1 + width2;

同理可以容易得到 y 轴相交的判断

使用 ElementgetBoundingClientRect()获取 dom 元素位置信息

该部分逻辑如下，比较简单

难点已经攻破，遍历 checkbox 集合，每个 checkbox 都执行上面的矩形相交判断，并进行相应的勾选处理，此处不再多累述

源码

END

浏览器渲染引擎工作流程都差不多，大致分为5步，创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting

第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。

第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。

第三步，将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法，接受样式信息，返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。

第四步，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标。

第五步，Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。

原文章出处

>

import TileLayer from "ol/layer/Tile"

import { WMTS } from 'ol/source'

import { getWidth, getTopLeft } from 'ol/extentjs';

import {get as getProjection } from 'ol/projjs';

import WMTSTileGrid from 'ol/tilegrid/WMTSjs';

 var matrixIds = ["EPSG:4326:0", "EPSG:4326:1", "EPSG:4326:2", "EPSG:4326:3", "EPSG:4326:4", "EPSG:4326:5", "EPSG:4326:6",

        "EPSG:4326:7", "EPSG:4326:8", "EPSG:4326:9", "EPSG:4326:10", "EPSG:4326:11", "EPSG:4326:12", "EPSG:4326:13", "EPSG:4326:14",

        "EPSG:4326:15", "EPSG:4326:16", "EPSG:4326:17", "EPSG:4326:18", "EPSG:4326:19", "EPSG:4326:20", "EPSG:4326:21"

    ];

var resolutions = [0703125, 03515625, 017578125, 0087890625, 00439453125, 002197265625, 0010986328125, 00054931640625, 000274658203125, 0001373291015625, 6866455078125E-4, 34332275390625E-4, 171661376953125E-4, 858306884765625E-5, 4291534423828125E-5, 21457672119140625E-5, 10728836059570312E-5, 5364418029785156E-6, 2682209014892578E-6, 1341104507446289E-6, 6705522537231445E-7, 33527612686157227E-7];

let projection = getProjection('EPSG:4326'); // 获取web墨卡托投影坐标系

    let projectionExtent = projectiongetExtent(); // web墨卡托投影坐标系的四至

    let wmtsTileGrid = new WMTSTileGrid({

        origin: getTopLeft(projectionExtent), // 原点（左上角）

        resolutions: resolutions, // 分辨率数组

        matrixIds: matrixIds // 矩阵ID，就是瓦片坐标系z维度各个层级的标识

    });

    var maplayer = new TileLayer({

        source: new WMTS({

            url: ">

以上就是关于Vue中使用geoserver中的wmts(EPSG:900913)全部的内容，包括:Vue中使用geoserver中的wmts(EPSG:900913)、如何将百度地图包装成Vue的组件、vue深度响应Array中的Object(vue深度响应数组内的对象)等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！