做GIS梦的人

对于普通的开发者或者GIS从业者来说，免费的底图影像服务，太重要了。之前写过一篇，由于谷歌网站关闭已经不能用。最近又发现了谷歌在国内开放了其他地址，在这里给大家分享一下。卫星图无注记普通地图带注记偏灰色普通地图带注记偏黄色地形融合地图地形晕渲图卫星图+注记路网加注记/交通图（可以和其他图叠加）

一直以来，在Web前端读取文件，都比较麻烦。是一种常用的GIS文件格式，它至少由三个文件组成。前端读取选择多个文件比较麻烦，做成压缩包前端解析难度大。将文件传输到后端解析，传输耗时比较大，效率低。最近发现了一个npm组件——，利用它在前端项目中，可以和input组件配合解析ShapeFile文件。这个组件的很多Demo是基于node.js项目写的，一度导致我很怀疑在Vue项目中，它是否可以使用。最终，证明它是可以使用。它可以读取很多信息，这里我只展示一下如何读取.shp文件里的图形信息为GeoJson。

我在一台windows服务器上部署了ArcGIS Server10.8.1，由于网络限制，服务器的外网只开通了8083端口，于是我准备使用nginx对其进行代理，然后外网可以访问。在windows服务器上部署了nginx在8083端口。ArcGIS Server 禁用httpsArcGIS Server10.8.1默认启用https，而且使用的是6443端口。这就导致直接使用nginx转发会出现重定向的情况，部分情况转发失效。这里需要关闭ArcGIS Server的https访问，只使用http。

在进行ArcGIS Runtime API for Android（100.12.0） 二次开发时，发现现在支持.tpk和.geodatabase等多种格式的离线数据，其中mmpk只有使用ArcGIS Pro才能生成，这里我简单介绍一下如何使用ArcMap10.8.1生成tpk和geodatabase包环境windows 10ArcGIS 10.8.1准备直接打开ArcMap是无法找到生成TPK和geodatabase的入口的，需要先在ArMap菜单栏点击，自定义——ArcMap 选项 ，.

问题描述我的ArcGIS Server10.8.1正常安装，并正版授权，安装过程中无任何错误。安装完成后，服务里的ArcGIS Server服务未启动，右键启动时，弹出如下提示：本地计算机上的ArcGIS Server服务启动后停止。某些服务在未由其他服务或程序使用时将自动停止。并且进入无法进入ArcGIS Server Manager的管理界面，页面无响应。环境window10ArcGIS Server10.8.1原因分析这是因为，在安装ArcGIS Server时，默认会给wind

Three.js 实现点击模型改变颜色想实现点击模型，改变模型颜色的效果。在网上看了一些代码，发现特别搞笑，很多的博客给出的计算代码都是错误的，根本无法实现点击效果，还在不同的博客相互的复制，只能感叹抄袭党太多。下面我简单的介绍一些我的方法，我是在Vue中开发的。文章目录Three.js 实现点击模型改变颜色三维空间点击事件的原理环境准备代码实现效果展示注意事项三维空间点击事件的原理在三维空间内判断鼠标点击的是哪个模型，核心的原理还是射线碰撞，*即从相机（camera）的中心点到屏幕上鼠标点组成

three.js 实现管道流动特效想在系统里实现在管道上指示水或液体的流向，在网上查阅了很多资料，也是经历的比较多的麻烦。网上部分代码不可用，还有一部分代码使用定时器实现，流动效果比较卡段这里给大家分享一下。文章目录three.js 实现管道流动特效环境准备代码展示效果展示注意环境准备基于vue的环境准备，可以参考我之前的博文基于管道体模型的加载，可以参考这篇使用Three.js 展示管道体TubeGeometry代码展示<template> <div id="a

使用Three.js 展示管道体TubeGeometry网上关于使用Three.js加载管道体的demo，不少，但是没有完整的例子，很多都是基于老旧代码运行的，。这里我使用基于Vue的场景，展示一下如何显示管道体。文章目录使用Three.js 展示管道体TubeGeometry环境准备编码1. 自定义随机路径类2. 场景展示效果展示环境准备基于vue的环境准备，可以参考我之前的博文编码1. 自定义随机路径类import { Vector3, Curve} from 'th

