liuzhenghe30265-CSDN博客

Vue.js2+Cesium一、初始化DemoGithub初始化环境node V10.15.0npm 6.4.1<template> <div id="cesium-container" style="width: 100%; height: 100%;" /></template><script>/* eslint-disable no-undef */export default { data () {

2022-05-30 23:00:00 351

原创 Vue.js 带拖动和播放功能的时间轴

drag-timeline-vue带拖动功能的时间轴DemoGithub📦 Installnpm install --save drag-timeline-vue全局引用main.jsimport DragTimelineVue from 'drag-timeline-vue/packages/index'Vue.use(DragTimelineVue)🔧 Usage <DragTimelineVue v-model="timelineValue"

2022-03-05 23:58:08 7829 18

原创 vue-awesome-swiper 实现 tab 切换效果

vue-awesome-swiper 实现 tab 切换效果Githubvue-awesome-swiper 3.x安装 vue-awesome-swiper 3.x 时会自动安装 swiper 4.xnpm install [email protected] --save<template> <div id="app"> <h5swiper ref="swiperTitle" class="swiper-title" :op

2021-08-16 17:21:36 752

原创知识图谱可视化vue.js + d3.js

Github前端 vue.js + d3.js。需求上部区域展示所有的概念类别、以及画布内他们的个数展示所有关系类别，以及画布内他们的个数显示所有的概念场景（scenes 字段）、关系场景（source 字段）及画布的个数点击可选中和取消选中，取消选中时，批量隐藏对应的类别图像区域有按钮可控制缩放整个可视化页面可全屏图像区域内图形化展示概念名、关系名、关系概率（如有）非展示 id；未缩放时，图形展示可看清的大小，不一定展示全局。单击概念，弹出概念选项：a.固定：固定节点位置.

2021-05-06 10:04:37 7991 11

原创 Vue.js2+ArcGIS3五、轨迹回放

Github轨迹回放功能<template> <div id="map-container" style="width:100%;height:100%;"> <div style="position:absolute;right:50px;top:50px;z-index:999;"> <button @click="trackPlayBackInit()">轨迹回放.

2020-12-26 16:21:04 1104 1

原创 Vue.js 实现时间轴功能

GitHub时间轴组件封装Main.js<template> <div class="timeline-main"> <div class="timeline-axis"> <div class="axis-item" v-for="(time, index) in dateTimes" :key="index"> <div class="axis-item-tick" .

2020-11-28 10:57:51 5079 2

原创 Vue.js+VueRouter+Vuex 实现用户登录、注销功能

GitHubVue.js+Vue Router+Vuex实现用户登录、注销功能登录页面Login.vue<template> <div class="login"> <input type="text" placeholder="用户名" v-model="loginForm.username"> <input type="text" placeholder="密码".

2020-11-26 09:51:22 2289

原创 Vue.js实现日历功能

Vue.js 实现日历效果Github功能需求使用 Vue.js 实现指定年月的日历表，配合后台接口数据，添加对应日期的空气质量描述等信息。后台传递当月空气质量指数的数据，前端生成日历表后将空气质量指数添加到对应日期上。空气质量数据示例：data.json{ "code": 200, "msg": "", "data": [{ "time": "2020-08-01", "kqzl": "优" }, { "time": "202

2020-11-17 14:09:21 2728 6

原创 Vue.js2+ArcGIS3五、加载 ArcGIS REST Services

PreviewOnline Demo空间统计方法<template> <div id="map-container" style="width:100%;height:100%;"> <div style="position:absolute;right:50px;top:50px;z-index:999;"> <button @click="spatialStatisticsFun('point'

2020-11-14 16:27:45 1519 3

原创 Vue.js2+ArcGIS3四、热力图

PreviewOnline Demo封装空间测量方法带删除当前点击的标注功能。measure.jsexport default { measure(map, gisConstructor, options) { options.map = map // eslint-disable-next-line no-undef dojo.declare('measureLayer', gisConstructor.GraphicsLayer, {

2020-11-14 16:27:13 3583 14

原创 Vue.js2+ArcGIS3三、添加自定义图形标注

PreviewOnline Demo添加标注功能方法封装<template> <div id="map-container" style="width:100%;height:100%;"> <button style="position:absolute;right:50px;top:50px;z-index:999;" @click="addCustomSymbolsLayer">自定义标注</button&g

2020-11-14 16:26:41 2929

原创 Vue.js2+ArcGIS3二、绘制工具（标绘、空间测量、空间统计）

PreviewOnline Demo一、ArcGIS REST Services二、加载 MapServer加载 MapServer 可以使用 ArcGISTiledMapServiceLayer（切片服务图层）、ArcGISDynamicMapServiceLayer（动态服务图层）方式。底图使用 ArcGISTiledMapServiceLayer，有标注的地图服务使用 ArcGISDynamicMapServiceLayer。<template> <div id=

2020-11-14 16:26:07 2764 8

原创 Vue.js2+ArcGIS3一、初始化地图

PreviewOnline DemoArcGISArcGIS 官方文档一、安装 ArcGIS 官方加载依赖 esri-loaderesri-loader 官网npm install esri-loader --save-dev二、添加地图初始化页面InitMap.vue<template> <div id="map-container" style="width:100%;height:100%;"> </div></temp

2020-11-14 16:25:31 3104 8

原创不借助 vue-cli 工具自行搭建 vue 项目

一、初始化项目1.1、新建 package.jsonnpm init1.2、安装依赖npm 安装 vue、vue-router、vue-loader、webpack、webpack-cli，这些只是开发环境所需要的依赖，使用 --save-dev 安装到开发环境（见 package.json devDependencies）下：npm install vue vue-router vue-loader webpack webpack-cli --save-devwebpack 4.x 已经把

2020-06-16 16:09:39 2167

原创关于弹窗拖拽问题

Element DialogElement Dialog 对话框，自身不带拖拽功能，需要添加。dialogDrag.js/* eslint-disable */import Vue from 'vue'// v-dialogDrag: 弹窗拖拽Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__h

2020-06-11 17:57:40 325

原创 el-tree 在 v-for 中获取不到 getCheckedNodes

element-ui 中 el-tree 在 v-for 中使用，获取不到 getCheckedNodes() 和 getCheckedKeys()，报错：Error in v-on handler: “TypeError: this.$refs.tree.getCheckedNodes is not a function” <el-tree :data="layerControl" show-checkbox node-key="id" :props="defaultProps"

2020-05-19 18:29:44 3278

原创 Vue.js2+OpenLayers6 八、聚合

标绘功能封装import Draw from 'ol/interaction/Draw' // 标绘 data() { return { drawState: null, // 绘制状态 } }, methods: { // 根据 name 移除图层 removeLayerByName(name) { let layers = this.map.getLayers().getArray() let filtLaye

2020-05-14 17:57:35 488

原创 Vue.js2+OpenLayers6 七、热力图

一、封装空间测量方法官网的空间测量示例。方法封装：measure.jsimport Draw from 'ol/interaction/Draw'import { unByKey} from 'ol/Observable.js'import Overlay from 'ol/Overlay'import { getArea, getLength} from 'ol/sphere.js'import { Point, LineString, Polygon} f

2020-05-13 18:16:59 505

原创 Vue.js2+OpenLayers6 六、空间测量

一、添加移动动画效果import { easeIn, easeOut } from 'ol/easing' // 动画效果二、封装方法InitMap.vue // 设置中心点 setCenterPoint(point) { this.map.getView().animate({ center: point, duration: 500, easing: easeOut }) let centerPo

2020-05-12 18:14:22 656

原创 Vue.js2+OpenLayers6 五、标绘（添加自定义文字标注）

《Vue.js+OpenLayers 4、添加自定义矢量标注》中有对添加自定义矢量标注的方法进行封装，如果有多个标注，添加的方式是一个标注作为一个图层，这样会生成很多图层。这里修改并优化一下，一个图层中添加多个矢量标注。一、添加标注功能方法封装InitMap.vue methods: { // 设置标注文字样式 getStyls(feature, iconOption) { let Styles = [] Styles.push( new Ol

2020-05-11 18:32:20 2572

原创 Vue.js2+OpenLayers6 四、添加覆盖图层

一、添加标注功能方法封装添加矢量标注所需依赖，并封装方法。InitMap.vue/* eslint-disable no-unused-vars */import mapConfig from '@/mapConfig' // 地图配置import "ol/ol.css"import Map from "ol/Map"import View from "ol/View"import TileLayer from "ol/layer/Tile"import TileWMS from "ol/

2020-05-09 17:53:24 893

原创 Vue.js2+OpenLayers6 三、添加自定义矢量标注

DemoGithub

2020-05-08 18:30:05 1029 5

原创 Vue.js2+OpenLayers6 二、添加 GeoServer 发布的 wms 服务

一、查看 GeoServer 发布的 wms 服务二、添加地图配置我的项目中用的是 GeoServer 发布的天津东丽区的 wms 服务，添加地图配置，方便管理。mapCongif.jsexport default { map: { geoserver: 'http://******/geoserver/DLQ/wms', view: { projecti......

2020-05-07 17:45:04 565

原创 Vue.js2+OpenLayers6 一、初始化地图

DemoGithubOpenLayers 中，图层使用 layer 对象表示：常用的有 Image（图片图层）、Tile（切片图层）、Vector（矢量图层）、Heatmap（热力图）。初始化环境初始化页面中添加 OpenLayers 需要的所有依赖，以及地图交互方法的封装，这里底图使用 OSM。InitMap.vue......

2020-05-07 17:43:12 662

空空如也

空空如也