arcgis api 前端加载shp显示

最新推荐文章于 2024-01-25 12:03:17 发布

gis小白的成长之路

最新推荐文章于 2024-01-25 12:03:17 发布

阅读量3.1k

点赞数 4

分类专栏： ARCGIS API 文章标签： ARCGIS API FileReader shapefile

本文链接：https://blog.csdn.net/qq_36179257/article/details/112463123

版权

ARCGIS API 专栏收录该内容

21 篇文章

订阅专栏

arcgus api无直接加载shp的方法，通常需转换格式。本例先通过input按钮导入shp数据，再用FileReader将其转为ArrayBuffer格式，借助开源shapefile的js解析库解析成空间属性数据，最后根据信息通过GraphicsLayer绘制。还提供测试数据和源代码下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

arcgus api 没有直接加载shp的方法，通常是把shp转换为其他格式。本例实现步骤为：

1、 input按钮导入shp数据
2、通过FileReader将shp数据转换为ArrayBuffer格式
使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件内容,可以使用File对象或者Blob对象来指定所要读取的文件或数据.其中File对象可以是来自用户在一个元素上选择文件后返回的FileList对象。传送门：FileReader文档
3 、借助开源 shapefile 的js解析库，将shp文件解析成我们需要空间属性数据。
传送门：shapefile说明文档
在这里插入图片描述
4、根据获得的空间属性信息通过GraphicsLayer绘制出来

实现效果：
在这里插入图片描述

点线面三种测试数据下载：传送门：点线面测试数据和源代码下载

全部代码，本人惯例，复制可直接运行：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Arcgis JS 加载shp</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      font-family: Arial;
    }

    #map {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0px dashed black;
      background-color: rgb(0, 38, 48);
    }

  </style>
</head>
<body> 
<input type="file" id="shpFile">
<button type="button" onclick="upload()">加载</button>
<div id="map">
</div>
</body>

<!-- 引入ARCGIS API -->
<script src="https://unpkg.com/shapefile@0.6"></script>
<script src="https://js.arcgis.com/3.20"></script>
<script type="text/javascript">
  var map, addGeojson, geoJsonLayer, upload;
  require([
    "esri/map",
    'esri/Color',
    "esri/geometry/Point",
    "esri/geometry/Polyline",
    "esri/geometry/Polygon",
    "esri/layers/ArcGISTiledMapServiceLayer",
    "esri/layers/GraphicsLayer",
    'esri/graphic',
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleFillSymbol",
    'esri/symbols/SimpleLineSymbol',
    "esri/geometry/Extent",
    "dojo/domReady!"
  ], function(
    Map,
    Color,
    Point,
    Polyline,
    Polygon,
    ArcGISTiledMapServiceLayer,
    GraphicsLayer,
    Graphic,
    SimpleMarkerSymbol,
    SimpleFillSymbol,
    SimpleLineSymbol,
    Extent
  ) {

    //地图范围
    var mapExtent = new Extent({
      xmax: 113.799760210539,
      xmin: 106.57095767482662,
      ymax: 20.459116202966324,
      ymin: 18.27952992162579,
      spatialReference: {
        wkid: 4326
      }
    })
   
    map = new Map("map", {
      extent: mapExtent,
      sliderStyle: "small",
      logo: false,
    });

    map.on('load', function () {
      map.hideZoomSlider()
      map.hidePanArrows()
      map.disableDoubleClickZoom() //禁用双击缩放
    })
    //arcgis 在线地图
    var myTileLayer = new ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineCommunity/MapServer");
    map.addLayer(myTileLayer)
    var graphicsLayer = new GraphicsLayer() //绘制图层
    map.addLayer(graphicsLayer)

    var polygonSymbol = new SimpleFillSymbol() //面样式
    var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,new Color([255, 99, 71]),3); //线样式
    var pointSymbol = new SimpleMarkerSymbol() //点样式
    
    //加载方法
    upload = function () {
      let input = document.getElementById("shpFile").files[0]; //获取导入的文件
      let reader = new FileReader(); 
      reader.readAsArrayBuffer(input) //读取文件为 ArrayBuffer
      reader.onload = function(evt){
      let fileData = evt.target.result //fileData就是读取到的文件ArrayBuffer
      shapefile.open(fileData).then(source => source.read().then(function log(result) { //将ArrayBuffer转换
        if (result.done) return
        let type = result.value.geometry.type
        //判断导入shp文件的类型 根据不同类型绘制点线面
        if (type == "Polygon") {
          let polygonPath = result.value.geometry.coordinates[0]
          let polygon = new Polygon()
          polygon.addRing(polygonPath)
          let gr = new Graphic(polygon, polygonSymbol)
          graphicsLayer.add(gr)
        }
        if (type == "LineString") {
          let polylinePath = result.value.geometry.coordinates
          let polyline = new Polyline()
          polyline.addPath(polylinePath)
          let gr = new Graphic(polyline, lineSymbol)
          graphicsLayer.add(gr)
        }
        if (type == "Point") {
          let lon = result.value.geometry.coordinates[0]
          let lat = result.value.geometry.coordinates[1]
          let point = new Point(lon, lat)
          let gr = new Graphic(point, pointSymbol)
          graphicsLayer.add(gr) 
        }
        return source.read().then(log)
      }))
      .catch(error => console.error(error.stack))
      }
    }
  });
</script>
</html>