在上一篇博文中，介绍了如果使用three.js加载gltf三维模型。这里介绍一下如何加载Obj模型。其实原理和方法都是类似的，只是换了一个解析的依赖 OBJLoader.js。多余的代码，不再写了，可以参考上一篇博文。依赖OBJLoader.jsimport { BufferGeometry, FileLoader, Float32BufferAttribute, Group, LineBasicMaterial, LineSegments, Loader, Material, .

目录前言下载依赖改造插件主要代码效果前言最近需要做一个three.js加载三维模型的，才发现three.js的官网和网上的示例挺乱的。甚至有人说把three.js的全部demo下载下来，替换其中的页面，学习者自己操作起来挺难的。这里我就已在vue项目中为例，介绍一下如何实现使用three.js加载三维模型。下载依赖npm install three --save改造插件three.js官网demo里提供了加载gltf模型的插件，但是这里需要改造一下GLTFLoader.jsimport

前言前面的博文中介绍了一下如何在地图上展示饼状图和柱状图，下面简单介绍一下如何在地图上绘制折线图：使用方式下载依赖npm install mapbox-map-tool --save引入组件import {LineCustomLayer} from "mapbox-map-tool";import "mapbox-map-tool/dist/css/mapbox-map-tool.css"//建议在main.js中全局引入代码中使用let chartLayer = new

前言前面的博文中介绍了一下如何在地图上展示饼状图，下面简单介绍一下如何在地图上绘制柱状图：使用方式下载依赖npm install mapbox-map-tool --save引入组件import {BarCustomLayer} from "mapbox-map-tool";import "mapbox-map-tool/dist/css/mapbox-map-tool.css"//建议在main.js中全局引入代码中使用let chartLayer = new BarCu

前言最近看到了一个Cesium的罗盘插件，可以用于操作视图。博主这边直接将开发了一个适用于MapboxGL的罗盘组件，用户体验上和Cesium的罗盘插件基本是一致的，支持旋转和倾斜地图，并封装发布到了NPM，需要的同学们可以参考一下。使用方式下载依赖npm install mapbox-map-tool --save引入组件import {CompassControl} from "mapbox-map-tool";import "mapbox-map-tool/dist/css/m

前言之前在网上看了一个MapboxGL与Echarts集合的例子，个人感觉用处不大，效果就是相当于把Echarts的一些地图demo地图换成了Mapbox，无法实现根据坐标在地图上动态渲染饼图的功能，这里我自己封装了一个工具，下面简单介绍一下用法使用方式下载依赖npm install mapbox-map-tool --save引入组件import {PieCustomLayer} from "mapbox-map-tool";import "mapbox-map-tool/dist

前言目前有一张tif格式的栅格影像，需要在web地图上进行展示，使用动态切片WMS的方式，渲染速度比较慢，而且大的时候会出现模糊的问题。并且后面需要做多期影像的切换，渲染与加载效率也值得关注。计划是使用栅格转矢量的方式，将栅格数据转为矢量shp文件，然后进行矢量切片，使用Mapbox进行前端动态渲染。在网上查询了很多资料，有人说使用d3-contour在node.js中生成或者使用rasterio在python中进行转换，整体过程都比较麻烦，很不易实现。最终选定了使用GDAL进行栅格转矢量的方法，代

背景最近需要做一个机遇Mapbox的绘制功能，虽然mapbox-gl-draw这个插件很好，但是不支持撤销和重做功能，于是自己封装了一个Mapbox控件，方便大家使用。主要是练习一下如何封装Mapbox的控件。实现了如下功能：多边形绘制 撤销点 重做点 双击地图完成绘制 右键地图完成绘制代码使用方法安装依赖npm install gykj-map-core --save代码引用 import {DrawAreaControl} from "gykj-map-core".

最近要在地图上动态展示各行政区的统计数据，要求是饼图。因为同时存在多个饼图，所以Mapbox的echartsLayer插件没办法用。但是和Mapbox的官方一个实例有些类似，博主改造了一下。实现了下面的效果：效果原理给Mapbox添加自定义的Marker,其中的内容使用svg填充，根据数据动态计算svg内的path。代码<template> <div id="map"> </div></template><scr

geoJson与wkt都是WebGIS开发中经常用到的格式，很多时候WebGIS前端开发人员需要在二者之间进行互相转换。去让后端开发人员写个接口，太浪费时间，可以尝试用terraformer-wkt-parser进行一下二者的转换。虽然很简单，网上有些地方对其用法说的却不对。这里我说一下，这个插件主要有两个函数 parse(string) wkt转为geojson convert(string) geojson转wkt 插件的安装npm install terrafo

关于使用MapBox GL进行图形绘制，很多人都在使用mapbox-gl-draw。但是它只是封装了一些简单的点、线、面的绘制功能。最近的一个项目提出了要求在手机上用手指拖动实现多边形涂鸦绘制，要求实时记录点。开始一直使用mapbox-gl-draw来做，但是始终无法实现手指拖动绘制的功能。最后，通过监听touch事件，实时改变source实现了这个效果。效果如下图：代码如下：注意，这里使用的监听事件，仅适合移动端使用，或者将Chrome调成移动端模式<template>

这次遇到了一个小问题，postgresql只能到处geojson（毕竟是一个标准格式），而客户需求的是ArcGIS支持的EsriJson格式。需要在数据之间进行一个转换。再网上查阅了一定资料，最后发现下面的代码比较可行。这里分享一下：主要代码package com.cic.analysis.business.utils;import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.JSONObject;import com.cic

前言目前博主在郑州的一家GIS公司工作，从事农业大数据相关GIS项目开发。在郑州招聘一个WebGIS开发者不太容易，这可能和郑州的整体大环境有关系，没有几家靠得住的GIS公司。在公司也经常做技术面试，其中包括做一些WebGIS开发的人。也有一些感触，今天就不分享代码了，来谈谈这些感悟。什么是WebGIS开发经常遇到一些人说，"我做过GIS，我开发过高德地图"，也有人说，“我想学习GIS开发，你指导我一下吧！”。凡此种种，不胜枚举。只会高德地图或百度地图开发，恐怕还算不上会GIS开发。任何一个前端

ArcGIS API for JavaScript4.9在9月份出来了，对于开发者还是有很重要的更新的。 2D地图WebGL全面支持（重要） 这个功能还是挺有用的，在4.8的时候，还是仅仅支持ArcGIS Portal和ArcGIS Enterprise10.6以上版本的要素服务使用WebGL渲染的，而且还是需要太头部添加启用WebGL的标志。在4.9不用了，4.9二维地图默认采用Web...

最近遇到了在Openlayers上开发地图打印的功能，官网给了两个全图打印的demo。其核心思想是将canvas里的像素提取出来。全图输出，保存为本地图片map.once("postcompose", function(event) { var canvas = event.context.canvas; if (navigator.msSaveBlob) { ...

利用地图下载器下载的已经切好的Google影像切片TMS格式，如何发布供本地使用呢？图片格式如下：解决方案本地安装tomcat或者其他的web容器，将文件放在tomcat的webapps文件夹下然后启动tomcat，就可以访问到了在openlayers访问该服务器的地址代码如下所示：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;...

在做Openlayers里做地图开发的时候，会出现地图重复出现的问题。如下图这种问题尝试了很多方式，给你Map/View设置Extent，都没有什么作用。最终解决方案：给地图的每一个layer设置extent；Openlayers下的每一个图层基类都继承了这个接口，设置setExtent[-180,-90,180,90]，之后有效的解决了地图图层重复出现的问题...

因为实际需要，要在地图上设置鼠标经过一个矢量要素的时候，变换样式。使用Openlayers还是很容易实现的，代码如下： map.on('pointermove',function(e) { var pixel=map.getEventPixel(e.originalEvent); var feature=map.forEachFeatureAtPixel(pixel,fun...

因为性能关系，在Openlayers上同时显示过多时会造成卡顿，这里做成了根据图幅号查询图幅，并在地图显示。注意这里使用的是最新的图幅编号。代码是使用Vue写的，借鉴的时候需要注意一下 selectMapNumber() { const that = this; this.$prompt("请输入图幅号", "图幅选取", { confirmButtonTe...

在Openlayers地图上根据地图分幅规则，绘制分幅网格，需要注意的有几点：1确认什么比例尺时展示什么1:100万、1:50万...比例尺的分幅2根据地图当前视窗位置，动态绘制注记和网络，因为全部绘制的话，网格和注意太多，严重影像运行速度3绘制经线和纬线，不绘制网格，网格严重内存更多代码如下： addSheetNumber(number){ getLayerByName(this.$...

       在实际开发中，为了美观，需要设置Openlayers中地图div中除了地图之外的地方的透明度，这个通过设置.ol-viewport的样式就可以完成。项目测试代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;背景色测试&lt;/ti..

做开发时，很多人刚刚接触Openlayers，不知道在哪下载API、API DOC、Example。下面列举一下地址最新版API、说明文档、Example下载地址：https://openlayers.org/download/历史版本下载地址：https://github.com/openlayers/openlayers/releases/...

在工作种，GeoServer可能因为工作需要，要换一台电脑。大量的已经配置的图层和样式文件就比较麻烦了。在这里告诉大家一个我已经用过的方法。在新电脑上安装一个和现有GeoServer版本号一样的GeoServer。在安装完成后，停止Geoserver服务，删除安装目录下的所有文件，可能显示文件占用，需要重启多删两次。其他的东西都不要更改。将旧电脑GeoServer根目录下的所有文件复制

因为项目需要，要在高德地图上添加自己的地图服务器发布的地图，想到了通过WMS来添加。在网上找到了两篇相关的博文，用他们的代码都无法实现，后来感觉这两个人根本就没有实际去做，代码里有同样的逻辑性错误。自己修改了一下，实现效果如下图所示：首先定义实体类：public class Gps { private double wgLat; private double wgLon; ...

      GeoServer默认只支持基于PostGIS插件的PostgreSQL数据库，在实际项目中，很多单位或部门都是不使用PostgreSQL数据库的，安装两个数据库也没有必要，因此在网上查询了一下GeoServer的资料，发现GeoServer支持居然支持几十种数据库，只是需要安装插件。支持的数据库和差价如下图所示geoserver-2.13.1-app-schema-plugin.zi...

最近一时感兴趣，想要测试一下GeoServer的并发性能，毕竟现在的GIS项目越来越需要考虑并发性能。一时兴起测试一下，非专业测试人员。如果产生错误还请原谅。测试环境硬件环境：软件环境：GeoServer2.13.0（非服务方式安装），测试工具：jmeter4.0测试服务：WMS（实时计算与渲染的服务）地图服务使用水经注下载了一个4M左右的影像，在geoServer中发布高并发测试设置在GeoSe...

前面写了一篇 GeoServer添加对各类数据库的支持、包括MySQL、SQLServer，中间叙述了GoeServer添加各类数据库支持的办法，最近又深入研究了一下，发现文章还需要补充。例如按照那篇博文中的方法，添加插件之后是下面这样的，中间的两个SQLServer选项点进去，里面的各种选项都让人无语，一般人根本不知道怎么填写。 这两天又深入研究了一下，发现，仅仅那样做还是不够的，还...

Leaflet是一款开源的轻量级地图插件，但是个人人为这个轻量级有点假，因为轻的代价就是很多东西都没有，需要插件或者自己扩展，在别人的基础上修改了加载百度地图的功能。       首先，需要使用leaflet的一款proj4插件。然后才能使用下面的代码。 测试 > var crs = new L.Proj.CR

Leaflet调用各种地图的功能十分复杂，幸好有leaflet.ChineseTmsProviders这个插件，这四种地图直接就可以加载进来，十分方便。下面是我做的例子：

spatiallite是一个轻量型的空间数据库，可以将GIS的点线面数据以GeoJson的格式读取出来，但是这个GeoJson的格式与Leaflet的GeoJson格式不同，具体的格式大家可以去网上看。这里公布一下，转换的代码： public void queryGeometry(String tableName) { net.sf.json.JSONObject j

使用LeafLet做的最短路径查询，服务使用的是前两篇博文中的地图服务，只是 将OpenLayer换成了LeafLet;效果图：核心部分代码如下：var route = { num: false, startPoint: null, endPoint: null, routingLayer: null, startMarker: null

       在上一篇基于postGIS的室内地图最短路径算法二中，在路径搜索中加入了楼层分析的概念。在使用过程中会产生一个问题就是，只给出了路网上的线，没有给出起点、终点到路网的连线，用户体验很差。       在这里加入了起点终点到路网分析结果的连线，最后返回，geoserver和leaflet部分代码同前两篇路径分析代码一致，这里就只给出数据库代码：DROP FUNCTION pgr_flo...