wangzhe
/
screen-demo


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>单点定位</title>
    <link rel="stylesheet" href="../dist/ol/ol.css" />
    <script src="../dist/index.js"></script>
  </head>
  <body style="margin: 0; padding: 0;">
    <!-- <div id="map" style="height: 100vh; width: 100vw"></div> -->
    <div id="mapId" class="mapDIV"></div>

    <div class="input-card">
      <div class="input-item">
        <button class="btn" id="btn1" onclick="fixPoint1(true)">定位1可见点</button>
      </div>
      <div class="input-item">
        <button class="btn" id="btn2" onclick="fixPoint1(false)">定位1不见点</button>
      </div>
      <div class="input-item">
        <button class="btn" id="btn3" onclick="fixPoint2(true)">定位2可见点</button>
      </div>
      <div class="input-item">
        <button class="btn" id="btn4" onclick="fixPoint2(false)">定位2不见点</button>
      </div>
      <div class="input-item">
        <button class="btn" id="btn5" onclick="deletePoint()">删除点</button>
      </div>
    </div>

  </body>

  <script>
    const source = new CTMapOl.source.XYZ({
      url: 'http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=86db5390161c4da2abe96c3fca00f403'
    })
    const tileLayer = new CTMapOl.layer.Tile({
      title: '天地图',
      source: source
    })
    var sourceMarker = new CTMapOl.source.XYZ({
      url: 'http://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=86db5390161c4da2abe96c3fca00f403'
    })
    const tileMarker = new CTMapOl.layer.Tile({
      title: '标注图层',
      source: sourceMarker
    })
    const map = new CTMapOl.Map({
      view: new CTMapOl.View({
        projection: 'EPSG:4326',
        center: [124.6112610521188, 41.530759008113655],
        zoom: 10,
        maxZoom: 18,
        minZoom: 1
      }),
      controls: CTMapOl.control.defaults({
        attribution: false,
        rotate: false,
        zoom: false
      }),
      layers: [tileLayer, tileMarker],
      target: 'mapId'
    })   

    
  function monitorIcon() {
    return new CTMapOl.style.Style({
      image: new CTMapOl.style.Icon({
        src: './assets/monitor-online.png',
      }),
    });
  }
    
  let fixPositionObj = new CTMapOl.extend.FixPosition(map, monitorIcon());


    function fixPoint1(visible) {
      fixPositionObj.position([124.56485712008785, 41.228574591618738], visible);
    }
    function fixPoint2(visible) {
      fixPositionObj.position([124.65766498414975, 41.832943424608573], visible);
    }

    function deletePoint() {
      fixPositionObj.removePoint();
    }

  </script>

  
  <style>

    /*地图*/
    .mapDIV {

      height: 100vh; 
      width: 100vw;
      z-index: 1;
    }

    .add-switch {
      position: absolute;
      right: 30px;
      height: 68px;
      width: 30px;
      bottom: 112px;
      background: #FFFFFF 100%;
      color: #172537;
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 2;
    }

    .add-s-block {
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      line-height: 20px;
      font-size: 12px;
      margin-bottom: 2px;
      color: #172537;
    }
    
    .add-zoom {
      width: 20px;
      height: 20px;
      background-image: url('../dist/assets/image/ar/switch/add-zoom.svg');
      background-size: 100% 100%;
      cursor: pointer;
    }
    
    .sub-zoom {
      width: 20px;
      height: 20px;
      background-image: url('../dist/assets/image/ar/switch/sub-zoom.svg');
      background-size: 100% 100%;
      cursor: pointer;
    }
    
    .add-zoom-out {
      width: 20px;
      height: 20px;
      background-image: url('../dist/assets/image/ar/switch/add-zoom-out.svg');
      background-size: 100% 100%;
    }
    
    .sub-zoom-out {
      width: 20px;
      height: 20px;
      background-image: url('../dist/assets/image/ar/switch/sub-zoom-out.svg');
      background-size: 100% 100%;
    }
    
    .add-s-block.btn-click {
      cursor: pointer;
    }

    .input-card {
      position: absolute;
      right: 15px;
      bottom: 15px;
      z-index: 999;
  }
  </style>

</html>