openlayers3学习 使用天地地图画世界

基础的东西就不说了，以下只是个人学习成功记录，对你有帮助过更好，有错误也可以指出，互相学习。

准备工作

安装依赖…配置环境什么的就都不说了

需要使用的网站：
ol3示例：点击跳转ol3示例 仅供参考
ol3官方：点击跳转ol3官方 英文文档，看不懂推荐edge浏览器翻译

1.画底图

import React, { useEffect, useRef, useState } from 'react';
import Map from 'ol/Map.js';
import { XYZ } from 'ol/source';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
import 'ol/ol.css';

export default () => {
  const containerRef = useRef();

  useEffect(() => {
    const map = new Map({
      /**
       * T=vec_c 经纬度投影
       * T=vec_w 球面墨卡托投影
       */
      layers: [
      // 新建图层不用说了吧
        new TileLayer({
          source: new XYZ({
            // url: 'http://t2.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=3fef19ca23f6e81f07a697cff1f775f5',
            url: 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=3fef19ca23f6e81f07a697cff1f775f5',
          }),
        }),
      ],
      target: containerRef.current, // 地图渲染的dom元素，可直接传递id
      view: new View({
        // ol默认的经纬度格式是-EPSG:3857，需改为日常使用的EPSG:4326
        projection: 'EPSG:4326',
        // center: [116.40969, 39.89945],
        center: [115.25965131, 39.2636281],
        zoom: 5,
        // minZoom: 5,
      }),
    });

  }, []);



  return ( 
      <div
        style={{ width: 1500, height: 550, border: '1px solid' }}
        ref={containerRef}
        className="map"
      />  
  );
};

效果图：

2.画底图（卫星）

import React, { useEffect, useRef, useState } from 'react';
import Map from 'ol/Map.js';
import { XYZ } from 'ol/source';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
import 'ol/ol.css';

export default () => {
  const containerRef = useRef();

  useEffect(() => {
    const map = new Map({
      /**
       * T=vec_c 经纬度投影
       * T=vec_w 球面墨卡托投影
       */
      layers: [
        // 卫星影像
        new TileLayer({
          source: new XYZ({
            url: 'http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=3fef19ca23f6e81f07a697cff1f775f5',
          }),
          // name: 'BaseMap',
        }),
      ],
      target: containerRef.current, // 地图渲染的dom元素，可直接传递id
      view: new View({
        // ol默认的经纬度格式是-EPSG:3857，需改为日常使用的EPSG:4326
        projection: 'EPSG:4326',
        // center: [116.40969, 39.89945],
        center: [115.25965131, 39.2636281],
        zoom: 5,
        // minZoom: 5,
      }),
    });

  }, []);



  return (
    <div
      style={{ width: 1500, height: 550, border: '1px solid' }}
      ref={containerRef}
      className="map"
    />
  );
};

示例：

添加位置标注图层

import React, { useEffect, useRef, useState } from 'react';
import Map from 'ol/Map.js';
import { XYZ } from 'ol/source';
import TileLayer from 'ol/layer/Tile.js';
import View from 'ol/View.js';
import 'ol/ol.css';

export default () => {
  const containerRef = useRef();

  useEffect(() => {
    const map = new Map({
      /**
       * T=vec_c 经纬度投影
       * T=vec_w 球面墨卡托投影
       */
      layers: [
        new TileLayer({
          source: new XYZ({
            // url: 'http://t2.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=3fef19ca23f6e81f07a697cff1f775f5',
            url: 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=3fef19ca23f6e81f07a697cff1f775f5',
          }),
        }),
        // 显示地名
        new TileLayer({
          source: new XYZ({
            url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=3fef19ca23f6e81f07a697cff1f775f5',
          }),
        }),

      ],
      target: containerRef.current, // 地图渲染的dom元素，可直接传递id
      view: new View({
        // ol默认的经纬度格式是-EPSG:3857，需改为日常使用的EPSG:4326
        projection: 'EPSG:4326',
        // center: [116.40969, 39.89945],
        center: [115.25965131, 39.2636281],
        zoom: 5,
        // minZoom: 5,
      }),
    });

  }, []);



  return (
    <div
      style={{ width: 1500, height: 550, border: '1px solid' }}
      ref={containerRef}
      className="map"
    />
  );
};

示例：