webGISgis

geoserver的GSR插件使用介绍

2022-12-26  本文已影响0人  polong

背景

    GeoServer是一款很好用的开源GIS服务软件,而ArcGIS JS API是一款不错的webgis框架,通常ArcGIS JS API要搭配ArcGIS Server来使用,而ArcGIS Server售价往往过高。

    通过加入GSR扩展,基本正常使用的FeatureServer和MapServer功能。就API而言,每个GeoServer工作区都被视为ArcGIS®服务。ArcGIS®URL在GeoServer中如下所示:

http://localhost:8080/geoserver/gsr/services/topp/MapServer/

http://localhost:8080/geoserver/gsr/services/topp/FeatureServer/

安装方法

    下载GSR Jar包,放到目录里。设置Tomcat跨域。

代码

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Intro to PopupTemplate - 4.8</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/css/main.css">
  <script src="https://js.arcgis.com/4.24/"></script>

  <script>
    require([
      "esri/Map",
      "esri/layers/FeatureLayer",
      "esri/views/MapView",
      "esri/config",
      "dojo/domReady!"
    ], function(
            Map,
            FeatureLayer,
            MapView,esriConfig
    ) {
      esriConfig.request.corsEnabledServers.push("localhost:8080");
      // Create the map
      var map = new Map({
        basemap: "gray-vector",
      });

      // Create the MapView
      var view = new MapView({
        container: "viewDiv",
        map: map,
        extent: { // autocasts as new Extent()
          xmin: 143.83482400000003,
          ymin: -43.648056,
          xmax: 148.47914100000003,
          ymax: -39.573891,
          spatialReference: 4326
        },
      });

      /*************************************************************
       * The PopupTemplate content is the text that appears inside the
       * popup. {fieldName} can be used to reference the value of an
       * attribute of the selected feature. HTML elements can be used
       * to provide structure and styles within the content. The
       * fieldInfos property is an array of objects (each object representing
       * a field) that is use to format number fields and customize field
       * aliases in the popup and legend.
       **************************************************************/

      var template = { // autocasts as new PopupTemplate()
        title: "Boroughs in NY",
        content: [{
          // It is also possible to set the fieldInfos outside of the content
          // directly in the popupTemplate. If no fieldInfos is specifically set
          // in the content, it defaults to whatever may be set within the popupTemplate.
          type: "fields",
          fieldInfos: [ {
            fieldName: "COUNTRY",
            label:"COUNTRY",
            visible: true,
            // format: {
            //   digitSeparator: true,
            //   places: 0
            // }
          }]
        }]
      };

      // Reference the popupTemplate instance in the
      // popupTemplate property of FeatureLayer
      var featureLayer = new FeatureLayer({
        url: "http://localhost:8080/geoserver/gsr/services/topp/FeatureServer/3",
        outFields: ["*"],
        popupTemplate: template
      });
      map.add(featureLayer);
    });

  </script>
</head>

<body>
<div id="viewDiv"></div>
</body>

</html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>MapImageLayer - create dynamic map layers - 4.5</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/css/main.css">
  <script src="https://js.arcgis.com/4.24/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <script>
    require(["esri/config"], function (esriConfig) {
      esriConfig.request.corsEnabledServers.push("localhost:8080");
    });
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/MapImageLayer",
      "esri/config",
      "dojo/domReady!"
    ], function (Map, MapView, MapImageLayer, esriConfig) {
      esriConfig.request.corsEnabledServers.push("localhost:8080");
      var layer = new MapImageLayer({
        url: "http://localhost:8080/geoserver/gsr/services/topp/MapServer/3",
        title: "Topp"
      });

      /*****************************************************************
       * Add the layer to a map
       *****************************************************************/

      var map = new Map({
        basemap: "gray-vector",
        layers: [layer]
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,

        extent: { // autocasts as new Extent()
          xmin: 143.83482400000003,
          ymin: -43.648056,
          xmax: 148.47914100000003,
          ymax: -39.573891,
          spatialReference: 4326
        }
      });
    });
  </script>


</head>

<body>
<div id="viewDiv"></div>

</div>
</body>

</html>

使用效果

a7ef89aa50084f7092b3f2f45d5abd99_tplv-k3u1fbpfcp-watermark.png bb63a4b9e2c7466ca0862e24cb5c22d0_tplv-k3u1fbpfcp-watermark.png

参考资料

https://www.osgeo.cn/geoserver-user-manual/community/gsr/usage.html

上一篇下一篇

猜你喜欢

热点阅读