- 博客(72)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 mapbox studio 发布数据
一、账号注册在mapbox上进行注册一个账号，链接如下https://studio.mapbox.com/二、数据发布1、进入主页面选择Tilesets2、点击new titles将本地数据上传到服务端3、数据预览，点击刚刚上传的数据，进入预览页面没看到数据就表示数据发布成功四、打赏（编写不易）...
2021-04-13 13:07:56
729
1
原创 基于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
1075
原创 vue 使用 echarts 5.0 “export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘
有原来的引入方式改为import*asechartsfrom"echarts"
2020-12-24 13:44:30
780
原创 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
4407
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
754
原创 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
4021
原创 在vs code中使用typescript
1、安装typescriptnpm install -g typescript2、在本地建立一个工文件夹，使用vscode打开3、初始化package.json,执行npm init4、初始化 tsconfig.json ，执行tsc –init5、修改tsconfig.json文件内容{ "compilerOptions": { ...
2020-01-02 09:34:07
634
原创 egg+sequelize+postgis 空间数据新增
一、建立空间表，建议使用下边的代码建立空间表不建议使用navicat去建表CREATE TABLE city( id int4,name varchar(25), geom geometry(POINT,4326) );二、egg中建立modelmodule.exports = app => { const { INTEGER, STRING, GEOMETRY } ...
2019-11-01 19:58:57
574
原创 openlayers+turf.js实现缓冲区的绘制
一、下载安装turf下载地址：https://github.com/Turfjs/turfapi和示例地址：http://turfjs.org/docs/二、使用openlayers配个turf.js(1) 点数据的缓存//创建缓冲数据var point = turf.point([114.2058,33.2469]);var buffered = turf.buf...
2019-10-30 09:39:31
8357
1
原创 egg+sequelize+postgis 查询数据并返回geojson数据格式
一、查询（1）建立数据模型module.exports = app => { const { STRING, INTEGER, DATE, GEOMETRY } = app.Sequelize; const Zhengzhou = app.model.define("zhengzhou", { gid: { type: INTEGER, prim...
2019-10-27 21:33:01
1542
原创 egg sequelize postgis 环境搭建
一、egg基本环境的搭建官方地址：https://eggjs.org/zh-cn/tutorials/index.html一、将本地建立一个项目文件夹如gis-analyse,在该文件夹下执行脚手架命令npm init egg --type=simple（2）安装依赖npm i（3）运行npm run dev二、安装sequelize,官方中文地址：htt...
2019-10-24 21:18:52
277
原创 leaflet加载WMS数据并加载多个marker点
一、加载WMS服务 var map = L.map('map',{ center:[Number(45.59482210127054) ,Number(124.74)], zoom:9, crs:L.CRS.EPSG4326 }); const bounderLayer =L.tileLayer.wms("http://192.168.43.22:8081/g...
2019-10-23 17:25:22
2458
原创 geoserver发布服务标注去重
一、介绍由QGIS导出的标注sld样式文件使用geoserver发布使用openlayers加载服务，标注出现重复性问题二、解决重复问题1、使用nodepad++打开sld文件添加 <se:Geometry> <ogc:Function name="centroid"> ...
2019-10-15 17:22:30
2216
4
原创 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
2808
原创 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
2760
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
1020
原创 vue之openlayers天地图的加载
一、矢量天地图（1）导入依赖的文件import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';import {XYZ,TileWMS,Vector as VectorSource,ImageWMS,Cluster} from 'ol/source.js';（2）矢量天地图的函数封装/** * 说明...
2019-09-15 19:37:58
1475
1
原创 使用http-server搭建一个静态服务器
一：说明http-server是一个简单的零配置的命令行http服务器，它足够强大便于生产和使用，用于本地测试和开发。二、使用（1）全局安装npm i http-server -g（2）在本地创建一个文件夹，文件里放一个静态文件（3）编辑html内容（4）启动http-server服务器，win+R进入文件所在页面，输入hs -a ...
2019-09-11 21:26:26
1173
原创 vue 封装openlayers的Map组件
一、组件的封装（1）依赖文件的导入// 映入css文件、import 'ol/ol.css';import '../utils/openlayers/css/OverviewMap.css';import Map from 'ol/Map.js';import View from 'ol/View.js';import TileLayer from 'ol/layer/Til...
2019-09-09 11:19:08
2420
1
原创 openlayers 实现鼠标移动要矢量要素上高亮显示
一、鼠标移动到矢量要素上实现高亮显示的思路（1）建立一个高亮的图层，鼠标移动获取的数据添加到高亮图层上边，鼠标移除，将改要素从高亮图层中删除，这种方式会影响点击事件，点击获取的永远是高亮图层要素，要是地图当前只有一个图层有点击事件影响不是很大，但是多个图层存在点击事件会受到影响，需要建立多个高亮图层进行分类显示属性信息。（2）利用js的浅拷贝特性进行数据存储，鼠标移动获取的要素赋值给一个变...
2019-09-06 17:09:18
6111
5
原创 QGIS生成样式文件在geoservr中发布
一、概述在geoserver中发布的数据，如果不加自定义样式，geoserver发布的数据会采用默认的样式，这种样式往往是无法满足实际地图展示的需求，如何利用QGIS编辑好样式使用geoserver发布出来呢？接下来为大家介绍使用QGIS如何制作地图数据样式的设置、数据分级加载、显示标注以及标注的分级加载二、样式的制作1、样式设置，常常指没一种数据显示的颜色不一样。（1）QGIS将...
2019-08-20 12:31:15
3694
3
原创 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
3809
1
原创 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
345
原创 mpvue 打开手机安装的地图软件进行导航
一、说明：小程序打开手机手机地图导航这个功能，小程序已经提供了相关的api，wx.openLocation(Object object)可实现改功能二、示例（1）、新增一个导航按钮 <i-button type="primary" @click="navigation">导航</i-button>（2） 、按鈕添加点击事件，...
2019-06-25 09:47:24
1060
原创 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
1397
原创 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
640
原创 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
190
原创 Sequelize值关联查询
一、介绍很多博客都有关于这方面的介绍，对于初学者来说是比较看起来比较困难，所以本文直接使用demo的方式进行演示比较全面的介绍可看这边博客：https://blog.csdn.net/awhlmcyn/article/details/79816478二、演示的场景在RBAC权限管理模型中，需要三张表，role(角色表)、access（权限表）、role_access(角色权限关联...
2019-06-19 22:28:44
2490
1
原创 react 之 openlayer图文标注
一、引入所依赖的库文件// 设置地图背景色import React, { Component } from 'react';import Map from '../../component/map/map';// 数据源import { Vector as VectorSource } from 'ol/source';// 图层import { Vector } from 'o...
2019-06-18 19:27:07
1096
原创 react 之 openlayer文字标注
一、引入依赖的库文件// 设置地图背景色import React, { Component } from 'react';import Map from '../../component/map/map';// 数据源import { Vector as VectorSource } from 'ol/source';// 图层import { Vector} from 'ol/...
2019-06-17 20:07:17
780
原创 react 之 openlayer地图标注
一、引入依赖的库文件import React, { Component } from 'react';import Map from '../../component/map/map';// 数据源import { Vector as VectorSource } from 'ol/source';// 图层import { Vector} from 'ol/layer';// ...
2019-06-13 20:04:32
711
原创 react 之 openlayer绘制箭头
一、引入依赖的库文件// 设置地图背景色import React, { Component } from 'react';import Map from '../../component/map/map';// import style from './map.css'import TileLayer from 'ol/layer/Tile';import XYZ from 'ol...
2019-06-12 19:26:13
784
原创 react 之 openlayer图形的激活与编辑
一、引入依赖的文件import React, { Component } from 'react';import Map from '../../component/map/map';// import style from './map.css'import TileLayer from 'ol/layer/Tile';import XYZ from 'ol/source/XYZ'...
2019-06-11 20:08:15
1815
原创 node使用jwt来创建token和解析token
一、使用基于 Token 的身份验证方法，在服务端不需要存储用户的登录记录。大概的流程是这样的：客户端使用用户名跟密码请求登录 服务端收到请求，去验证用户名与密码 验证成功后，服务端会签发一个 Token，再把这个 Token 发送给客户端 客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里 客户端每次向服务端请求资源的时候需要...
2019-06-10 21:06:53
4675
原创 react 之 openlayer图形交互编辑
一、引入依赖的库文件// 设置地图背景色import React, { Component } from 'react';import Map from '../../component/map/map';// import style from './map.css'import TileLayer from 'ol/layer/Tile';import XYZ from 'ol...
2019-06-10 20:28:46
1059
1
原创 react 之 openlayer绘制任意图形
一、引入所依赖的库文件// 设置地图背景色import React, { Component } from 'react';import Map from '../../component/map/map';// import style from './map.css'import TileLayer from 'ol/layer/Tile';import XYZ from 'o...
2019-06-07 09:47:01
809
原创 postGIS将shp数据导入postgres 数据库中，并在arcMap中显示数据
一、shp数据准备注意：postGIS导入shp数据路径不能含有中文，如果含有中文会报错，而且自己要知道自己的数据的坐标系二、打开postGIS（2）点击连接数据库，输入用户名、密码、数据库、以及数据库连接地址点击ok(3)点击add file添加shp数据（3）双击SRID的值，设置导入数据的坐标系，我的数据坐标系是4326（4）点击impor...
2019-06-06 16:00:44
2934
1
原创 react 之 openlayer 绘制几何图形
一、全部代码// 设置地图背景色import React, { Component } from 'react';import Map from '../../component/map/map';// import style from './map.css'import TileLayer from 'ol/layer/Tile';import XYZ from 'ol/sou...
2019-06-05 20:33:22
641
原创 react之openlayer根据坐标绘制图形
一、原理（1）首先创建一个要素，如点、线、面（2）根据要素创建一个数据源（3）根据数据数据源创建一个矢量图层（4）将创建的矢量的图层添加到地图上二、引入依赖的库文件// 设置地图背景色import React, { Component } from 'react';import Map from '../../component/map/map';// import...
2019-06-05 09:29:32
1759
1
原创 react 之 openlayer图层透明度设置
一、原理多个图层叠加，在上层图层中能看到下层图层的数据，可以设置图层的透明度，地图图层默认是不透明的二、引入依赖的库文件import React, { Component } from 'react';import Map from '../../component/map/map';import style from './map.css'import TileLayer f...
2019-06-03 19:57:43
3306
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人