将位置数据输入 Esri Map 并在 Esri Map 上将位置显示为精确点
Posted
技术标签:
【中文标题】将位置数据输入 Esri Map 并在 Esri Map 上将位置显示为精确点【英文标题】：Feed location data to the Esri Map and display locations on Esri Map as pinpoints 【发布时间】：2022-01-02 03:28:49 【问题描述】：我想将美国某些州的一些位置数据（纬度、经度等）传递到 ArcGIS Esri 地图，并将这些位置在 Esri 地图中显示为精确点（如 Google 地图）。目前，我的 Angular 代码如下，我找不到任何 ArcGIS 文档 向 Esri Map 提供数据。
如果您对如何实现这一目标有任何想法，请告诉我。
esri-map-component.html
<!-- Map Div -->
<div #mapViewNode></div>
esri-map-component.ts
// The <div> where the map is loaded
public featureLayerUrl = environment.parcelAtlasUrl;
public webMapId = environment.webMapId;
@ViewChild('mapViewNode', static: true ) private mapViewEl: ElementRef;
ngOnInit(): void
this.getEsriToken();
getEsriToken()
this.esriMapService.getEsriAccessToken().subscribe(
res =>
this.esriToken = res.token;
if(res.token)
this.initializeMap(this.esriToken);
,
error =>
,
() =>
);
// Initialize MapView and return an instance of MapView
initializeMap(esriToken)
const container = this.mapViewEl.nativeElement;
config.apiKey = esriToken;
//load the webMap
const webmap = new WebMap(
portalItem:
id: this.webMapId
);
//load the ParcelAtlas feature layer
const layer = new FeatureLayer(
url: this.featureLayerUrl,
);
webmap.add(layer);
const view = new MapView(
container,
map: webmap
);
this.view = view;
return this.view.when();
【问题讨论】：
【参考方案1】：您可以通过多种方式将数据添加到地图中。您可以使用FeatureLayer 或GraphicLayer，甚至可以将其添加到视图图形集合中。
在我为你制作的这个例子中，我建议你使用FeatureLayer。虽然它不使用 Angular，但您可以轻松地转换为您的代码。要将FeatureLayer 与客户端上的数据一起使用，您需要：
Graphic 集合设置source 属性，在示例中我使用Object 数组（它会自动转换为预期值），
设置geometryType，在本例中为point，
和objectIDField。
我假设你一开始就有数据，如果你在运行应用程序时需要添加/更新/删除数据，可以使用FeatureLayer的方法applyEdits。
ArcGIS JS API - FeatureLayer
示例：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Pinpoint Example</title>
<style>
html,
body,
#viewDiv
padding: 0;
margin: 0;
height: 100%;
width: 100%;
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.21/esri/css/main.css">
<script src="https://js.arcgis.com/4.21/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/popup/content/CustomContent"
], function (Map, MapView, FeatureLayer, CustomContent)
const data = [
lat: 32.727482,
lon: -117.1560632,
name: "Automotive Museum",
addrs: "2080 Pan American Plaza, San Diego, CA 92101, United States",
url: "http://sdautomuseum.org/"
,
lat: 32.7136902,
lon: -117.1763293,
name: "USS Midway Museum",
addrs: "910 N Harbor Dr, San Diego, CA 92101, United States",
url: "http://www.midway.org/"
,
lat: 32.7641112,
lon: -117.2284536,
name: "SeaWorld",
addrs: "500 Sea World Dr, San Diego, CA 92109, United States",
url: "https://seaworld.com/san-diego"
,
lat: 32.7360032,
lon: -117.1557741,
name: "Zoo",
addrs: "2920 Zoo Dr, San Diego, CA 92101, United States",
url: "https://zoo.sandiegozoo.org/"
];
const map = new Map(
basemap: "streets-navigation-vector"
);
const view = new MapView(
container: "viewDiv",
map: map,
zoom: 12,
center:
latitude: 32.7353,
longitude: -117.1490
);
const layer = new FeatureLayer(
source: data.map((d, i) => (
geometry:
type: "point",
longitude: d.lon,
latitude: d.lat
,
attributes:
ObjectID: i,
...d
)),
fields: [
name: "ObjectID",
alias: "ObjectID",
type: "oid"
,
name: "name",
alias: "Name",
type: "string"
,
name: "addrs",
alias: "addrs",
type: "string"
,
name: "url",
alias: "url",
type: "string"
,
name: "lat",
alias: "Latitude",
type: "double"
,
name: "lon",
alias: "Longitude",
type: "double"
,
],
objectIDField: ["ObjectID"],
geometryType: "point",
renderer:
type: "simple",
symbol:
type: "text",
color: "red",
text: "\ue61d",
font:
size: 30,
family: "CalciteWebCoreIcons"
,
popupTemplate:
title: "name",
content: [
type: "fields",
fieldInfos: [
fieldName: "addrs",
label: "Address"
,
fieldName: "lat",
label: "Latitude",
format:
places: 2
,
fieldName: "lon",
label: "Longitude",
format:
places: 2
]
,
new CustomContent(
outFields: ["*"],
creator: (event) =>
const a = document.createElement("a");
a.href = event.graphic.attributes.url;
a.target = "_blank";
a.innerText = event.graphic.attributes.url;
return a;
)
],
outFields: ["*"]
);
map.add(layer);
);
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>【讨论】：
谢谢，@cabesuon。您对以下问题也有任何想法吗？ ***.com/questions/70101230/…以上是关于将位置数据输入 Esri Map 并在 Esri Map 上将位置显示为精确点的主要内容，如果未能解决你的问题，请参考以下文章