Hello,
I tried to develope a map with JS API4 that shows several features depending on the used url.
So if you call "https://serverurl/Map.html?fs=Feature1 i would like the map to zoom to that features.
My problem is, that the map doesn't zoom to the feature. I think it could be a spatial reference problem but i'm not able to fix it.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Bebauungsplan Protoyp API4</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.18/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/layers/ImageryLayer",
"esri/widgets/LayerList",
"esri/widgets/Search",
"esri/portal/Portal",
"esri/layers/Layer",
"esri/layers/MapImageLayer",
"esri/layers/ImageryLayer",
"esri/Basemap",
"esri/geometry/Extent",
"esri/geometry/SpatialReference"
], function(
Map,
MapView,
FeatureLayer,
ImageryLayer,
LayerList,
Search,
Portal,
Layer,
MapImageLayer,
ImageryLayer,
Basemap,
Extent,
SpatialReference
)
{
if ('URLSearchParams' in window) { // Feature detection (URLSearchParams is not supported by Internet Explorer)
var url = new URL(document.URL);
var search_params = url.searchParams;
if(search_params.has('fs')) {
var url_bplan = search_params.get('fs');
var expr = "bemerkung = '"+url_bplan+"'";
} else {
expr1 = "leer";
}
};
var bplan_feature = new FeatureLayer({
url: "https://serverurl/FeatureServer/1",
outFields: ["*"],
definitionExpression : expr,
title : "Layer",
});
var baselayer = new ImageryLayer({
// URL to the imagery service
url: "https://serverurl/ImageServer",
wkid: 25832
});
var basemap = new Basemap({
baseLayers: [baselayer],
title: "Luftbild 2020"
})
var map = new Map({
basemap: basemap,
});
var view = new MapView({
container: "viewDiv",
map: map
});
map.add(bplan_feature);
view.goTo(bplan_feature);
//add layerlist
var layerList = new LayerList({
view: view,
selectionEnabled : true
});
view.ui.add(layerList, {
position: "top-right",
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
What you see is just a part of the script but I think one can see the problem. Using the goTo Method results in nothing. Features and Basemap are all in 25832 UTM
Thanks for your help
