vue
迷茫的小猿
一只学后端但必须做前端工作的程序猿
展开
-
vue+openlayer加载geojson通过地图的singleclick事件实现要素的选中高亮以及再次点击取消选中
思考:选中: 通过singleclick事件可以获取坐标点,openlayer中Feature有个getGeometry().getClosestPoint§方法,就是feature根据这个p坐标可以获取到里这个点最近的坐标点,然后咱们通过这个点和点击的点的距离进行比较,并且咱们也可以进一步的进行限定(判定点击的坐标在feature的边界内),这样做还是有问题,就是你还有可能选中不相关的点或者线,咱们可以做一个工具,也是使用openlayer加载geojson,然后通过选中你想要进行标定的要素,将这些块的原创 2020-07-01 17:41:51 · 1943 阅读 · 0 评论 -
vue+openlayers加载geojson 限定(过滤)一些feature(要素)不能被选中或者指定某些feature能够被选中
需求:公司场所对工位、办公室、会议室等进行标定,选中时不能选中灯管,地毯,无关的线和点思考:咱们可以获取到所有的要素(feature),通过AutoCAD打开cad文件时你可以发现,要素是有类型的,然后咱们使用openlay加载geojson时在控制台打印feature会发现feature.values_.RefName这个字段和autocad里面发现的类型是一致的,ok,可以开始完成了解决方案:你可以做一个工具,也是使用openlayer加载geojson,然后通过选中你想要进行标定的要素,将这些原创 2020-07-01 17:32:19 · 1872 阅读 · 0 评论 -
vue 父组件和子组件相互传递值(父传子,子传父)
第一步:父组件传给子组件父组件:<template> <div> <h2>父组件</h2> <child :message="我是父组件传过来的值"></child> </div></template><script> import child from './child' export default{ components:{ child } }</原创 2020-06-02 18:55:34 · 253 阅读 · 0 评论 -
ES6 数组迭代器Symbol.iterator(场景:当选中一个之后,从选中开始迭代执行任务代码)
思路:首先找到你选中的元素,然后开始第一次执行任务代码,最后开始继续迭代代码://this.cameras是一个数组let iter = this.cameras[Symbol.iterator]() while(iter.next().value.cameraId === id){//id为你选中元素的id,目的是当你找到你选中的那个开始第一次执行任务代码,然后跳出while循环 this.$refs.HKWS.getCameraInfo(id)//任务代码 bre原创 2020-06-02 17:11:19 · 388 阅读 · 0 评论 -
vue导出csv文件 (通过json2csv前端导出)
第一步:安装依赖npm install json2csv -s第二步:代码实现下载方式 :IE浏览器 不支持a标签进行下载,会打开url 故对于微软系浏览器(IE和Edge)和非微软系列浏览器采用两种不同的方式进行下载IE和Edge 采用了 navigator.msSaveBlob 方法 此方法为IE10及以上特有,IE10以下勿采用非微软浏览器 使用a标签的click事件进行下载代码:rows: [ { title: '序号', key: 'Ordinal',原创 2020-05-27 09:56:33 · 1951 阅读 · 3 评论 -
Vue页面切换后,内存未释放(通过缓存路由来解决)
keep-alive详解:是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。 与 相似,只是一个抽象组件,它不会在DOM树中渲染(真实或者虚拟都不会),也不在父组件链中存在,比如:你永远在 this.$parent 中找不到 keep-alive 。第一种:缓存所有路由<keep-alive> <router-view></router-view></keep-al.原创 2020-05-25 16:34:41 · 8620 阅读 · 0 评论 -
vue+openlayers设置地图背景颜色(本例子为背景颜色设置为黑色)
思考:我之前用的是JavaScripts+openlayers,在网上搜了很多资料,自己也尝试了很多次,都没有设置成功,貌似不可行,估计需要拿过来的地图就是黑色的,这个可以去找黑色地图(我没找啊,因为后来需求变了,需要将openlayers集成到vue中,于是我就改变策略了),vue+openlayers设置背景颜色其实很简单,只需要设置地图所在的div的背景颜色即可代码:<template> <div id="map" class="mapStyle" ref="rootma原创 2020-05-22 16:16:32 · 6827 阅读 · 0 评论 -
vue+openlayers添加点击事件进行图片标记
思考:首先肯定是先创建一个图层,然后在该图层点击的位置添加一个feature(图片)代码实现: //创建矢量容器,当点击时将图标feature放进去 var iconVector = new VectorSource({ features:[] }) //创建图层 var iconLayer = new VectorLayer({ source:iconVector }) //将图层添加到地图上 this.map.addLayer(iconLayer) this.ma原创 2020-05-22 16:03:15 · 4130 阅读 · 0 评论 -
vue集成openlayers(vue+openlayers)加载geojson并实现点击弹窗教程
第一步:安装vue-clicnpm install -g @vue/cli第二步:新建一个项目1.新建项目 (vue-openlayers为项目名),并选择default模版vue create vue-openlayers2.安装openlayerscnpm i -S ol第三步:写业务代码1.删除掉HelloWorld.vue 新建 olmap.vue组件components/olmap.vue代码:<template> <div id="map" r原创 2020-05-21 18:17:22 · 2611 阅读 · 0 评论