geoserver使用rest实现动态发布shp地图服务

最新推荐文章于 2024-07-29 14:45:31 发布

liyan_gis

最新推荐文章于 2024-07-29 14:45:31 发布

阅读量3.2k

点赞数 2

分类专栏： webgis技术相关

本文链接：https://blog.csdn.net/liyan_gis/article/details/99623532

版权

webgis技术相关专栏收录该内容

6 篇文章 1 订阅

订阅专栏

晚上找个很多，都没有一个完整的能运行的，对于小白来说，还是挺费劲的，下面是我的整个过程，希望对大家有所帮助：

1.shp数据，需要将其打包成zip格式，并且，zip里不能包含文件夹

testroad.zip

2.代码部分，使用jquery的ajax请求发布post，实现shp数据的上传+shp图层的发布，核心是网上找的，我是搬运工。

需要注意的部分：就是option参数：

option={
   "type":"VECTOR",
   "workspace":"myshp",
   "datastore":"testroad",
   "file":file.files[0]
   }

工作空间的名字，datastore是新的shp将要创建的存储的名字，file一定是通过html的form的：<input id="file" type="file" name="file">这个方式上传过来的文件，而不是zip的url地址哦。

var file = document.querySelector('[type=file]');
// 通过FormData将文件转成二进制数据
var formData = new FormData();

formData.append('file', file.files[0]);

3.要注意的是跨域问题

此html页面要放在geoserver同一个域名下，否则执行post请求会报告跨域错误导致不成功

4.回调函数返回201，这时候看服务器，是执行成功了

<!DOCTYPE html>
<html>
<script src="./jquery/jquery-3.3.1.min.js"></script>
<body>



<form action="">
        <label for="">
            姓名: <input type="text" name="name">
        </label>
        <label for="">
            文件：<input id="file" type="file" name="file">
        </label>
        <label for="">
            <input type="button" value="保存">
        </label>
</form>

<script>
 const ip="http://localhost:8088/"
 var option
 const fetchList = () => {
  let results = null
  $.ajax({
    url: ip+'geoserver/rest/layers.json',
    dataType: 'json',
    type: 'GET',
    async: false,
    success: (result) => {
      results = result.layers.layer
    },
    headers: {
      'Authorization': 'Basic YWRtaW46Z2Vvc2VydmVy'
    }
  })
  return results
}
//fetchList()
const fetchWorkspaces = () => {
  let results = null
  $.ajax({
    url: ip+'geoserver/rest/workspaces.json',
    dataType: 'json',
    type: 'GET',
    async: false,
    success: (result) => {
      results = result.workspaces.workspace
    },
    headers: {
      'Authorization': 'Basic YWRtaW46Z2Vvc2VydmVy'
    }
  })
  }
  const fixPublish = (option, index = 0) => {
  let results = null
  let content = null
  let url = null
  if (option.type === 'VECTOR') {
    url = ip+'geoserver/rest/workspaces/' + option.workspace + '/datastores/' + option.datastore + '/featuretypes/' + option.name + (index === 0 ? '' : index)
    content = '<featureType><srs>EPSG:4490</srs><projectionPolicy>FORCE_DECLARED</projectionPolicy> <enabled>true</enabled></featureType>'
  }
  $.ajax({
    url: url,
    type: 'PUT',
    async: false,
    data: content,
    headers: {
      'Authorization': 'Basic YWRtaW46Z2Vvc2VydmVy',
      'Content-type': 'text/xml'
    },
    success: (data, textStatus, jqXHR) => {
      if (jqXHR.status === 200) {
        results = '发布成功！'
        // modify layer style
        option.name = option.name + (index === 0 ? '' : index)
        modifyLayerStyle(option)
      }
    },
    error: (jqXHR, textStatus, errorThrown) => {
      if (jqXHR.status === 404) {
        index++
        // 当超过10次时，放弃
        if (index <= 10) {
          fixPublish(option, index)
        }
      }
    }
  })
  return results
}
const publish = (option) => {
  let results = null
 
  if (option.type === 'VECTOR') {
    let formData = new window.FormData()
    formData.append('file', option.file)
    $.ajax({
      url: ip+'geoserver/rest/workspaces/' + option.workspace + '/datastores/' + option.datastore + '/file.shp?charset=GB2312',
      type: 'PUT',
      async: false,
      data: formData,
      contentType: false,
      processData: false,
      headers: {
        'Authorization': 'Basic YWRtaW46Z2Vvc2VydmVy',
        'Content-type': 'application/zip'
      },
      success: (data, textStatus, jqXHR) => {
        if (jqXHR.status === 201) {
          //已经执行成功
        }
      }
    })
  }
  return results
}
//fetchWorkspaces()
var btn = document.querySelector('[type=button]');
btn.onclick = function () {
    // 文件元素
    var file = document.querySelector('[type=file]');
    // 通过FormData将文件转成二进制数据
    var formData = new FormData();
    // 将文件转二进制
    //*****注意2******
    //formData.append('file', file.files[0]);
	 option={
	"type":"VECTOR",
	"workspace":"myshp",
	"datastore":"testroad",
	"file":file.files[0]
	}
	publish(option)
	}
</script>
</body>
</html>