react 之 openlayer图层控制

最新推荐文章于 2024-09-25 08:09:45 发布

gis_SSS

最新推荐文章于 2024-09-25 08:09:45 发布

阅读量812

点赞数 1

分类专栏： react

本文链接：https://blog.csdn.net/gis_zzu/article/details/90573212

版权

react 专栏收录该内容

25 篇文章 3 订阅

订阅专栏

一、引入依赖的文件

import React, { Component } from 'react';
import Map from '../../component/map/map';
import { Checkbox,Radio } from 'antd';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ.js';
import style from './mapcontrol.css'

二、外部css文件代码

.changLayers{
  position:absolute;
  top:120px;
  right: 100px;
  background: black;
  opacity: 0.5;
  height: 200px;
  width: 200px;
  z-index: 9999999999999;
  color: white;
  padding: 10px
}

.checkBox{
  color: #ffffff
}

三、加载地图组件和页面控件

render() {
    return (
      <div>
        <div className={style.changLayers}>
          <div>图层选择</div>
          <Checkbox className={style.checkBox} onChange={this.onChange} defaultChecked  name="1" style={{marginLeft:"8px"}}>天地图矢量图层</Checkbox>
          <Checkbox className={style.checkBox} onChange={this.onChange} defaultChecked  name="2" >天地图矢量注记图层</Checkbox>
          <Checkbox className={style.checkBox} onChange={this.onChange} defaultChecked  name="3" >天地图影像图层</Checkbox>
          <Checkbox className={style.checkBox} onChange={this.onChange} defaultChecked  name="4" >天地图影像注记图层</Checkbox>
        </div>
        <Map ref="map" center={{ lon: 113.8, lat: 34.6 }}  />;
      </div>
    );
  }

四、加载多个地图图层

let {map} = this.refs.map
    let {mapkey} = window.config
    var TiandiMap_vec = new TileLayer({
        name: "天地图矢量图层",
        source: new XYZ({
            url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + mapkey,//mapkey为天地图密钥
            wrapX: false
        })
    });
    var TiandiMap_cva = new TileLayer({
        name: "天地图矢量注记图层",
        source: new XYZ({
            url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + mapkey,//mapkey为天地图密钥
            wrapX: false
        })
    });
    var TiandiMap_img = new TileLayer({
        name: "天地图影像图层",
        source: new XYZ({
            url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + mapkey,//mapkey为天地图密钥
            wrapX: false
        })
    });
    var TiandiMap_cia = new TileLayer({
        name: "天地图影像注记图层",
        source: new XYZ({
            url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" +mapkey,//mapkey为天地图密钥
            wrapX: false
        })
    });

    // 图层的显示与隐藏主要是依靠
    //    var layers = map.getLayers();
    //    layer.setVisible(false);
   // 加载数据
    map.addLayer(TiandiMap_vec);
    map.addLayer(TiandiMap_cva);
    map.addLayer(TiandiMap_img);
    map.addLayer(TiandiMap_cia);
    // console.log("图层显示",TiandiMap_cia.getVisible())
    // TiandiMap_cia.setVisible(false)
    this.setState({
      map,TiandiMap_vec,TiandiMap_cva,TiandiMap_img,TiandiMap_cia
    })

五、点击图层按钮控制图层是否显示事件

onChange = (e)=>{
   let {name,checked} = e.target
   let {TiandiMap_vec,TiandiMap_cva,TiandiMap_img,TiandiMap_cia}= this.state
   switch(name){
      case "1":
        TiandiMap_vec.setVisible(checked)
        break;
      case "2":
        TiandiMap_cva.setVisible(checked)
        break;
      case "3":
        TiandiMap_img.setVisible(checked)
        break;
      case "4":
        TiandiMap_cia.setVisible(checked)
        break;
      default:
        break
   }
   
  }

六、全部代码

import React, { Component } from 'react';
import Map from '../../component/map/map';
import { Checkbox,Radio } from 'antd';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ.js';
import style from './mapcontrol.css'

class MapOverviewMap extends Component {
    constructor(props){
        super(props)
        this.state={
            
        }
    }
  componentDidMount() {
    let {map} = this.refs.map
    let {mapkey} = window.config
    var TiandiMap_vec = new TileLayer({
        name: "天地图矢量图层",
        source: new XYZ({
            url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=" + mapkey,//mapkey为天地图密钥
            wrapX: false
        })
    });
    var TiandiMap_cva = new TileLayer({
        name: "天地图矢量注记图层",
        source: new XYZ({
            url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=" + mapkey,//mapkey为天地图密钥
            wrapX: false
        })
    });
    var TiandiMap_img = new TileLayer({
        name: "天地图影像图层",
        source: new XYZ({
            url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=" + mapkey,//mapkey为天地图密钥
            wrapX: false
        })
    });
    var TiandiMap_cia = new TileLayer({
        name: "天地图影像注记图层",
        source: new XYZ({
            url: "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=" +mapkey,//mapkey为天地图密钥
            wrapX: false
        })
    });

    // 图层的显示与隐藏主要是依靠
    //    var layers = map.getLayers();
    //    layer.setVisible(false);
   // 加载数据
    map.addLayer(TiandiMap_vec);
    map.addLayer(TiandiMap_cva);
    map.addLayer(TiandiMap_img);
    map.addLayer(TiandiMap_cia);
    // console.log("图层显示",TiandiMap_cia.getVisible())
    // TiandiMap_cia.setVisible(false)
    this.setState({
      map,TiandiMap_vec,TiandiMap_cva,TiandiMap_img,TiandiMap_cia
    })
  }
  onChange = (e)=>{
   let {name,checked} = e.target
   let {TiandiMap_vec,TiandiMap_cva,TiandiMap_img,TiandiMap_cia}= this.state
   switch(name){
      case "1":
        TiandiMap_vec.setVisible(checked)
        break;
      case "2":
        TiandiMap_cva.setVisible(checked)
        break;
      case "3":
        TiandiMap_img.setVisible(checked)
        break;
      case "4":
        TiandiMap_cia.setVisible(checked)
        break;
      default:
        break
   }
   
  }
  render() {
    return (
      <div>
        <div className={style.changLayers}>
          <div>图层选择</div>
          <Checkbox className={style.checkBox} onChange={this.onChange} defaultChecked  name="1" style={{marginLeft:"8px"}}>天地图矢量图层</Checkbox>
          <Checkbox className={style.checkBox} onChange={this.onChange} defaultChecked  name="2" >天地图矢量注记图层</Checkbox>
          <Checkbox className={style.checkBox} onChange={this.onChange} defaultChecked  name="3" >天地图影像图层</Checkbox>
          <Checkbox className={style.checkBox} onChange={this.onChange} defaultChecked  name="4" >天地图影像注记图层</Checkbox>
        </div>
        <Map ref="map" center={{ lon: 113.8, lat: 34.6 }}  />;
      </div>
    );
  }
}

export default MapOverviewMap;

七、效果图