React 集成 OpenLayers6 加载天地图、百度、谷歌图层入门篇

其他 2020-03-27 11:12:25 阅读次数: 0

一、请先学习

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

南归北隐
发布了117 篇原创文章 · 获赞 32 · 访问量 16万+
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_17025903/article/details/105072970
今日推荐
富文本编辑器 Quill 2.0 重磅发布，特性、可靠性与开发者体验大幅提升
“开源信徒”周鸿祎开源360智脑大模型
周排行
VS2017编译opensmile具体过程和遇到的问题
PowerEnglish——mini-story3总结
微信小程序 数据库获取字符串 在view中显示换行
Java静态代码块/构造代码块/构造函数/静态变量/成员变量(相关示例)
Keras使用tensorflowjs部署demo
window下用git连接Github
图象的全变分和去噪
LeetCode刷题笔记--119. Pascal's Triangle II
【Linux】进程间通信 - 管道
polyA|ribo-minus|differentiated cell|Genetic heterogeneity
每日归档
更多
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)
2024-04-14(0)
2024-04-13(119)
2024-04-12(38)
2024-04-11(14)
2024-04-10(68)
2024-04-09(5)
2024-04-08(60)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022