前端
关注
分享
扫一扫
文章平均质量分 50
爱睡懒觉的老舅
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学习笔记五：JavaScript作用域解析
JavaScript作用域涉及到作用域链等等，这里做个小结。<!DOCTYPE html><html><head lang="en"> <meta http-equiv="Content-Type" charset="utf-8"/> <title>JavaScript中的作用域</title></head><script> //例子01 var a = 10;原创 2021-05-10 23:23:22 · 378 阅读 · 0 评论 -
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 加载 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学习系列（二）OpenLayers 读取 ArcGIS Server 发布的地图服务
一、首先用 ArcGIS Server 发布地图服务在 ArcMap 中文件-共享为-服务，然后选择发布服务二、Vue + OpenLayers 读取发布的 ArcGIS Server 地图服务<template> <div id="map" ref="rootmap"> </div></template><script> import 'ol/ol.css'; import Map from 'ol/Map';原创 2020-08-02 16:47:17 · 1937 阅读 · 1 评论 -
Vue+OpenLayers学习系列（一）OpenLayers 总体介绍+切换地图底图
一、OpenLayers 数据组织OpenLayers 的地图数据通过图层（Layer）进行组织渲染，然后通过数据源（Source）设置具体的地图数据来源。Layer 可看作渲染地图的层容器，具体的数据需要通过 Source 设置。Source 和 Layer 是一对一的关系。每一个 Layer 里面需要一个 Source，然后把 Layer 添加到 Map 上，就可以显示出来了。地图数据根据数据源（Source）可分为 Image、Tile、Vector 三大类型的数据源类，对应设置到地图原创 2020-08-02 16:46:59 · 5760 阅读 · 4 评论 -
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学习笔记二：props、$ref、$emit、$on 的使用方法详解
一、props通过在子组件中声明自定义的属性，在父组件中可以使用它们，如//子组件<template> <div> <h3>{{ocean01}}</h3> <h3>{{ocean02}}</h3> </div></template><script>exp...原创 2020-04-19 17:52:29 · 1111 阅读 · 0 评论 -
Web绘图标准—SVG和Canvas
之前看极客时间四火老师有一节课讲到了数据可视化（参见https://time.geekbang.org/column/article/152557），讲得很好，正好跟我最近做的事情相符，这里面也总结下。Web 绘图标准在前端绘图中，我们常见的有位图和矢量图这两种，其实有点类似我们 GIS 中的栅格图和矢量图位图：通常我们谈论的图片(如 png、jpg 等格式)绝大多数都是位图。位图又叫...原创 2020-03-21 15:51:58 · 1206 阅读 · 0 评论 -
跨域请求问题解决办法
之前遇到过跨域问题，就是如下报错：Access to XMLHttpRequest at 'http://XXX' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested r...原创 2020-03-21 11:03:37 · 476 阅读 · 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 评论 -
webpack+ES6+SuperMap iClient for MapboxGL学习笔记
一、基本介绍1、SuperMap iClient for MapboxGL 介绍SuperMap iClient for MapboxGL 是一套基于 MapboxGL 的云 GIS 网络客户端开发平台，支持访问 SuperMapiServer / iEdge / iPortal / iManager / Online 的地图、服务和资源，为用户提供了完整专业的 GIS 能力，同时提供了...原创 2019-12-08 19:03:35 · 1184 阅读 · 0 评论