背景
????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" >
<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" >
<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
