BIGEMPA Js API示例中心
shp导入源代码展示

代码编辑区运行下载还原
<!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.bigemap.com/reader/download/detail201802017.html
    -->
    <link href='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />
    <link href="http://www.bigemap.com/Public/css/button.min.css" rel="stylesheet">
    <!--
        JS地址请使用：
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
    -->
    <script src='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
    <!--
        引入加载KML的JS插件
    -->
    <script type="text/javascript" src="http://www.bigemap.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">
      数据保存在本地，刷新会消失，仅仅用作测试
    </p>
    <p class="tool">
      <a id="satellite" class="button button-tiny button-rounded button-primary" href="javascript:void (0);">导入SHP</a>
      <a id="export" class="button button-tiny button-rounded button-primary" download="geojson.geojson"
        href="javascript:void (0);">导出GeoJSON</a>
      <input type="file" accept=".zip" style="display: none" id="upload">
    </p>
    <div id='map'></div>
    <script src="http://www.bigemap.com/Public/common/js/jquery.min.js"></script>
    <script src="http://www.bigemap.com/Public/js/shpjs/shp.min.js"></script>
    <script type="text/javascript">// 软件配置信息地址，软件安装完成之后使用本地地址，如：http://localhost:9000
      BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
      var map = BM.map('map', 'bigemap.zhongkexingtu', {
        center: [30, 104],
        zoom: 3,
        zoomControl: true,
        attributionControl: false,
        preferCanvas: true,//适用于数据量大时 地图反应速度加快
      });
      var geo;
      //创建一个谷歌卫星图层 ，具体API详情请参见 ：http://www.bigemap.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导出SHP')
          })
        }
      });
      $('#satellite').on('click', function () {
        $('#upload').click();
      });

    </script>
  </body>

  </html>