笔记系列——开源GIS练习心得

最新推荐文章于 2023-04-26 16:20:31 发布

兔子州

最新推荐文章于 2023-04-26 16:20:31 发布

阅读量467

点赞数

分类专栏： GIS Vue

本文链接：https://blog.csdn.net/qq_41731732/article/details/103708752

版权

GIS 同时被 2 个专栏收录

7 篇文章 6 订阅

订阅专栏

Vue

4 篇文章 0 订阅

订阅专栏

OpenLayer 部分

基础导包

import Map from "ol/Map.js"
import View from "ol/View.js"
import {OSM} from 'ol/source.js'
import TileLayer from 'ol/layer/Tile'

基础地图

var osmSource = new OSM()

this.map = new Map({
    target: 'map',
    layers: [
		new TileLayer({
            source: osmSource
        })
    ],
    view: new View({
        center: [110， 39],
        zoom: 5
    })
})

投影

定义投影坐标

导入

import { fromLonLat } from 'ol/proj.js'

module:ol/proj.fromLonLat(coordinate, opt_projection)

参数
- coordinate 坐标为经度和纬度，即经度为1，纬度为2的数组
- projection 目标投影。默认是Web Mercator，即“EPSG: 3857”。
示例

view: new View({
	center: fromLonLat([-0.1275, 51.507222]),
	zoom: 12
})

将源坐标系转为指定坐标系

导入

import { transform } from "ol/proj.js"

示例

var view = new View({
    center: transform([110,39], "EPSG:4326", "EPSG:3857"),
    zoom: 5
})

图层

导入

import TileLayer from 'ol/layer/Tile.js'

继承

module:ol/layer/Layer~Layer

参数
- minResolution 最小分辨率，超过会显示空白，默认无穷大
- maxResolution 最大分辨率，超过会显示空白，默认0
- extent 显示范围，超过会显示空白
- visible 是否可见
- 详见
  
  https://openlayers.org/en/latest/apidoc/module-ol_layer_Tile-TileLayer.html
方法
- 详见：
  
  https://openlayers.org/en/latest/apidoc/module-ol_layer_Tile-TileLayer.html

加载geoserver 中 WMS

TileWMS 方法

导包

import "ol/ol.css";

import Map from "ol/Map.js"
import View from "ol/View.js"
import { OSM } from "ol/source.js"

import TileLayer from "ol/layer/Tile.js"
import TileWMS from "ol/source/TileWMS.js"
import { fromLonLat } from "ol/proj.js"

定义 view

this.view = new View({
    projection: 'EPSG:3857',
    center: fromLonLat([116.38,39.93]),
    zoom: 3
})

定义tilewms

this.tiledwms = new TileLayer({
    source: new TileWMS({
        url: 'http://localhost:5080/geoserver/webgis/wms',
        params: {
          format: 'image/png',
          version: '1.1.0',
          tiled: true,
          style: '',
          layers: 'webgis:BuildingPoint'
        }
    })
})

在 geoserver中，参照Layer Preview 中 Openlayer 显示中，url

http://localhost:5080/geoserver/webgis/wms?service=WMS&version=1.1.0&request=GetMap&layers=webgis%3ABuilding&bbox=73.62%2C18.11%2C134.77%2C53.56&width=768&height=445&srs=EPSG%3A4214&format=application/openlayers
url
- http://localhost:5080/geoserver/webgis/wms
version
- 1.1.0
layers
- webgis:Building
- 或在Layer Preview 页面中，查看图层名称
- 插入多个图层，只需写成数组即可

加载 geoserver 中 WFS

导包

import Map from "ol/Map.js"
import View from "ol/View.js"
import { OSM } from "ol/source.js"

import GeoJSON from 'ol/format/GeoJSON'
import {Vector as VectorLayer} from 'ol/layer.js'
import VectorSource from 'ol/source/Vector.js'
import {Stroke, Style} from 'ol/style.js'

定义 WFS JSON获取规则

var vectorSource = new VectorSource({
    format: new GeoJSON(),
    url: 'http://localhost:5080/geoserver/webgis/wfs?' +
        'version=1.1.0&request=GetFeature&typename=webgis:Building&' +
            'outputFormat=application/json&srsname=EPSG:3857'
        }
      });

