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 (
      // 地圖的掛載點，可以設置大小，控制地圖的大小
      <div className={styles.mapCon} id="map" />
    );
  }
}
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 (
      // 地圖的掛載點，可以設置大小，控制地圖的大小
      <div className={styles.mapCon} id="map1" />
    );
  }
}
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 (
      // 地圖的掛載點，可以設置大小，控制地圖的大小
      <div className={styles.mapCon} id="map" />
    );
  }
}
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 (
    <div>

      <TiandituMap></TiandituMap>


      <BaiduMap></BaiduMap>


      <GaodeMap></GaodeMap>

      <CeisumMap></CeisumMap>

    </div>
  );
}

五、加載Cesium矢量圖層

https://blog.csdn.net/qq_17025903/article/details/105072203