1、Gis基本介绍
GIS（Geographic Information System，地理信息系统）是一种采集、 处理、储存、管理、分析、输出地理空间数据及其属性信息的计算机信息系统。
网络GIS所包含的内容最广泛，它包括基于各种分布式计算模型的C/S或B/S模式的、多层的、分布式GIS应用，它们既可以基于J2EE框架，也可以基于COM/DCOM以及CORBA等分布式计算框架。
互联网GIS或Internet GIS是网络GIS的一个子集，它是基于TCP/IP协议的网络GIS,因此可以部署在互联网上运行。这些GIS既可以是C/S模式也可以是B/S模式，Google公司的Google Earth软件，就是由Google公司提供的C/S模式网络地图服务的一个客户端软件。
因此，WebGIS是一种在Internet或Intranet环境下基于HTTP协议的用来存储、管理、分析、发布和共享地理信息的B/S模式分布式计算机应用系统。
1.1、坐标系介绍
目前国内主要有以下三种坐标系：
WGS84：为一种大地坐标系，也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。
GCJ02：又称火星坐标系，是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。
BD09：为百度坐标系，在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标，bd09mc表示百度墨卡托米制坐标。
非中国地区地图，服务坐标统一使用WGS84坐标。
2、OpenLayers
OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行叠加，在这一方面OpenLayers提供了非常多的选择。
代码实现了加载一个瓦片地图的（即OpenStreetMap地图）功能，并可以对地图进行平移、缩放操作。 初始化一幅地图时，至少需要一个可视区域（view），一个或多个图层（layer），和一个地图加载的目标HTML标签（target）。
2.1、初始化加载瓦片地图
初始化一幅地图时，至少需要一个可视区域（view），一个或多个图层（layer），和一个地图加载的目标HTML标签（target）。
import React from "react";
import Map from "ol/Map";
import View from "ol/View";
import OSM from "ol/source/OSM";
import TileLayer from "ol/layer/Tile";
class GisMap extends React.Component {
componentDidMount() {
this.gisMap = new Map({
target: "gisMap",
layers: [
new TileLayer({
source: new OSM(),
})
],
view: new View({
center: [0, 0],
zoom: 2,
}),
});
}
render() {
return <div id="gisMap" style={{ width: "100%", height: "800px" }}></div>;
}
}
OpenLayers自带平移和缩放功能，我们也可以自己添加缩放
// 缩小地图
zoomout = () => {
const view = this.gisMap.getView();
const zoom = view.getZoom();
view.setZoom(zoom - 1);
};
// 放大地图
zoomin = () => {
const view = this.gisMap.getView();
const zoom = view.getZoom();
view.setZoom(zoom + 1);
};
可以更改坐标投影和中心点来定位到中国
class GisMap extends React.Component {
componentDidMount() {
this.gisMap = new Map({
target: "gisMap",
layers: [
new TileLayer({
source: new OSM(),
})
],
view: new View({
center: [116.404, 39.915], // 中心点
projection: "EPSG:4326", // 坐标系投影编码
zoom: 15, // 缩放等级
}),
});
}
}
2.2、添加瓦片图层
在初始化地图之后还可以再次添加图层
import TileLayer from "ol/layer/Tile";
import TileImage from "ol/source/TileImage ";
const TianMap = new TileLayer({
source: new TileImage({
projection: "EPSG:4326",
maxZoom: 18,
url: "http://t{0-4}.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}" + "&tk=be09b54c2b95cd0b6532c6f0f1c77a28"
}),
});
this.gisMap.addLayer(TianMap)；
添加图层后可以控制图层的显示和隐藏
TianMap.setVisible(visibel)；// visibel: true、false
``
## 2.3、添加WMS地图服务
> 网络地图服务（WMS）利用具有地理空间位置信息的数据制作地图。其中将地图定义为地理数据可视的表现。能够根据用户的请求返回相应的地图（包括PNG，GIF，JPEG等栅格形式或者是SVG和WEB CGM等矢量形式）。WMS支持网络协议HTTP，所支持的操作是由URL定义的。
WMS地图服务发布好地图后，可以通过url传参params访问到相应的图层
import TileWMS from "ol/source/TileWMS";
const WMSMap = new VectorLayer ({
source: new VectorSource ({
url: "http://gisserver.tianditu.com/tiandituService/wms?tk=be09b54c2b95cd0b6532c6f0f1c77a28",
params: {
VERSION: "1.1.1",
LAYERS: "demo_city,demo_road,demo_anno", // 对应图层名称
singleTile: true,
},
serverType: "geoserver", // 服务类型
transition: 0,
}),
});
this.gisMap.addLayer(WMSMap)；
##2.4、添加矢量图层 --- GeoJson
> GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法的地理空间信息数据交换格式。GeoJSON对象可以表示几何、特征或者特征集合。GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合。GeoJSON里的特征包含一个几何对象和其他属性，特征集合表示一系列特征。
矢量图层一般都是GeoJson格式的数据，可以直接加载在线的GeoJson数据
加载在线GeoJson需要提供url和format属性
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import GeoJSON from "ol/format/GeoJSON";
const cityMap = new VectorLayer ({
source: new VectorSource ({
format: new GeoJSON(),
url: "http://api.geodata.cn/saridata/Maps/Res/China_City.json",
}),
});
this.gisMap.addLayer(cityMap)；
或者加载本地json文件，需要提供features属性，通过readFeatures读取json文件
import heatJson from "../assets/heat.json";
const heatMap = new VectorLayer ({
source: new VectorSource ({
features: new GeoJSON().readFeatures(heatJson),
}),
});
this.gisMap.addLayer(heatMap)
##2.5、矢量图层GeoJson样式修改
OpenLayers对矢量图层GeoJson中的要素有默认的样式，也可以覆写样式
import { Style, Circle, Fill, Stroke } from "ol/style";
const geoMap = new VectorLayer({
source: new VectorSource({
features: new GeoJSON().readFeatures(geoJson),
}),
style: new Style({
image: new Circle({
radius: 20,
fill: new Fill({ color: "rgba(255, 0, 0, 0.6)" }),
stroke: new Stroke({ color: "rgba(255, 255, 0, 0.8)", width: 5 }),
}),
}),
});
this.gisMap.addLayer(geoMap)；
