Vue
关注
分享
扫一扫
文章平均质量分 54
爱睡懒觉的老舅
GISer一枚，好好学习技术
展开
-
Vue学习笔记六：element-ui中表格单元格合并（多个if else语句的优化）
最近平台中有一个需求：读取excel文件，并将表格显示在前端。之前我们实现了将一个json数据读取之后放到表格里（直接读取excel也差不多）。实现这个不难，主要是合并单元格有些麻烦，element-ui自己提供了合并行或列的计算方法：span-method，但是首先要处理下合并的单元格数据。合并前：合并后：实现步骤简单来说有两步，这里会逐步展开来说，也会说明下每一步最开始的写法，然后一步步优化，消除多个 if else 语句，使代码更加简洁，这个过程中逐步地进行抽象封装。一、读..原创 2021-08-12 16:03:03 · 1388 阅读 · 0 评论 -
Vue+OpenLayers学习系列（十二）番外篇：openlayers6结合geoserver实现框选查询
一、问题这里面用的是ajax获取查询结果的信息，最重要的方法是 queryByPolygon(polygon,typeName,callback){ }。其中注意要查看下面这个字段是不是跟发布的字段是一样的。这个地方要多查看和熟悉geoserver的xml写法，不然会出现很多错误。filter += '<PropertyName>the_geom</PropertyName>';可以在geoserver管理界面中的图层里面查询该图层的详细信息界面：queryBy原创 2021-06-05 23:29:14 · 2368 阅读 · 2 评论 -
Vue+OpenLayers学习系列（十一）使用axios加载GeoServer发布的WFS服务
一、问题1、之前用下面官网的方法source.addFeatures()将查询的图层信息加载到 source 里面，但是不知道为啥，死活出不来，也不报错，就很奇怪。var source = new VectorSource();source.addFeatures(new GeoJSON({featureProjection: 'EPSG:3857'}).readFeatures(res.data));后面偶然间用下列方法试了下，发现可以读取出来：var source = new ..原创 2021-06-05 21:05:14 · 1359 阅读 · 2 评论 -
Vue学习笔记四：Vue的生命周期
一、Vue的生命周期Vue的生命周期中有多个钩子函数，可以让我们在控制整个Vue实例的过程当中，更容易造成良好的逻辑。Vue的生命周期分为八个：创建前/后，载入前/后，更新前/后，销毁前/后。1、创建前（beforeCreate）beforeCreate阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。<!DOCTYPE html><html lang="en"> <head> <meta ch原创 2021-05-10 22:46:57 · 339 阅读 · 6 评论 -
Vue+OpenLayers学习系列（十）OpenLayers读取VectorLayer矢量图层数据(GeoJson格式)
之前有看到OpenLayers官网（https://openlayers.org/en/latest/examples/box-selection.html）读取GeoJson数据是下面这样读的，但是我怎么读都读不出来，报各种错。//这是官网读GeoJson的方法var vectorSource = new VectorSource({ url: 'data/geojson/countries.geojson', format: new GeoJSON(),});后面查了很多资料，发现原创 2021-04-24 23:55:59 · 3875 阅读 · 6 评论 -
Vue+OpenLayers学习系列（八）OpenLayers调用天地图WMTS服务
最近调用天地图服务，发现之前大家调用都是用XYZ方式，而切片方式调用比较少，这里记录下，以备后续所需。1、注册天地图并查看天地图的WMTS服务。首先登陆后，需要注册天地图账号（这里吐槽下，天地图账号只能用邮箱注册，这样导致我邮箱不能用之后，天地图账号密码忘了无法找回密码，且账号绑定的手机号也不能解绑）。注册之后可以在控制台创建新应用，获得调用服务所需的key。然后在地图API>地图服务那里可以查看到地图服务列表。2、Vue+OpenLayers调用天地图WMTS服.原创 2021-04-24 19:28:55 · 3237 阅读 · 0 评论 -
Vue+OpenLayers学习系列（九）Vue+OpenLayers小案例（长度测量、面积测量、坐标定位、坐标获取）
很早之前做的一个例子，最近想复习下Vue+OpenLayers的使用案例，所以发出来供大家下载vue-ol-demo-master本Demo的功能包括：地图展示、地图放大缩小、添加鹰眼、长度测量、面积测量、坐标获取、坐标定位。其中测量工具实现的方法逻辑单独放在src/shared/tools/measure.js文件里面，避免放到组件里面太大太冗余。运行方法：#下载依赖npm install#运行npm run serve...原创 2021-03-11 23:08:30 · 1999 阅读 · 6 评论 -
Vue+OpenLayers学习系列（四）OpenLayers 加载 WMS 地图服务（GeoServer）
一、简单介绍OpenLayers 读取 WMS 服务与OpenLayers 读取 GeoServer 发布的地图服务 类似二、代码本次 Demo 主要介绍读取 GeoServer 发布的 WMS 地图服务，并且绘制矢量<template> <div> <div id="map" ref="rootmap"> </div> <label>Shape type </label&g.原创 2020-08-02 16:47:46 · 3546 阅读 · 2 评论 -
Vue+OpenLayers学习系列（七）OpenLayers 加载GeoServer发布的矢量切片地图
一、首先要切片注意首先要下载 GeoServer 的矢量切片插件（参见：https://zhuanlan.zhihu.com/p/62751184）安装完矢量切片插件后，发布吐槽时，需要勾选如下：然后找到发布的矢量切片图层打开预览，并且查看浏览器中的源码，查看它的调用方式（在后面OpenLayers调用它时可以用同样的方式去调用）：二、OpenLayers 调用<template> <div> <div id="map" ref原创 2020-08-02 16:48:33 · 2781 阅读 · 0 评论 -
Vue+OpenLayers学习系列（五）OpenLayers 加载 WMTS 地图服务（GeoServer）
一、用 GeoServer 发布地图服务并且查看选择 Tile Caching 里面的 Tile Layers，选择预览方式为 EPSG:4326/png点开预览该服务，然后在预览页面查看网页源码，查看具体的调用方式和所需的参数。二、OpenLayers 调用 WMTS 服务<template> <div id="map" ref="rootmap"> </div></template><scri..原创 2020-08-02 16:47:57 · 3196 阅读 · 0 评论 -
Vue+OpenLayers学习系列（六）OpenLayers 加载 WFS 地图服务（GeoServer）
一、首先用 GeoServer 发布地图服务在 Layer Preview 里面选择一个图层，在 All Formats 里面可以选择 GeoJson二、OpenLayers 读取 WFS 服务<template> <div id="map" ref="rootmap"> </div></template><script> import 'ol/ol.css'; import Map from 'ol/Ma原创 2020-08-02 16:48:21 · 3026 阅读 · 4 评论 -
Vue+OpenLayers学习系列（三）OpenLayers 读取 GeoServer 发布的地图服务
一、原创 2020-08-02 16:47:34 · 2251 阅读 · 0 评论 -
Vue+OpenLayers学习系列
Vue + OpenLayers 学习笔记系列一、OpenLayers 实现地图显示+切换地图底图；二、OpenLayers 读取 ArcGIS Server 发布的地图服务；三、OpenLayers 读取 GeoServer 发布的地图服务；四、GeoServer 连接 PostGIS；五、OpenLayers 加载 WMS 地图服务；六、OpenLayers 加载 WMTS 地图服务；七、OpenLayers 加载 WFS 地图服务；八、OpenLayers 加载矢量地图原创 2020-08-02 16:46:22 · 1695 阅读 · 2 评论 -
Vue学习笔记三：Computed 和 Watch 的使用方法详解
一、计算属性 ComputedComputed 用来监控自己定义的变量，该变量不在 data 里面声明，直接在 computed 里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用其他处理；Computed 比较适合对多个变量或者对象进行处理后返回一个结果值，也就是多个变量中的某一个值发生变化则我们监控的这个值也就发生变化；Computed 计算属性基于响应式依赖进行缓存。如其中...原创 2020-05-05 23:45:17 · 508 阅读 · 0 评论 -
Vue-iClient-MapboxGL学习笔记
使用 SuperMap iClient 组件库，可像搭积木一样快速的创建自定义的 WebGIS 应用。其中 Vue-iClient-MapboxGL 即是使用 Vue 封装的组件库，本文将说明下如何快速使用 Vue-iClient-MapboxGL。1、首先需要搭建 Vue 项目，参见https://blog.csdn.net/Ocean111best/article/details/103...原创 2020-01-11 15:47:24 · 1583 阅读 · 0 评论 -
Vue学习笔记一：Vue基础环境搭建及相关文件说明
一、前言说明去年有个项目有用到 Vue，当时太忙一直没有总结。今年下半年再次使用 Vue 时竟有些生疏，故还是写成博客记录之，以便日后再来看时能迅速记起。首先要安装 webpack、nodejs。npm 是 node 的包管理工具，其服务器在国外，有时候安装依赖会很慢，可以安装 cnpm（淘宝的 npm 镜像），其安装步骤为：（1）cmd 下直接安装：npm install -g cnpm...原创 2019-12-12 11:27:10 · 505 阅读 · 0 评论