定义 WFS 图层，并且定义要素颜色

var vector = new VectorLayer({
    source: vectorSource,
    style: new Style({
        stroke: new Stroke({
            color: 'rgba(0, 0, 255, 1.0)',
            width: 2
        })
    })
})

将WFS 图层添加到map中

this.map = new Map({
    target: "map",
    layers: [
        vector
    ],
    view: this.view
})

WFS 查询

导包

import Map from "ol/Map.js";
import View from "ol/View.js";
import { OSM } from "ol/source.js";

import { fromLonLat } from "ol/proj.js";
import GeoJSON from "ol/format/GeoJSON";
import { Vector as VectorLayer } from "ol/layer.js";
import VectorSource from "ol/source/Vector.js";
import { Stroke,  Style } from "ol/style.js";

// 查询
import EqualTo from 'ol/format/filter/EqualTo';
import WFS from 'ol/format/WFS';
import { equalTo as equalToFilter, like as likeFilter, and as andFilter } from 'ol/format/filter.js';

定义查询请求

var featureRequest  = new WFS().writeGetFeature({
    srsName: 'EPSG:3857',
    featureNS: 'http://localhost:5080/geoserver/webgis',
    featurePrefix: 'webgis',
    featureTypes: ['webgis:Building'],
    outputFormat: 'application/json',
    filter: equalToFilter('UserID', 1)
})

srsName
- 坐标系
featureNS
- 用于特性的命名空间URI。
- geoserver 网站中工作空间的 URI
featurePrefix
- 特性名称空间的前缀
- 工作空间名称
featureTypes
- 图层名称
outputFormat
- 输出格式
filter
- 筛选条件
- 类SQL
使用 fetch 发送请求，获取 json 数据

fetch('http://localhost:5080/geoserver/webgis/wfs', {
    method: 'POST',
    body: new XMLSerializer().serializeToString(featureRequest)
}).then(function(response) {
    return response.json();
}).then(function(json) {
    var features = new GeoJSON().readFeatures(json);
    vectorSource.addFeatures(features);
    map.getView().fit(vectorSource.getExtent());
})

filter

官方文档

ol/format/filter

https://openlayers.org/en/latest/apidoc/module-ol_format_filter.html
导包

import { equalTo as equalToFilter, like as likeFilter, and as andFilter } from 'ol/format/filter.js';

相当于封装了 WFS 请求

Select

Openlayers 封装的空间查询
导包

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import OSM from 'ol/source/OSM.js';

import GeoJSON from 'ol/format/GeoJSON.js';
import {Vector as VectorLayer} from 'ol/layer.js';
import VectorSource from 'ol/source/Vector.js';

import Select from 'ol/interaction/Select.js';
import {click, pointerMove, altKeyOnly} from 'ol/events/condition.js';

创建矢量图层

var vectorSource = new VectorSource({
      format: new GeoJSON(),
      url:
        "http://localhost:5080/geoserver/webgis/wfs?" +
        "version=1.1.0&request=GetFeature&typename=Building&" +
        "outputFormat=application/json&srsname=EPSG:3857"
    })

    var vector = new VectorLayer({
      source: vectorSource,
      style: new Style({
        fill: new Fill({
          color: 'rgba(255, 255, 255, 0.2)'
        }),
        stroke: new Stroke({
          color: "rgba(0, 0, 255, 1.0)",
          width: 2
        }),
        
      })
    })

注意！！！：如果矢量层是面状，必须定义样式Fill，否则无法选中！

创建查找

var selectPointerMove = new Select({
    condition: pointerMove
})

condition ：查询方式（点击、键盘、鼠标滑动）
应用

map.addInteraction(selectPointerMove);
selectPointerMove.on('select', function(e) {
    console.log(e)
});

点击地图获取经纬度

map.on('click', e => {
    console.log(e.roordinate)
})

使用动画移动至坐标

// 使用点击地图获取的坐标
view.animate({zoom: 4}, {center: e.coordinate})

