- 博客(47)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 vue+openlayer加载geojson通过地图的singleclick事件实现要素的选中高亮以及再次点击取消选中
思考：选中： 通过singleclick事件可以获取坐标点，openlayer中Feature有个getGeometry().getClosestPoint§方法，就是feature根据这个p坐标可以获取到里这个点最近的坐标点，然后咱们通过这个点和点击的点的距离进行比较，并且咱们也可以进一步的进行限定（判定点击的坐标在feature的边界内），这样做还是有问题，就是你还有可能选中不相关的点或者线，咱们可以做一个工具，也是使用openlayer加载geojson，然后通过选中你想要进行标定的要素，将这些块的
2020-07-01 17:41:51
2049
原创 vue+openlayers加载geojson 限定（过滤）一些feature（要素）不能被选中或者指定某些feature能够被选中
需求：公司场所对工位、办公室、会议室等进行标定，选中时不能选中灯管，地毯，无关的线和点思考：咱们可以获取到所有的要素(feature)，通过AutoCAD打开cad文件时你可以发现，要素是有类型的，然后咱们使用openlay加载geojson时在控制台打印feature会发现feature.values_.RefName这个字段和autocad里面发现的类型是一致的，ok，可以开始完成了解决方案：你可以做一个工具，也是使用openlayer加载geojson，然后通过选中你想要进行标定的要素，将这些
2020-07-01 17:32:19
1949
原创 geoserver使用rest上传shp数据发布服务时解压失败导致视图无法预览
日志中出现的问题：ERROR [geoserver.rest] - Error occured unzipping fileorg.geoserver.rest.RestException 500 INTERNAL_SERVER_ERROR: Error occured unzipping filejava.util.zip.ZipException: error in opening zip file一开始一点头绪都没有，我同事负责上传的文件是没有问题的，于是我手动使用curl指令在服务器上发布
2020-06-16 12:34:36
973
原创 NodeJS通过SHP（Shapefile）压缩包（zip）路径自动发布geoserver服务
第一步：安装相关依赖npm install child_process --save第二步：了解curl发布geoserver服务的指令新建工作区：curl -v -u admin:geoserver -XPOST -H "Content-type: text/xml" -d "<workspace><name>namespace</name></workspace>" http://localhost:8082/geoserver/rest/wor
2020-06-10 16:53:54
1124
原创 unbuntu服务器部署安装geoserver
第一步：上传压缩包使用SecureCRT连接到服务器，并将geoserver压缩包上传上去，geoserver-2.17.0-bin.zip(和我描述的下面的geoserver.zip是一样的)第二步：解压缩使用unzip解压geoserver压缩包apt-get install unzipunzip geoserver.zip第三步：下载安装openjdkapt-get updateapt-get install openjdk-8-jdk安装后使用java -version
2020-06-06 14:13:28
643
原创 在vue中使用leaflet加载矢量切片（pbf）
第一步：安装依赖首先你的先安装两个依赖：leaflet和leaflet.vectorgridcnpm install leaflet --savecnpm install leaflet.vectorgrid --save第二步：获取url注意：咱们用leaflet加载的是pbf，使用的L.vectorGrid.protobuf，如果需要加载geojson,使用的是L.vectorGrid.slicer首先打开geoserver，点击图标Geoserver标志然后点击TMS下面的1.0.0
2020-06-06 12:28:57
3351
1
原创 geoserver发布矢量切片（pbf,geojson,png等）
geoserver如何配置和下载我就不多说了，详情请见：geoserver的配置与发布，下面的这个四个jar包必须复制到指定目录，否则无法发布矢量切片的第一步：创建一个Gridsets（Create a new gridset）点击左侧栏框中Tile Caching下面的Gridsets按钮，然后点击Create a new gridset第二步：点击Tile Layer选中你之前发布好的图层，首先将下面图中框中的选中然后选择你创建好的Gridset,点击保存第三步：切割并发布适量切片
2020-06-06 12:06:01
5313
2
原创 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
285
原创 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
425
原创 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
2025
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
9159
原创 vue+openlayers设置地图背景颜色（本例子为背景颜色设置为黑色）
思考：我之前用的是JavaScripts+openlayers，在网上搜了很多资料，自己也尝试了很多次，都没有设置成功，貌似不可行，估计需要拿过来的地图就是黑色的，这个可以去找黑色地图（我没找啊，因为后来需求变了，需要将openlayers集成到vue中，于是我就改变策略了），vue+openlayers设置背景颜色其实很简单，只需要设置地图所在的div的背景颜色即可代码：<template> <div id="map" class="mapStyle" ref="rootma
2020-05-22 16:16:32
7153
原创 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
4220
原创 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
2697
原创 arcgis.js加载geojson
首先需要下载js文件geojsonlayer.js直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="
2020-05-20 16:15:14
1493
原创 git配置以及日常工作中用到的操作教程
第一步：git配置下载并安装git https://git-scm.com/download、基础配置git config --global user.name "Your Name"git config --global user.email "email@example.com"配置公钥（1）本地bash命令生成公钥：ssh-keygen -t rsa -C "youremail@example.com"（2）查看生成的公钥less ~/.ssh/id_rsa.p
2020-05-19 17:05:08
170
原创 openlayers.js加载geojson时绑定单击事件，点击空白处选中最接近的要素（比如一个线性图形下面有个多边形，在线性图形空白处点击时会选中多边形，而你想要选中线性图形）
背景：之前我写过一篇文章解决这个问题的点击此处查看，所以就不在这里详细介绍问题了，但是呢不够官方，是我自己凭空想象而来的，下面我要介绍的就比较官方了，因为是比对官方文档api来获取的第一步：首先咱们依旧需要遍历所有feature这次参考官方apiol/source/Vector的getFeatures()方法去获取所有feature直接获取是获取不到的，我也说不了这个是异步的还是说图层加载完成之后才能获取，所以我干脆就直接来个定时器代码：if(timer){ clearInterval(ti
2020-05-13 11:23:11
462
1
原创 GeoServer解决cors跨域问题
第一步：首先下载需要的文件，解压后将cors-filter-2.4.jar和java-property-utils-1.9.1.jar，两个jar包文件放入geoserver目录下webapps\geoserver\web-inf\lib中。第二步：打开geoserver目录下webapps\geoserver\web-inf中的web.xml然后添加过滤器代码：<filter> <filter-name>CORS</filter-name> <fil
2020-05-12 18:05:55
369
原创 java根据一个完整的geojson文件，根据图层名称导出单个图层的geojson文件
第一步：先熟悉geojson的数据结构geojson将所有的地理要素分为Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon、GeometryCollection。感觉有篇博文讲的挺好，大家可以去看一下geojson数据结构讲解第二步：试图使用Java代码去获取json里面你想要的图层里面的数据我之前写过一篇根据Java代码获取json数据的文章，大家可以去看一下java操作json文件第三步、代码实现：public s
2020-05-12 10:18:56
787
原创 openlayers.js加载geojson时绑定单击事件，点击空白处选中最接近的要素（比如一个线性图形下面有个多边形，在线性图形空白处点击时会选中多边形，而你想要选中线性图形）
第一步：问题分析当你在使用openlayers加载geojson时，使用ol.interaction.Select给map添加单击事件选中要素时，比如一个线性图形下面有个多边形，在线性图形空白处点击时会选中多边形，而不会选中线性图形，这应该怎么解决呢？代码： var selectSingleClick = new ol.interaction.Select(); map.addIntera...
2020-05-08 14:24:13
636
原创 opnelayers.js加载geojson实现选中一个块（要素）高亮所有相同的块（要素）
分析思路：首先实现选中一个要素，然后打印出一个Feature，然后在控制台看看不同的要素之间有什么区别，相同的要素之间有什么相同属性第一步：绑定单击事件，选中一个要素代码：var selectSingleClick = new ol.interaction.Select();map.addInteraction(selectSingleClick);selectSingleClick....
2020-05-07 10:02:20
387
原创 JS定时器如何和for循环搭配使用
问题：像平时我们直接去在for循环里面设置定时器的话，你会发现他就只会执行一次。例如：for(let i= 1;i<layers.length;i++){ let s = layers[i].getSource().l for(let i = 1; i < 10; i++) { clearInterval(i); } setTim...
2020-05-06 15:14:45
1881
原创 openlayers.js通过map遍历所有图层中的feature
具体API参考openlayer代码：var map = new ol.Map({ layers: [gaodeMapLayer], view: new ol.View({ center: [0.281830008803421,0.245858887676368], projection: 'EPSG:4326', zoom: 1...
2020-05-06 14:38:09
3080
1
原创 js对象取属性值，打印这个对象可以看到这个属性，但是遍历该对象时获取不到key和value
代码：var layers = map.getLayers().a;console.log('layers',layers)for(var i= 1;i<layers.length;i++){ var s = layers[i].getSource().l console.log('source.l',s) for(let key in s){ ...
2020-05-06 14:28:19
3927
原创 使用openlayer显示geojson的时候，使用openlayers中interaction的select方法单击选中要素
直接上代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>高德地图+ol</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.co...
2020-04-26 14:59:29
567
1
原创 将geojson显示到JavaScript 页面上的几种方式（arcgis.js、openlayer.js、高德地图AMap）
第一种：通过arcgis.js将geojson展示到页面上：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...
2020-04-26 11:29:22
3847
2
原创 dxf转geojson，该软件会把dxf软件转为多个图层，多个图层又分为多个要素文件（即多个图层要素文件）
软件连接：添加链接描述使用：该软件是免费的，注册登录后即可进行转换该软件支持DWG、DXF、SHP、MDB、KML、KMZ、GPX、GeoJson、EXCEL、TXT、CSV、GeoTiff、Image(img)、Bitmap(bmp)、Png格式的数据文件。登录后初始页面：点击添加按钮 添加AutoCAD（Dwg、Dxf）文件：选择导出格式（GeoJSON），设置源坐标系和目标坐标...
2020-04-23 10:53:46
1814
1
原创 geojsonlayer.js 加载GeoJSON数据,页面显示可选中，拖拽，缩放
注意事项：GeoJSON数据需要转换坐标系（我在这里使用的是wkid 3857）目录结构：页面使用代码arcgis.html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid...
2020-04-22 13:48:40
2024
原创 react-native打包报错：could not download org.eclipse.paho.client.mqttv3.jar
在build.gradle文件里面改动：原有代码：allprojects { repositories { mavenLocal() maven { // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm ...
2020-04-20 15:29:57
465
1
原创 React Native打包的时候报错，出现 Error: Duplicate resources
错误信息：解决方法：你会发现drawable_mdpi、drawable_xxmdpi等类似文件夹里面都会有个node_modules_reactnavigationstack_lib_module_views_assets_backicon.png文件，把这些文件删了就可以了...
2020-04-20 15:25:28
377
原创 SVN报错 Error: 'XXX' does not support the HTTP/DAV protocol
报错信息：Command: Checkout from https://XXX/!/#XXX/XXX, revision HEAD, Fully recursive, Externals included Error: The server at 'https://XXX/!/#XXX/XXX' does not support the HTTP/DAV protocol 原因：...
2020-04-20 10:07:49
26898
3
原创 java读取CAD（dxf）文件（获取layer，block，entity）
首先需要引入kabeja这个包直接上代码：package parse;import java.awt.Polygon;import java.io.File;import java.io.FileInputStream;import java.util.Collections;import java.util.HashSet;import java.util.List;impo...
2020-04-15 14:27:07
12489
19
原创 java中Iterator（迭代器遍历）一直循环获取第一个
错误代码： while(dxfdoc.getDXFBlockIterator().hasNext()){ DXFBlock dXFBlock = (DXFBlock)dxfdoc.getDXFBlockIterator().next(); System.out.println("LayerID: "+dXFBlock.getLayerID()+" Name: "+dXFBlock....
2020-04-14 15:04:33
3898
原创 java如何判断一个点在一条线段上
第一步：数学思路思考：首先肯定是要先证明该点是在一条直线上，我在上篇文章有介绍，可以去看一下，证明一个点在一条直线上，然后去想如何证明一个点在一条线段上，学数学的时候我们知道，如果一个点在一条线段上，那么他的横纵坐标肯定是在这条线段两端的横纵坐标之间，但是注意的是这条线段的斜率不同，该点横纵坐标和线段两端点之间的规律是不同的，所以在书写代码的时候要注意到这一点。第二步：书写个数学公式：//当...
2020-04-10 14:05:29
3124
原创 js错误集锦 函数在一个map循环遍历中进行返回值返回 结果在调用该函数时收不到返回值
错误代码：superviseFilter = () => { let company = this.props.cooperativeState.allCompany if(this.state.inspection.msName){ let list = null company.map(item => { if(item.comName == this.stat...
2020-04-09 17:01:13
1164
原创 java根据两条直线的四个坐标点证明这两条线平行（计算直线斜率）或者三个点在一条直线上
第一步：原理：1.若两条直线斜率存在,则:斜率相等,则这两直线平行;2.若两条直线斜率都不存在,则这两条直线也平行.所以说,如果两条直线平行,则它们的斜率相等【是错误的】 反过来:若两直线斜率相等,则这两条直线平行【是正确的】第二步：思路：证明两条直线平行，肯定是证明斜率相同比较容易，因为根据坐标求斜率比较简单，但是需要注意的是，当直线平行于y轴的时候斜率是不存在的，所以在写代码的时候要考...
2020-04-08 14:26:44
2644
原创 android 蓝牙开发 通过蓝牙模拟ibeacon发送信号实现定位功能（后台运行或杀掉进程后仍然可以扫描ble信号，扫描到之后开始模拟ble发送广播）
一开始没思路，然后开始漫长的摸索道路
2020-04-07 18:23:15
2453
1
原创 dxf转geojson后，使用java代码找出dxf每个图层中的标志性图标（三角形、四边形等等）
第一步：先熟悉geojson的数据结构geojson将所有的地理要素分为Point、MultiPoint、LineString、MultiLineString、Polygon、MultiPolygon、GeometryCollection。感觉有篇博文讲的挺好，大家可以去看一下geojson数据结构讲解第二步：试图使用Java代码去获取json里面你想要的图层里面的数据我之前写过一篇根据J...
2020-04-07 15:22:56
1464
1
GeoServer配置解决cors跨域问题的依赖jar包和配置说明.zip
2020-05-12
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人