React 集成 OpenLayers6 加载天地图、百度、谷歌图层入门篇
一、请先学习
OpenLayers入门篇es6之第一个地图
链接: https://blog.csdn.net/qq_17025903/article/details/104843667
二、天地图矢量图层加载
创建 TiandituMap.js TiandituMap.css
TiandituMap.js
import React from 'react';
import 'ol/ol.css';
import {Map, View} from 'ol';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import styles from './TiandituMap.css';
import {defaults as defaultControls, ScaleLine} from 'ol/control';
import TileWMS from 'ol/source/TileWMS';
/**
* @author 于公成
* 加载天地图
*/
class TiandituMap extends React.Component {
constructor() {
super();
}
/**
* 矢量底图
* http://t0.tianditu.gov.cn/vec_c/wmts?tk=您的密钥 经纬度投影
* http://t0.tianditu.gov.cn/vec_w/wmts?tk=您的密钥 球面墨卡托投影
* 矢量注记
* http://t0.tianditu.gov.cn/cva_c/wmts?tk=您的密钥 经纬度投影
* http://t0.tianditu.gov.cn/cva_w/wmts?tk=您的密钥 球面墨卡托投影
* 影像底图
* http://t0.tianditu.gov.cn/img_c/wmts?tk=您的密钥 经纬度投影
* http://t0.tianditu.gov.cn/img_w/wmts?tk=您的密钥 球面墨卡托投影
* 影像注记
* http://t0.tianditu.gov.cn/cia_c/wmts?tk=您的密钥 经纬度投影
* http://t0.tianditu.gov.cn/cia_w/wmts?tk=您的密钥 球面墨卡托投影
* 地形晕渲
* http://t0.tianditu.gov.cn/ter_c/wmts?tk=您的密钥 经纬度投影
* http://t0.tianditu.gov.cn/ter_w/wmts?tk=您的密钥 球面墨卡托投影
* 地形注记
* http://t0.tianditu.gov.cn/cta_c/wmts?tk=您的密钥 经纬度投影
* http://t0.tianditu.gov.cn/cta_w/wmts?tk=您的密钥 球面墨卡托投影
* 全球境界
* http://t0.tianditu.gov.cn/ibo_c/wmts?tk=您的密钥 经纬度投影
* http://t0.tianditu.gov.cn/ibo_w/wmts?tk=您的密钥 球面墨卡托投影
* 矢量英文注记
* http://t0.tianditu.gov.cn/eva_c/wmts?tk=您的密钥 经纬度投影
* http://t0.tianditu.gov.cn/eva_w/wmts?tk=您的密钥 球面墨卡托投影
* 影像英文注记
* http://t0.tianditu.gov.cn/eia_c/wmts?tk=您的密钥 经纬度投影
* http://t0.tianditu.gov.cn/eia_w/wmts?tk=您的密钥 球面墨卡托投影
*
* 地图服务调用
* 以天地图影像瓦片底图（球面墨卡托投影）服务为例，在原有瓦片获取请求参数中增加授权参数即可，其余使用方法不变。
* 例如：http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=您的密钥
*/
componentDidMount() {
let key="0f5cb733f04223ac733dc4d36063f44f";
let permission="SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={x}&TILECOL={y}&tk=";
// let permission2="SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=vec&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=";
//矢量底图http://t2.tianditu.com/DataServer
//瓦片的列号x，从0开始；
let x
//瓦片的行号y，从0开始；
let y
//瓦片的级别，1~20；
let z
//矢量底图
let vectorUrl1="http://t2.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=";
//矢量注记
let vectorUrl2="http://t2.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=";
//球面墨卡托投影
//矢量底图
let vectorUrl3="http://t2.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=";
//矢量注记
let vectorUrl4="http://t2.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=";
//经纬度投影 地形晕渲
let mapReder1="http://t2.tianditu.com/DataServer?T=ter_c&x={x}&y={y}&l={z}&tk=";
//影像底图
let img1="http://t2.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=";
let img2="http://t2.tianditu.com/DataServer?T=cia_c&x={x}&y={y}&l={z}&tk=";
const map = new Map({
// controls: defaultControls().extend([
// new ScaleLine({
// units: 'degrees'
// })
// ]),
target: 'map',
layers: [
// new TileLayer({
// title: "天地图矢量图层",
// source: new XYZ({
// // url:vectorUrl1+permission+key,
// url: vectorUrl1+key,
// wrapX: false
// })
// }),
// new TileLayer({
// title: "天地图矢量图层注记",
// source: new XYZ({
// // url:vectorUrl1+permission+key,
// url: vectorUrl2+key,
// wrapX: false
// })
// }),
//球面墨卡托
new TileLayer({
title: "天地图矢量图层",
source: new XYZ({
// url:vectorUrl1+permission+key,
url: vectorUrl3+key,
wrapX: false
})
}),
new TileLayer({
title: "天地图矢量图层注记",
source: new XYZ({
// url:vectorUrl1+permission+key,
url: vectorUrl4+key,
wrapX: false
})
}),
// new TileLayer({
// title: "天地图影像图层",
// source: new XYZ({
// // url:vectorUrl1+permission+key,
// url: img1+key,
// // wrapX: false
// })
// }),
// new TileLayer({
// title: "天地图影像图层注记",
// source: new XYZ({
// // url:vectorUrl1+permission+key,
// url: img2+key,
// // wrapX: false
// })
// }),
// new TileLayer({
// title: "天地图矢量图层注记",
// source: new XYZ({
// // url: "http://t2.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=3bc6874f2b919aa581635abab7759a3f&tk=3bc6874f2b919aa581635abab7759a3f",
// url:vectorUrl2+permission+key,
// // wrapX: false
// })
// }),
// new TileLayer({
// title: "天地图地形晕渲",
// source: new XYZ({
// // url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=3bc6874f2b919aa581635abab7759a3f&tk=3bc6874f2b919aa581635abab7759a3f",
// url:mapReder1+permission+key,
// wrapX: false
// })
// })
// new TileLayer({
// source: new OSM(),
// projection: 'EPSG:4326', //HERE IS THE DATA SOURCE PROJECTION
// url: 'http://demo.boundlessgeo.com/geoserver/wms',
// params: {
// 'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
// }
// })
],
view: new View({
//地图初始中心点 116.383707,39.99973
center: [0, 0],
//地图初始显示级别
zoom: 3,
//参考系设置
projection: "EPSG:4326"
}),
});
}
render() {
return (
// 地图的挂载点，可以设置大小，控制地图的大小
);
}
}
export default TiandituMap;
TiandituMap.css
.mapCon {
width: 100%;
height: 700px;
/*position: absolute;*/
}
结果如下图↓
三、加载谷歌地图矢量图层
创建 GaodeMap.js GaodeMap.css
GaodeMap.js
import React from 'react';
import 'ol/ol.css';
import {Map, View} from 'ol';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import styles from './TiandituMap.css';
import {defaults as defaultControls, ScaleLine} from 'ol/control';
import TileWMS from 'ol/source/TileWMS';
import Tile from "ol/Tile";
/**
* @author 于公成
* 加载高德地图
*/
class GaodeMap extends React.Component {
constructor() {
super();
}
componentDidMount() {
let map = new Map({
layers: [
new TileLayer({
title: "高德地图",
source: new XYZ({
url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
wrapX: false
})
})
],
view: new View({
center: [12958752, 4848452],
projection: 'EPSG:3857',
zoom: 8,
minZoom: 1
}),
target: 'map1'
});
}
render() {
return (
// 地图的挂载点，可以设置大小，控制地图的大小
);
}
}
export default GaodeMap;
GaodeMap.css
.mapCon {
width: 100%;
height: 600px;
/*position: absolute;*/
}
结果如下图↓
四、加载百度地图矢量图层
创建 BaiduMap.js BaiduMap.css
BaiduMap.js
import React from 'react';
import 'ol/ol.css';
import {Map, View} from 'ol';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import styles from './BaiduMap.css';
import TileGrid from "ol/tilegrid/TileGrid";
import TileImage from "ol/source/TileImage";
import Tile from "ol/Tile";
import {get} from 'ol/proj';
import * as olProj from 'ol/proj';
/**
* @author 于公成
* 加载百度地图
*/
class BaiduMap extends React.Component {
constructor() {
super();
}
UrlFunction(tileCoord, pixelRatio, proj){
if (!tileCoord) {
return "";
}
let z = tileCoord[0];
let x = tileCoord[1];
let y = tileCoord[2];
if (x < 0) {
x = "M" + (-x);
}
if (y < 0) {
y = "M" + (-y);
}
return "http://online3.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20151021&scaler=1&p=1";
}
getResolutions(extent, tileSize) {
var width = extent.getWidth(extent);
var height = extent.getHeight(extent);
var maxResolution = (width <= height ? height : width) / (tileSize);//最大分辨率
var resolutions = new Array(16);
var z;
for (let z = 0; z < 16; ++z) {
resolutions[z] = maxResolution / Math.pow(2, z);
}
return resolutions; //返回分辩率数组resolutions
}
componentDidMount() {
//坐标参考系
let projection = get("EPSG:3857");
//分辨率
let resolutions = [];
for (let i = 0; i < 18; i++) {
resolutions[i] = Math.pow(2, 17 - i);
}
let tilegrid = new TileGrid({
origin: [0, 0],
resolutions: resolutions
});
//拼接百度地图出图地址
let baidu_source = new TileImage({
//设置坐标参考系
projection: projection,
//设置分辨率
tileGrid: tilegrid,
//出图基地址
tileUrlFunction: this.UrlFunction
});
//百度地图
let baidu_layer = new TileLayer({
source: baidu_source
});
//地图容器
let map = new Map({
target: 'map',
layers: [baidu_layer],
view: new View({
center: [0, 0],
zoom: 2,
})
});
}
render() {
return (
// 地图的挂载点，可以设置大小，控制地图的大小
);
}
}
export default BaiduMap;
BaiduMap.css
.mapCon {
width: 100%;
height: 600px;
/*position: absolute;*/
}
结果如下图↓
创建 showMap.js 显示所有图层
import React from 'react';
import TiandituMap from '../components/map/TiandituMap';
import BaiduMap from '../components/map/BaiduMap';
import GaodeMap from '../components/map/GaodeMap';
import CeisumMap from '../components/map/CeisumMap';
import "cesium/Source/Widgets/widgets.css";
import buildModuleUrl from "cesium/Source/Core/buildModuleUrl";
buildModuleUrl.setBaseUrl('./cesium/');
// import Cesium from "cesium/Source/Cesium";
export default function() {
return (
五、加载Cesium矢量图层
https://blog.csdn.net/qq_17025903/article/details/105072203