BIGEMPA Js API示例中心
shp導(dǎo)入源代碼展示

代碼編輯區(qū) 運(yùn)行下載還原
<!DOCTYPE html>
  <html>

  <head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <!--
      以下CSS地址請在安裝軟件了替換成本地的地址
      CSS地址請使用:
      http://localhost:9000/bigemap.js/v2.1.0/bigemap.css
      軟件下載地址 http://www.xawiki.com/reader/download/detail201802017.html
    -->
    <link href="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.css" rel="stylesheet"/>
    <link href="http://www.xawiki.com/Public/css/button.min.css" rel="stylesheet">
    <!--
        JS地址請使用：
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
    -->
    <script src="http://ua.bigemap.com:30081/bmsdk/bigemap.js/v2.1.0/bigemap.js"></script>
    <!--
        引入加載KML的JS插件
    -->
    <script type="text/javascript" src="http://www.xawiki.com/mapoffline/js/togeojson.js"></script>


    <style>
      body {
        margin: 0;
        padding: 0;
      }

      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }

      .tool {
        position: absolute;
        z-index: 10;
        right: 10px;
        top: 60px;
      }

      .info {
        position: fixed;
        top: 40px;
        color: #8a6d3b;
        z-index: 99;
        margin: 0;
        background-color: #fcf8e3;
        border-color: #faebcc;
        left: 0;
        right: 0;
        text-align: center;
      }
    </style>
    <title>切換圖層</title>
  </head>

  <body>
    <p class="info">
      數(shù)據(jù)保存在本地，刷新會消失，僅僅用作測試
    </p>
    <p class="tool">
      <a id="satellite" class="button button-tiny button-rounded button-primary" href="javascript:void (0);">導(dǎo)入SHP</a>
      <a id="export" class="button button-tiny button-rounded button-primary" download="geojson.geojson"
        href="javascript:void (0);">導(dǎo)出GeoJSON</a>
      <input type="file" accept=".zip" style="display: none" id="upload">
    </p>
    <div id='map'></div>
    <script src="http://www.xawiki.com/Public/common/js/jquery.min.js"></script>
    <script src="http://www.xawiki.com/Public/js/shpjs/shp.min.js"></script>
    <script type="text/javascript">// 軟件配置信息地址，軟件安裝完成之后使用本地地址，如：http://localhost:9000
      BM.Config.HTTP_URL = "http://ua.bigemap.com:30081/bmsdk/"
      var map = BM.map('map', 'bigemap.dc-satellite', {
          crs: BM.CRS.EPSG4326,
        center: [30, 104],
        zoom: 3,
        zoomControl: true,
        attributionControl: false,
        preferCanvas: true,//適用于數(shù)據(jù)量大時 地圖反應(yīng)速度加快
      });
      var geo;
      //創(chuàng)建一個谷歌衛(wèi)星圖層 ，具體API詳情請參見 ：http://www.xawiki.com/offlinemaps/api/#tilelayer
      $('#upload').on('change', function () {
        var file = this.files[0];
        var extension = file.name.split('.');
        var name = extension[0];
        extension = extension.pop();
        let reader = new FileReader();
        reader.readAsArrayBuffer(file)
        reader.onload = function (e) {
          let res = e.target.result;//ArrayBuffer
          shp(res).then((res) => {
            var blob = new Blob([JSON.stringify(res)]);
            var href = URL.createObjectURL(blob);
            $('#export').prop('href', href);
            $('#export').prop('download', `${name}.geojson`);
            geo = new BM.GeoJSON(res).addTo(map);
            map.fitBounds(geo.getBounds())
          }).catch(function (e) {
            console.log(e, 'error');
            alert('不是受支持的shp壓縮包，請嘗試使用GIS office導(dǎo)出SHP')
          })
        }
      });
      $('#satellite').on('click', function () {
        $('#upload').click();
      });

    </script>
  </body>

  </html>