
vue
gis_SSS
每天进步一点点
展开
-
基于element ui 进行组件库的封装
一、创建工程vue create vt-ui二、对vue 工程改造1、创建packages 用于存储自定义组件的原代码2、 将原有的src 目录改成 examples ,用于测试packages 下的组件3、整个项目目录结构如下三、在packages目录下创建组件(1)创建table 组件<template> <div class="vt-table"> <div class="vt-table-header">原创 2021-02-26 22:00:57 · 1249 阅读 · 0 评论 -
openlayers select 鼠标点击要素指定图层高亮
一、概述使用openlayers点击要素高亮显示方法可以使用select来实现,对于一个页面显示多个图层如何进行指定图层进行高亮,其他图层不高亮,select也提供相应的方式二、点击高亮的实现方法(1)es6的方式按钮加载模块import { Select } from "ol/interaction";import { click } from "ol/events/condition";(2)实现高亮 let selectClick = new Select({ .原创 2020-10-10 10:57:30 · 4833 阅读 · 1 评论 -
vue animate.css4.x 实现动画效果
animate.css动画演示地址:https://animate.style/1、安装animate.cssnpm install animate.css --save2、在main.js中引入animate.css文件并挂载到vue上// 引入动画animate.cssimport animated from 'animate.css' Vue.use(animated)3、使用动画信息注意:安装4.x版本的animate.css类名的使用发生了变化,需要添加前缀才...原创 2020-09-15 15:44:33 · 858 阅读 · 0 评论 -
axios的post请求和get请求传递数组
一、背景axios 的post和get请求在中传递数组的过程中,后台无法接受到传输的参数,主要原因数据格式化过程中规范不一致导致无法接受二、解决方法将请求参数中含有的数组数据,格式化过程中,将数组以“,”(逗号)的方式格式化成字符串,主要使用的方式是Qs 进行格式化,调用Qs的stringify函数进行数据格式化。(1)安装qsnpm install qs(2) 导入依赖import qs from 'qs';(3) 处理请求数据qs.stringify(data.原创 2020-05-11 10:46:52 · 4165 阅读 · 0 评论 -
geoserver发布服务标注去重
一、介绍由QGIS导出的标注sld样式文件使用geoserver发布使用openlayers加载服务,标注出现重复性问题二、解决重复问题1、使用nodepad++打开sld文件添加 <se:Geometry> <ogc:Function name="centroid"> ...原创 2019-10-15 17:22:30 · 2849 阅读 · 5 评论 -
openlayers 绘制点图层
一、思路首先将单个点组成数据,然后添加到矢量资源中生产点图层,这样做的原因是将一种类型的点数据变成一个图层用于图层的控制二、普通实现方式var fillStyle = new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.8)'})// 边界样式var strokeStyle = new ol.style.Stroke({ ...原创 2019-09-25 17:14:11 · 2975 阅读 · 0 评论 -
openlayers 点击geoserve发布的WMS数据获取属性信息
一、普通web工程写法/** * 获取WMS服务的属性数据 * @param map * @param wmsSource */function getWMSInfo(map,wmsSource){ var eventKey = map.on('singleclick', function(evt) { $(".testMenu").hide...原创 2019-09-22 18:51:20 · 3102 阅读 · 1 评论 -
openlayers 加载geoserve发布的WMS数据
一、导入相关的包import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';import {XYZ,TileWMS,Vector as VectorSource,ImageWMS,Cluster} from 'ol/source.js';二、函数的封装// 加载geoserver发布的WMS数据exp...原创 2019-09-20 17:30:57 · 1234 阅读 · 0 评论 -
mpvue 小程序进行逆地理编码
一、去官网下载相关的库文件地址:https://lbs.qq.com/二、将下载好的程序减压获取到qqmap-wx-jssdk.js文件,并放到工程的static中三、将库文件引入到页面中var QQMapWX = require('../../../static/js/qqmap-wx-jssdk.js')四、创建实例并进行逆地理编码 let qqMa...原创 2019-07-05 16:32:29 · 381 阅读 · 0 评论 -
mpvue 页面跳转传参
一、mpvue进行小程序开发的过程中,进行页面的跳转不能使用vue的路由,只能使用微信小程序的页面跳转方法官网文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateTo.htmlwx.navigateTo({ url: 'test?id=1', events: { // 为指定...原创 2019-07-08 09:05:27 · 3853 阅读 · 1 评论 -
mpvue 以地图组件为例介绍加载小程序的组件
一、mpvue完全可以加载小程序的组件进行开发,本文介绍如何加载地图组件(1)小程序的官方文档网址 https://developers.weixin.qq.com/miniprogram/dev/component/(2)查看地图组件的相关介绍二、加载地图组件(1)加载地图组件<map id="map" longitude="113.3...原创 2019-06-24 09:11:48 · 1463 阅读 · 0 评论 -
mpvue 打开手机安装的地图软件进行导航
一、说明:小程序打开手机手机地图导航这个功能,小程序已经提供了相关的api,wx.openLocation(Object object)可实现改功能二、示例(1)、新增一个导航按钮 <i-button type="primary" @click="navigation">导航</i-button>(2) 、按鈕添加点击事件,...原创 2019-06-25 09:47:24 · 1124 阅读 · 0 评论 -
mpvue 加载iview ui进行项目开发
一、iview的官网地址https://weapp.iviewui.com/二、从iview的github上下载下来代码,解压三、将dist目录复制到项目的static目录下改名为iview四、在需要引入的组件json文件中使用,如在日志页面加入一个按钮"usingComponents": { "i-rate": "../../../static/ivie...原创 2019-06-21 10:49:34 · 699 阅读 · 0 评论 -
mpvue开发小程序之项目搭建
一、查看mpvue的文档地址如下http://mpvue.com/mpvue/二、执行下边的命令进行项目创建# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 mpvue-quickstart 模板的新项目$ vue init mpvue/mpvue-quickstart my-project三、安装依赖和...原创 2019-06-21 10:20:33 · 226 阅读 · 0 评论 -
vue的开发环境的搭建
一:安装node.js1:从官网的下载地址下载https://nodejs.org/en/2:一路下一步安装就可以3:安装完成win+R,cmd进入dos命令,输入 npm -v ,查看node.js的版本4:如果版本低于3.0,则需要输入cnpm install npm -g进行版本的提升。5:由于国内使用npm会很慢,这里推荐使用淘宝NPM镜像 输入npm instal...原创 2018-07-18 20:22:31 · 1474 阅读 · 0 评论