js读取本地shp文件在天地图中展示

要在天地图中展示本地的.shp文件，可以使用开源的JavaScript地图库Leaflet和Leaflet.Shapefile插件来帮助实现。首先，您需要将.shp文件转换为GeoJSON格式，然后将其加载到Leaflet地图中。

以下是一个简单的示例代码：

// 导入Leaflet和Leaflet.Shapefile插件
import L from 'leaflet';
import 'leaflet.shapefile';

// 创建地图容器
const map = L.map('map').setView([39.9, 116.4], 10);

// 添加天地图底图
L.tileLayer('http://t{s}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=yourkey', {
  subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
  attribution: '天地图'
}).addTo(map);

// 读取本地的.shp文件并转换为GeoJSON格式
const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.readAsArrayBuffer(file);
  reader.onload = (evt) => {
    const arrayBuffer = evt.target.result;
    shp(arrayBuffer).then((geojson) => {
      // 将GeoJSON数据添加到地图中
      L.shapefile(geojson).addTo(map);
    });
  };
});

在上面的示例中，我们首先创建了一个Leaflet地图容器，并添加了天地图底图。然后，我们监听文件输入框的`change`事件，读取本地的.shp文件并转换为GeoJSON格式。最后，我们使用`L.shapefile`函数将GeoJSON数据添加到地图中。

请注意，上述示例需要您替换`yourkey`为您自己的天地图开发者密钥。另外，由于JavaScript的安全限制，我们不能直接读取本地文件系统中的文件。因此，我们需要通过文件输入框的方式来让用户选择文件。