问题描述
我指的是https://developers.arcgis.com/documentation/core-concepts/features-and-geometries/#polygons中提供的用于绘制多边形并将地图移动到该位置的示例。该示例工作正常。但是，当我使用诸如环值和WKID之类的自定义详细信息时，该位置会绘制多边形，但地图会完全缩小，从而显示所有大洲（请检查随附的图像）。需要通过单击“ +”小部件来缩放到该位置。请在下面找到代码。 enter image description here
我已经评论了示例wkid和ring值。
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.16/"></script>
<style>
html,body,#mapDiv,.map .container {
padding: 0;
margin: 0;
height: 100%;
width: 100vw !important;
}
</style>
</head>
<body>
<script>
require([
"esri/Map","esri/views/MapView","esri/layers/FeatureLayer","esri/geometry/polygon","esri/Graphic","esri/symbols/SimpleFillSymbol","esri/geometry/support/webMercatorUtils","dojo/domready!"
],function(
Map,MapView,FeatureLayer,polygon,Graphic,SimpleFillSymbol,webMercatorUtils
) {
var map = new Map({
basemap: "streets-navigation-vector"
});
// 102704 - Custom WKID
// 4326 - Example WKID
var poly = new polygon({
spatialReference: {
wkid: 102704
},rings: [
// [
// [-118.38516,34.0127],// [-118.38827,34.01489],// [-118.38813,34.01602],// [-118.38797,34.01648],// [-118.3876,34.01712],// [-118.38733,34.01696],// [-118.38696,34.01749],// [-118.38662,34.01789],// [-118.38689,34.01805],// [-118.38683,34.01812],// [-118.38295,34.01592],// [-118.38516,34.0127]
// ],// [
// [-118.38661,34.01486],// [-118.38634,34.01498],// [-118.38652,34.01563],// [-118.3867,34.01559],// [-118.38679,34.01595],// [-118.38699,34.01591],// [-118.38707,34.01507],// [-118.38661,34.01486]
// ]
[
[
2744913.4668447226,541568.06113781035
],[
2744917.4038447142,541499.65215389431
],[
2744864.2454864681,541496.82210706174
],[
2744813.6648789644,541494.12952713668
],[
2744810.2104895562,541563.64283956587
],[
2744860.4905727208,541565.79441006482
],[
2744913.4668447226,541568.06113781035
]
]
]
});
var view = new MapView({
container: "mapDiv",map: map,// zoom: 18,// minZoom: 13,basemap: "satellite",// extent: webMercatorUtils.geographicToWebMercator(poly.extent.expand(3))
});
var symbol = new SimpleFillSymbol({
style: "solid",color: [4,121,193,0.5],outline: {
width: 2,color: [2,94,149,1]
}
});
var graphic = new Graphic({
geometry: poly,symbol: symbol
});
view.on("mouse-wheel",function(event) {
event.stopPropagation();
var doc = document.documentElement;
var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
window.scroll(0,top + event.deltaY);
});
view.graphics.add(graphic);
});
</script>
<div style="" id="mapDiv"></div>
<mat-button-toggle-group [multiple]="true" name="fontStyle" aria-label="Font Style">
<button id="parcels" value="bold">Parcels</button>
<button id="housenumbers" value="italic">House Numbers</button>
<button id="said" value="underline">Sample Area IDs</button>
</mat-button-toggle-group>
</body>
</html>
解决方法
问题在于您需要重新投影自定义坐标（假设我们将自定义坐标称为其他坐标，而不是WebMercator 3857或102100和Geographics 4326）。为此，
- 您可以使用
GeometryService与ArcGIS Server的几何服务进行交互， - 或者您可以尝试使用
pojection模块在客户端中执行此操作。
这里有一个基于代码的有效示例，该示例使用GeometryService。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.16/"></script>
<style>
html,body,#mapDiv,.map .container {
padding: 0;
margin: 0;
height: 100%;
width: 100vw !important;
}
</style>
</head>
<body>
<script>
require([
"esri/Map","esri/views/MapView","esri/geometry/Polygon","esri/geometry/SpatialReference","esri/Graphic","esri/tasks/GeometryService","esri/tasks/support/ProjectParameters","dojo/domReady!"
],function (
Map,MapView,Polygon,SpatialReference,Graphic,GeometryService,ProjectParameters
) {
const map = new Map({
basemap: "streets"
});
const view = new MapView({
container: "mapDiv",map: map
});
// 102704 - Custom WKID
const originalPoly = new Polygon({
spatialReference: {
wkid: 102704
},rings: [
[
[
2744913.4668447226,541568.06113781035
],[
2744917.4038447142,541499.65215389431
],[
2744864.2454864681,541496.82210706174
],[
2744813.6648789644,541494.12952713668
],[
2744810.2104895562,541563.64283956587
],[
2744860.4905727208,541565.79441006482
],[
2744913.4668447226,541568.06113781035
]
]
]
});
console.log(`Original Polygon: ${JSON.stringify(originalPoly.toJSON())}`);
const geomSer = new GeometryService(
"http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer"
);
const outSpatialReference = new SpatialReference({ wkid: 102100 });
const params = new ProjectParameters({
geometries: [originalPoly],outSpatialReference
});
geomSer.project(params).then(function(result) {
const projectedPoly = result[0];
if (!projectedPoly) {
return;
}
console.log(`Projected Polygon: ${JSON.stringify(projectedPoly.toJSON())}`);
view.graphics.add(new Graphic({
geometry: projectedPoly,symbol: {
type: "simple-fill",style: "solid",color: [255,0.1],outline: {
width: 2,1]
}
}
}));
view.extent = projectedPoly.extent.clone().expand(3);
});
});
</script>
<div id="mapDiv"></div>
</body>
</html>