Openlayers + Vue实现GIS地图的一些常见问题（整理）_vue gis河流

本文是博主在开发过程中遇到的一些问题的整理。
学习教程为：《WebGIS之Openlayers全面解析（第二版）》一书。

Openlayers实现离线地图的实现方案

前端： Openlayers
后端： GeoServer

基于 JavaEE 的解决方案

GeoServer（服务器）
uDig（桌面软件）
Tomact（中间件）
PostGIS|MySQL空间扩展（数据库）
OpenLayers（JS）/OpenScales（Flex）（浏览器客户端）		
1
2
3
4
5

基础概念

坐标系

坐标原点（O）
长半轴（a）
短半轴（b）
扁率（f）
可分为两个系统
	地理坐标系（Geography Coor dinate System）
		经度、维度
		直接建立在椭球体上
	投影坐标系（Projected Coordinate System）
		米
		建立在平面上
1
2
3
4
5
6
7
8
9
10
11

投影转换

球面是个不可展曲面
把球面直接展开为平面时，不避免地会发生破裂或褶皱
地图投影理论
	基本原理
		球面上一点的位置决定于它的经度和纬度
		先将一些经线和纬线的交点展绘在平面上
		再将相同经度的点连成经线，相同纬度的点连成纬线，构成经纬网。
	一般按照两种标准进行分类
		按投影的变形性质分类
			等角投影
				没有角度变形
				航海、洋流和风向图
				面积变形很大，不能测量面积
			等积投影
				地质、土壤、土地利用、行政区划等地图
			任意投影
				角度和面积的变形都存在，但都适中
		按照投影的构成方式分类
			几何投影
			解析投影
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

比例尺

图上距离除以实际距离
比例尺越小，抽象缩小的程度越高，表达的地物就少而简单
比例尺越大，抽象缩小的程度越低，表达的地物就越详细
1
2
3

GIS 两大基本存储模型

矢量数据模型
	以离散的点坐标来表示地理要素，通过点、线、面以及注记来抽象表达空间实体以及实体间的关系
	明确对象的专题
	地籍数据、行政边界、街道
栅格数据模型
	以一系列栅格值来表示，基于网格结构使用不同颜色和灰度的像元来表达
	连续空间变化的专题
	呈现出河流、湖泊、地块等的形态
	遥感影像为栅格数据
1
2
3
4
5
6
7
8
9

WebGIS的二维地图主要分为矢量地图与瓦片地图两种形式。

矢量地图
	矢量数据模型存储的矢量数据组成的地图
	实时生成请求范围对应的地图
瓦片地图
	瓦片数据是指网格中多个类似瓦片的图片集。
	瓦片数据是通过将矢量或影像数据进行预处理，采用高效的缓存机制（即金字塔结构）形成的，采用级、行、列方式进行组织，可在网页中快速加载。
1
2
3
4
5
6

OGC（Open Geosp atial Consortium，开放地理空间信息联盟）

制定了一系列针对空间数据的服务规范
WMS、WMTS、WFS
1
2

安装最新的OpenLayers 开发环境

npm install ol
1

实现地图显示功能

创建一个地图容器对象（ol.Map）
通过target参数关联到地图容器（ID为map的div层）
通过layers参数设置加载瓦片图层（ol.layer.Tile）
绑定数据源（ol.source.XYZ 或其它source,如ol.source.TileWMS）
	默认情况下，遵循我们广泛使用的Google网格。如果是自定义网格，则在url模板中使用{x}、{y}、{z}占位符即可。
	如果使用GeoServer，后端的数据的服务规范可能是WMS，则使用ol.source.TileWMS。
通过view参数设置地图视图（ol.View）
1
2
3
4
5
6
7

开发中的问题

ol.Map有哪些事件

const _this = this  // JS作用域
this.map.on('click', (evt) => {
   
		// 点击某个元素点，做的一些操作
        let feature = _this.map.forEachFeatureAtPixel(evt.pixel,
          function (feature) {
   
            return feature
          })
        if (feature && feature.get('className') === 'point') {
   
          let data = feature.get('data')
          this.gotoAreaByCoordinate(14, [data.lon, data.lat])
        }
      })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

feature点太多，ol.layer.Vector绘制的地图移动卡顿

直接改用ol.layer.VectorImage

import VectorLayer from 'ol/layer/Vector'
import VectorImageLayer from 'ol/layer/VectorImage'
	  //  原先代码
      this.vectorLineCover = new VectorLayer({
   
        source: source,
        style: style
      })
      // 改动后代码
      this.vectorLineCover = new VectorImageLayer({
   
        source: source,
        style: style
      })
1
2
3
4
5
6
7
8
9
10
11
12
13
14

设置地图可视窗口大小，可视区域

import {
    boundingExtent as BoundingExtent } from 'ol/extent'
const _this = this  // JS作用域
this.map = new Map({
   
        target: 'map',
        layers: [
          _this.basicMap,
        ],
        view: new View({
   
          center: _this.initCenter,
          zoom: _this.initZoom,
          minZoom: _this.GISZoomRange[0],
          maxZoom: _this.GISZoomRange[1],
          extent: new BoundingExtent([
	        [window.GISVisibleAreaRange[0], window.GISVisibleAreaRange[1]],
	        [window.GISVisibleAreaRange[2], window.GISVisibleAreaRange[3]],
	        [window.GISVisibleAreaRange[0], window.GISVisibleAreaRange[3]],
	        [window.GISVisibleAreaRange[2], window.GISVisibleAreaRange[1]]
	      ]), // 限定可视范围
        }),
        // 配置控件
        controls: defaults().extend([])
      })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

设置投影

const _this = this  // JS作用域
this.map = new Map({
   
        view: new View({
   
          projection: 'EPSG:4326',   // 投影
        })
      })
1
2
3
4
5
6
7
8

设置只在一个世界展示数据

const _this = this  // JS作用域
this.map = new Map({
   
        view: new View({
   
          multiWorld: false, // 是否只在一个世界展示数据
        })
      })
1
2
3
4
5
6
7
8

Javascript移除页面一个DOM元素

使用removeChild方法

let box = document.querySelectorAll('.tooltip-hidden')
let parent = document.getElementsByClassName('ol-overlaycontainer-stopevent')[0]
 if (parent) {
   
   box.forEach(item => {
   
     parent.removeChild(item.parentNode)
   })
 }
1
2
3
4
5
6
7
8
9

创建DOM元素添加事件，如点击事件click

let elementDiv = document.createElement('div')
elementDiv.className = 'label-point'
let markerDiv = document.createElement('div')
markerDiv.id = 'marker'
markerDiv.className = 'marker'
markerDiv.style = 
1
2
3
4
5