wangzhe
/
screen-demo


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>读取shapefile文件</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">

    SHP:  <input type="file" id="shpFile"> <br>
    DBF:  <input type="file" id="dbfFile"> <br>
   <!--  PRJ: <input type="file" id="prjFile">  <br> -->


    <input type="button" value="Parse" onclick="doParseShp()">
    <div class="input-item">
      <button class="btn" id="btn5" onclick="loadShp()">加载shapefile</button>
    </div>
  </div>

</body>

<script>
  var shpData , dbfData ;
  var loadStatus = false;

  var fLayer = new CTMapOl.layer.Vector({
    source: new CTMapOl.source.Vector()
  });

  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, fLayer],
    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();
  }


  function doParseShp() {
    shpData = null;
    dbfData = null;
    loadStatus = false;

    var shpFile = document.getElementById("shpFile").files[0];
    var dbfFile = document.getElementById("dbfFile").files[0];

    if(!shpFile){
        alert('shp文件不能为空');
        return ;
    }
    if(!dbfFile){
        alert('DBF文件不能为空');
        return ;
    }


    //通过HTML5 读取本地文件数据流
    var readDbf = new FileReader();
    readDbf.readAsArrayBuffer(dbfFile, 'UTF-8');//读取文件的内容

    var readShp = new FileReader();
    readShp.readAsArrayBuffer(shpFile, 'UTF-8');//读取文件的内容

    //SHP
    readShp.onload = function () {
        shpData = this.result; 
        loadData();
    }
         //DBF
    readDbf.onload = function () {
        dbfData = this.result;
        loadData();
    }
}

function loadData() {
            
  if(!dbfData || !shpData || loadStatus) return ;

  loadStatus = true;

  //var shapefile = new shapefile();
  var features = [];
  var index = 0;
  CTMapOl.shapefile.open(shpData, dbfData , { encoding: 'gb2312' }).then(source => source.read().then(
      function next(result) {

          if (result.done) {
              layerReloadFeatures(features);
              return;
          }

          var geometry = result.value.geometry ;
          var propreties = result.value.properties ;
         
          var f = createFeature(geometry , propreties);
          if(f ){
              features.push(f);
          }
          index++ ;
          return source.read().then(next);
      }

  ))
}


  function loadShp() {
    let shpfile = './shp/bou2_4p.shp';

    var features = [];
    var index = 0;
    CTMapOl.shapefile.open(shpfile, undefined, { encoding: 'gb2312' }).then(source => source.read().then(
      function next(result) {

        if (result.done) {
          layerReloadFeatures(features);
          return;
        }

        var geometry = result.value.geometry;
        var propreties = result.value.properties;

        var f = createFeature(geometry, propreties);
        if (f) {
          features.push(f);
        }
        index++;
        return source.read().then(next);
      }

    ))

  }

  function layerReloadFeatures(features) {
    fLayer.getSource().clear();
    fLayer.getSource().addFeatures(features);

    var extent = fLayer.getSource().getExtent();
    if (extent) {

      map.getView().fit(extent, map.getSize());
    }

  }

  /**
    * 根据shp解析出来的数据创建一个ol4 的feature
    */
  function createFeature(geometry, properties) {

    var type = geometry.type;
    var geom;

    if (type == 'Polygon') {
      geom = new CTMapOl.geom.Polygon(geometry.coordinates);
    } else if (type == 'Point') {
      geom = new CTMapOl.geom.Point(geometry.coordinates);
    } else if (type == 'LineString') {
      geom = new CTMapOl.geom.LineString(geometry.coordinates);
    } else if (type == 'MultiPolygon') {
      geom = new CTMapOl.geom.MultiPolygon(geometry.coordinates);
    } else if (type == 'MultiPoint') {
      geom = new CTMapOl.geom.MultiPoint(geometry.coordinates);
    } else if (type == 'MultiLineString') {
      geom = new CTMapOl.geom.MultiLineString(geometry.coordinates);
    }


    if (!geom) return null;
    var feature = new CTMapOl.Feature({
      geometry: geom
    });

    //属性
    for (var key in properties) {
      feature.set(key, properties[key]);
    }

    return feature;
  }

</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>