1窿锉、Gis基本介紹
GIS（Geographic Information System酌摇，地理信息系統(tǒng)）是一種采集、 處理嗡载、儲存窑多、管理、分析洼滚、輸出地理空間數(shù)據(jù)及其屬性信息的計(jì)算機(jī)信息系統(tǒng)埂息。
網(wǎng)絡(luò)GIS所包含的內(nèi)容最廣泛，它包括基于各種分布式計(jì)算模型的C/S或B/S模式的遥巴、多層的千康、分布式GIS應(yīng)用，它們既可以基于J2EE框架铲掐，也可以基于COM/DCOM以及CORBA等分布式計(jì)算框架拾弃。
互聯(lián)網(wǎng)GIS或Internet GIS是網(wǎng)絡(luò)GIS的一個(gè)子集，它是基于TCP/IP協(xié)議的網(wǎng)絡(luò)GIS,因此可以部署在互聯(lián)網(wǎng)上運(yùn)行迹炼。這些GIS既可以是C/S模式也可以是B/S模式砸彬，Google公司的Google Earth軟件，就是由Google公司提供的C/S模式網(wǎng)絡(luò)地圖服務(wù)的一個(gè)客戶端軟件斯入。
因此砂碉，WebGIS是一種在Internet或Intranet環(huán)境下基于HTTP協(xié)議的用來存儲、管理刻两、分析增蹭、發(fā)布和共享地理信息的B/S模式分布式計(jì)算機(jī)應(yīng)用系統(tǒng)。
1.1磅摹、坐標(biāo)系介紹
目前國內(nèi)主要有以下三種坐標(biāo)系：
WGS84：為一種大地坐標(biāo)系滋迈，也是目前廣泛使用的GPS全球衛(wèi)星定位系統(tǒng)使用的坐標(biāo)系。
GCJ02：又稱火星坐標(biāo)系户誓，是由中國國家測繪局制訂的地理信息系統(tǒng)的坐標(biāo)系統(tǒng)饼灿。由WGS84坐標(biāo)系經(jīng)加密后的坐標(biāo)系。
BD09：為百度坐標(biāo)系帝美，在GCJ02坐標(biāo)系基礎(chǔ)上再次加密碍彭。其中bd09ll表示百度經(jīng)緯度坐標(biāo)，bd09mc表示百度墨卡托米制坐標(biāo)。
非中國地區(qū)地圖庇忌，服務(wù)坐標(biāo)統(tǒng)一使用WGS84坐標(biāo)舞箍。
2、OpenLayers
OpenLayers是一個(gè)用于開發(fā)WebGIS客戶端的JavaScript包皆疹。OpenLayers 支持的地圖來源包括Google Maps疏橄、Yahoo、 Map略就、微軟Virtual Earth 等捎迫，用戶還可以用簡單的圖片地圖作為背景圖，與其他的圖層在OpenLayers 中進(jìn)行疊加残制，在這一方面OpenLayers提供了非常多的選擇立砸。
代碼實(shí)現(xiàn)了加載一個(gè)瓦片地圖的（即OpenStreetMap地圖）功能，并可以對地圖進(jìn)行平移初茶、縮放操作颗祝。 初始化一幅地圖時(shí)，至少需要一個(gè)可視區(qū)域（view）恼布，一個(gè)或多個(gè)圖層（layer）螺戳，和一個(gè)地圖加載的目標(biāo)HTML標(biāo)簽（target）。
2.1折汞、初始化加載瓦片地圖
初始化一幅地圖時(shí)倔幼，至少需要一個(gè)可視區(qū)域（view），一個(gè)或多個(gè)圖層（layer）爽待，和一個(gè)地圖加載的目標(biāo)HTML標(biāo)簽（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);
};
可以更改坐標(biāo)投影和中心點(diǎn)來定位到中國
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], // 中心點(diǎn)
projection: "EPSG:4326", // 坐標(biāo)系投影編碼
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地圖服務(wù)
網(wǎng)絡(luò)地圖服務(wù)（WMS）利用具有地理空間位置信息的數(shù)據(jù)制作地圖。其中將地圖定義為地理數(shù)據(jù)可視的表現(xiàn)处渣。能夠根據(jù)用戶的請求返回相應(yīng)的地圖（包括PNG伶贰，GIF，JPEG等柵格形式或者是SVG和WEB CGM等矢量形式）罐栈。WMS支持網(wǎng)絡(luò)協(xié)議HTTP黍衙，所支持的操作是由URL定義的。
WMS地圖服務(wù)發(fā)布好地圖后荠诬，可以通過url傳參params訪問到相應(yīng)的圖層
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", // 對應(yīng)圖層名稱
singleTile: true,
},
serverType: "geoserver", // 服務(wù)類型
transition: 0,
}),
});
this.gisMap.addLayer(WMSMap)琅翻；
2.4涯捻、添加矢量圖層 --- GeoJson
GeoJSON是一種對各種地理數(shù)據(jù)結(jié)構(gòu)進(jìn)行編碼的格式，基于Javascript對象表示法的地理空間信息數(shù)據(jù)交換格式望迎。GeoJSON對象可以表示幾何、特征或者特征集合凌外。GeoJSON支持下面幾何類型：點(diǎn)辩尊、線、面康辑、多點(diǎn)摄欲、多線、多面和幾何集合疮薇。GeoJSON里的特征包含一個(gè)幾何對象和其他屬性胸墙，特征集合表示一系列特征。
矢量圖層一般都是GeoJson格式的數(shù)據(jù)按咒，可以直接加載在線的GeoJson數(shù)據(jù)
加載在線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中的要素有默認(rèn)的樣式掠抬，也可以覆寫樣式
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)吼野；