// 使用坐标数组
view.animate({zoom: 4}, {center: [ 12329883.855039572, 1687729.5845366921 ])

禁止鼠标滚动和拖动地图

禁止鼠标滚动，只需要将view 最大最小 zoom 和 zoom 相同即可
导包

import DragPan from 'ol/interaction/DragPan'

定义一个获取 Pan（鼠标拖动）的函数

getPan () {
    let pan
    this.map.getInteractions().forEach(
        function(element, index, array) {
            if(element instanceof DragPan) {
                pan = element
            }
        })
    return pan
}

得到Pan 并设置动作为 false

let pan = this.getPan()
// false：当前地图不可拖动。true：可拖动
pan.setActive(false)

当地图窗口改变时

使用 setTimeout 时间间隔函数，并调用map.updateSize() 方法，更新地图窗口

setTimeout(() => {
    this.map.updateSize()
}, 1000)

GIS基础部分

墨卡托投影

基准面
- WGS 1984
假想一个与地轴方向一致的圆柱切或割于地球，按等角条件，将经纬网投影到圆柱面上，将圆柱面展为平面后，即得本投影
方式
- 纵向距离也是随着纬度增大而变长，横向变大
- 纵向也变大，而且变化比例接近（因为0.0000X纬度引起可忽略）
- 就是只把一个图形“原样放大”了,而形状却没有变化。
web墨卡托的经纬度投影范围：
- 经度[-180,180]
- 维度[-85.05112877980659, 85.05112877980659]
投影坐标范围
- x[-20037508.3427892, 20037508.3427892]
- y[-20037508.3427892, 20037508.3427892];
目前国内做数字城市方面的GIS项目、产品和公众应用，常涉及的投影方式主要有
- 面向局部区域的二维平面高斯投影（横轴墨卡托，横轴圆柱投影）
- 面向大范围（如全省、全国）的兰伯特投影（圆锥投影）
- 面向大范围的经纬度等间隔直投
百度、google、搜狗使用的投影
- web墨卡托
在市一级的小范围区域的GIS系统
- 高斯投影
影响
- web墨卡托虽然形状没变，但是高纬度地区的面积比真实同样放大了很多倍
- 地图切片同级别的比例尺不同
- 航线图是弯曲的

Web 墨卡托投影

并不是严格意义上的墨卡托投影
这个坐标系统是 Google Map 最先使用的
在 ArcGIS 中
- WGS 1984 Web Mercator (Auxiliary Sphere）
这个坐标在投影过程中，将椭球体近似为正球体做投影变换，虽然基准面是WGS 1984 椭球面。

WMS

详见

https://blog.csdn.net/xcymorningsun/article/details/60575543

WMS服务中的操作
- GetCapabilities（获取服务中的要素类及支持的操作）
- GetMap（获取地图）
- GetFeatureInfo（根据地图上的像素点获取更详细的要素信息，类似Identify功能

WFS

WMS与WFS的区别
- WMS是由服务器将一地图图像发送给客户端
  - 在使用WMS时地图由服务器绘制
- 而FS是服务器将矢量数据发送给客户端
  - 在使用WFS时地图由客户端绘制。

geoserver 部分

启动geoserver

安装
启动 bin/startup.bat
输入网址
- http://localhost:5080/geoserver/web/
输入密码
启动成功

工作区

工作区（有时又称为命名空间）是一个用于组织类似图层数据（数据集）的容器
把某个项目或工程的相关图层数据存放到一个工作区里
通过工作区的使用，可以避免相同图层名的冲突
- 在名为beijing工作区中的streets图层，引用时使用的是"beijing:streets"
- 在另一个工作区中同样名为streets图层，引用时使用的是"dc:streets"

新建工作区

单击”添加新的工作区“，进入新建工作区的界面，在这里需要输入工作区的名字和命名空间URI。
注意：
- 工作区名称是描述项目的标识符，它不能超过十个字符或包含空格。
- 命名空间URI（统一资源标识符）通常可以是与你的项目关联且添加了一个用于指示工作区的尾随标识符的URL，命名空间URI不需要解析为实际有效的Web地址。
示例
- 在Name文本框中输入"webgis"
- 在命名空间URI文本框中输入"http://localhost:8080/geoserver/webgis"
- 然后单击”提交“按钮。

在工作区中加入新的数据存储

数据存储维护着地图数据和文件系统中的文件夹的映射关系。
在GeoServer的Web管理页面窗口的左边单击”数据“中的”数据存储“.
点击”添加新的数据存储“
在GeoServer中，如果同时有栅格与矢量数据的话，则需要分别建立数据存储。
点击Directory of spatial files (shapefiles)，添加 Shapfile
设置工作区、数据源名称、shapfile 文件目录、字符集
注意：即使在文件夹中同时还包含栅格数据，也不影响创建矢量数据源的数据存储。只是如果想使用栅格数据，那么则需要另外新建数据存储。

发布图层

在想要发布的图层后面点击发布
设置参数
- 首先在“定义SRS”文本框中输入“EPSG:3857”，并将“SRS处理”设置为“强制声明”。
- 通过单击“从数据中计算”与“Compute from native bounds"计算并自动填充边框坐标
注意：
- 在该步骤中，如果选择了"Compute from native bounds"之后并没有计算出经纬度表示的边框
- 可能是GeoServer没能正确解析”定义SRS“文本框中输入的坐标参照系统。
- 需要单击”查找“按钮，然后选择EPSG:3857.最后再重新选择计算

浏览图层

单击”数据“中的"Layer Preview".
选择要查看的图层，点击 OpenLayers，或 All Formats 中选择一个

Tomcat 跨域问题

下载如下两个包

cors-filter-2.4.jar
java-property-utils-1.9.1.jar

将上述两个 jar 包放置在 Tomcat 根目录下 lib/ 文件夹下
更改在 Tomcat 根目录下的 config/web.xml 文件

 <filter>
	<filter-name>CORS</filter-name>
	<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
	<init-param>
		<param-name>cors.allowOrigin</param-name>
		<param-value>*</param-value>
	</init-param>
	<init-param>
		<param-name>cors.supportedMethods</param-name>
		<param-value>GET,POST,HEAD,PUT,DELETE</param-value>
	</init-param>
	<init-param>
		<param-name>cors.supportedHeaders</param-name>        
		<param-value>Accept,Origin,X-Requested-With,Content-Type,Last-Modified</param-value>
		</init-param>
	<init-param>
		<param-name>cors.exposedHeaders</param-name>
		<param-value>Set-Cookie</param-value>
	</init-param>
	<init-param>
		<param-name>cors.supportsCredentials</param-name>
		<param-value>true</param-value>
	</init-param>
</filter>
<filter-mapping>
	<filter-name>CORS</filter-name>
	<url-pattern>/*</url-pattern>
</filter-mapping>

重启 Tomcat 服务即可

geoserver2.15.0 跨域问题

下载两个 jar 包
- jetty-http-9.4.12.v20180830.jar
下载地址：https://search.maven.org/search
- jetty-util-9.4.12.v20180830.jar
下载地址：https://mvnrepository.com/
将两个 jar 包复制到根安装路径下 /webapps\geoserver\WEB-INF\lib\ 文件夹下
找到根安装路径下 /webapps\geoserver\WEB-INF\web.xml 文件
ctrl + F 搜索 cross-origin，一共有两个，都解开注释
重启服务即可

Geoserver 发布数据注意！

geoserver 发布的数据是从本机磁盘中直接发布的，储存的是本机的访问路径
不能将数据删除！！！

在vue中使用 OpenLayer

安装 openlayer

npm i ol -s

导入模块

import 'ol/ol.css'
import Map from 'ol/Map.js'
import View from 'ol/View.js'
import OSM from 'ol/source.js'

在mounted 生命周期函数中

mounted() {
	var osmSource = new OSM()
    this.map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: osmSource
        })
      ],
      view: new View({
        center: [-0.1275, 51.507222],
        zoom: 12
      })
    })
}

兔子州

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记系列——开源GIS练习心得

OpenLayer 部分基础导包import Map from "ol/Map.js"import View from "ol/View.js"import {OSM} from 'ol/source.js'import TileLayer from 'ol/layer/Tile'基础地图var osmSource = new OSM()this.map = new Map({...
复制链接

扫一扫