ArcGIS API 팝업의 사용자 정의 콘텐츠

팝업

나는 항상 ArcGIS API for JavaScript에서 가장 많이 사용되는 위젯이 Popup이라고 주장해 왔습니다. 확대/축소와는 별개로... 기능이 포함된 웹 맵을 보고 클릭을 시도하는 것을 처음으로 본능적으로 느낄 수 있습니다. 범례는 훌륭하고 시각화는 데이터로 스토리를 전달하는 데 매우 강력하지만 때로는 특정 기능이나 위치에 대한 정보만 원할 수도 있습니다. 팝업이 빛나는 곳입니다!

기본적으로 Popup은 일반적으로 기능 속성에 대한 표 형식 정보를 표시합니다. 빠르고 간단하며 요점까지. 팝업에서 차트, 첨부 파일 정보, 아케이드 표현을 사용할 수도 있습니다. MapViewer을 활용하여 팝업을 작성하는 것이 좋습니다. 이렇게 하면 팝업이 어떻게 생겼는지 실시간으로 경험할 수 있습니다. 하지만 그렇다고 해서 팝업에 대한 약간의 창의적인 건물 맞춤 콘텐츠를 얻을 수 없다는 의미는 아닙니다. 재미 좀 보자.

당신이 원하는대로

논의한 바와 같이 Popups에서 사용할 수 있는 various types of content이 있습니다. 개발자에게 가장 흥미로운 것은 CustomContent일 것입니다. CustomContent를 사용하면 HTML 요소, 위젯, 문자열 등 표시할 수 있는 모든 것을 반환할 수 있습니다. 또한 약속을 지원하므로 콘텐츠를 반환하기 전에 수많은 비동기 작업을 실행할 수 있습니다. This sample은 팝업에서 일부 통계를 실행하고 검색 위젯을 반환하는 방법을 잘 보여줍니다. 당신은 나를 따라오고 있습니까? Popup의 위젯! 원하는 경우 팝업에 다른 맵이나 장면을 로드할 수도 있습니다.

팝업 위치에 대한 날씨 정보를 표시하고 싶을 수 있습니다. 국립기상청에서 이와 같은 용도로 사용할 수 있는 완전 무료weather API가 있습니다. Popup의 그래픽에서 좌표를 가져오고 날씨 API를 쿼리하여 날씨 정보 예측을 얻을 수 있습니다.

The code for this blog post is available on codepen

일부 날씨 정보를 표시하는 데 꽤 좋은 사용 사례인 도시의 FeatureLayer가 있다고 가정해 보겠습니다. 단일 필드에 대한 표 정보와 일기 예보의 사용자 지정 콘텐츠를 모두 표시하고 싶을 수 있습니다. 내 PopupTemplate을 이렇게 정의할 수 있습니다.

const layer = new FeatureLayer({
  popupTemplate: {
    title: "{NAME}",
    outFields: ["*"],
    content: [
      new FieldsContent({
        fieldInfos: [
          {
            fieldName: "POPULATION",
            label: "Population",
            format: {
              places: 0,
              digitSeparator: true,
            },
          },
        ],
      }),
      new CustomContent({
        creator: async ({ graphic }) => {
          const { latitude, longitude } = graphic.geometry;
          const response = await fetch(
            `https://api.weather.gov/points/${latitude},${longitude}`
          );
          const results = await response.json();
          const { forecast } = results.properties;
          const forecastResponse = await fetch(forecast);
          const data = await forecastResponse.json();
          const { periods } = data.properties;
          const element = document.createElement("div");
          let fragment = `<h3>Weather Forecast</h3><br/>`;
          for (let a of periods) {
            fragment += `
                <image width="36" height="36" src=${a.icon}><br/>
                <strong>Name</strong>: <span>${a.name}</span><br/>
                <strong>Forecast</strong>: <span>${a.shortForecast}</span><br/>
                <strong>Temp</strong>: <span>${a.temperature}${a.temperatureUnit}</span><br/>
                <strong>Wind</strong>: <span>${a.windSpeed}, ${a.windDirection}</span><br/>
                <hr/>
            `;
          }
          element.innerHTML = fragment;
          return element;
        },
      }),
    ],
  },
  ...
});

자, 여기서 한 걸음 뒤로 물러나 봅시다. popupTemplate.content 및 FieldsContent 를 포함하는 CustomContent 에 대한 배열이 있습니다.

new FieldsContent({
    fieldInfos: [
        {
        fieldName: "POPULATION",
        label: "Population",
        format: {
            places: 0,
            digitSeparator: true,
        },
        },
    ],
})

이렇게 하면 단일Population 필드가 표 형식으로 표시됩니다. 이것은 매우 간단합니다. CustomContent를 살펴보겠습니다.

new CustomContent({
    creator: async ({ graphic }) => {
        const { latitude, longitude } = graphic.geometry;
        const response = await fetch(
          `https://api.weather.gov/points/${latitude},${longitude}`
        );
        const results = await response.json();
        const { forecast } = results.properties;
        const forecastResponse = await fetch(forecast);
        const data = await forecastResponse.json();
        const { periods } = data.properties;
        const element = document.createElement("div");
        let fragment = `<h3>Weather Forecast</h3><br/>`;
        for (let a of periods) {
        fragment += `
            <image width="36" height="36" src=${a.icon}><br/>
            <strong>Name</strong>: <span>${a.name}</span><br/>
            <strong>Forecast</strong>: <span>${a.shortForecast}</span><br/>
            <strong>Temp</strong>: <span>${a.temperature}${a.temperatureUnit}</span><br/>
            <strong>Wind</strong>: <span>${a.windSpeed}, ${a.windDirection}</span><br/>
            <hr/>
        `;
        }
        element.innerHTML = fragment;
        return element;
    },
})

여기서 핵심은 날씨 API에서 일부 데이터를 가져올 수 있도록 creator 메서드를 비동기 함수로 사용하는 것입니다. 그래픽 지오메트리에서 위도와 경도를 뽑아낼 수 있습니다. 이 위치에 대한 날씨 API에서 초기 결과를 얻으면 해당 결과는 예보 URL과 같은 보다 자세한 날씨 정보에 대한 다양한 URL을 제공합니다. 예보 URL에 또 다른 요청을 보내고 낮과 밤 날씨 정보에 대한 더 자세한 5일 예보를 얻을 수 있습니다. 기상 조건에 맞는 아이콘도 제공합니다. 이 정보를 사용하여 Popup에 표시할 HTML 요소 목록을 구성할 수 있습니다. 이와 유사한 팝업이 표시됩니다!

요약

하루가 끝나면 Popup용 CustomContent 내에서 원하는 모든 것을 거의 사용할 수 있습니다. 사용자 지정 차트 요구 사항이 있거나 주변 기능에 대한 분석을 실행하고 싶을 수 있습니다. 그것이 CustomContent 사용의 장점입니다. 필요한 모든 작업을 수행할 수 있습니다. 일부 개발자가 이것으로 무엇을 빌드할지 매우 궁금합니다. 데이터를 처리하기 위해 Popup 내부의 전체 마이크로 앱일 수도 있습니다!

자세한 내용은 아래 영상에서 확인하실 수 있습니다!