将位置数据馈送到Esri Map并在Esri Map上以精确点的形式显示位置
我想传递一些位置数据(纬度、经度等)。将美国某些州的地图添加到ArcGIS Esri地图中，并在Esri地图中将这些位置显示为精确点(如Google地图)。目前，我的角度代码如下所示，我找不到任何ArcGIS文档 向Esri地图提供数据。
如果您对如何实现这一目标有任何想法，请告诉我。
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();
解决方案
您可以通过多种方式将数据添加到地图。您可以使用FeatureLayer或GraphicLayer，甚至可以将其添加到视图图形集合。
在我为您制作的这个示例中，我将建议您使用FeatureLayer。虽然它不使用角度，但您可以很容易地转换为您的代码。要对客户端上的数据使用FeatureLayer，您需要：
- 用
Graphic的集合设置source属性，在示例中我使用了Object数组(它自动强制转换为预期的)， - 设置
geometryType，在本例中为point， - 和
objectIDField。
我假设您有开头的数据，如果您在运行应用程序时需要添加/更新/删除数据，可以使用FeatureLayer的方法applyEdits。
ArcGIS JS API - FeatureLayer
示例：
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假"><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>相关文章