여러 개의 NOverlayImage를 사용할 경우, 해당 이미지가 포함된 일부 오버레이가 특정 줌 레벨에서 보이지 않는 현상

[spencer0124]

import 'package:flutter_naver_map/flutter_naver_map.dart';

class CampusMarker {
  final String id;
  final NLatLng position;
  String get imagepath => 'assets/images/$id.png';

  CampusMarker({
    required this.id,
    required this.position,
  });
}

final List<CampusMarker> hsscCampusMarker = [
    CampusMarker(id: 'line1', position: const NLatLng(37.587361, 126.994479)),
    CampusMarker(id: 'line2', position: const NLatLng(37.587441, 126.990506)),
    CampusMarker(id: 'line4', position: const NLatLng(37.588636, 126.993209)),
    CampusMarker(id: 'line7', position: const NLatLng(37.588353, 126.994262)),
    CampusMarker(id: 'line8', position: const NLatLng(37.58752, 126.99322)),
    CampusMarker(id: 'line9', position: const NLatLng(37.586819, 126.995246)),
    CampusMarker(id: 'line31', position: const NLatLng(37.589184, 126.991539)),
    CampusMarker(id: 'line32', position: const NLatLng(37.589053, 126.992435)),
    CampusMarker(id: 'line33', position: const NLatLng(37.588572, 126.992666)),
    CampusMarker(id: 'line61', position: const NLatLng(37.587882, 126.991079)),
    CampusMarker(id: 'line62', position: const NLatLng(37.588160, 126.990868)),
  ];

...controller.hsscCampusMarker.map(
            (campusMarker) => NMarker(
              id: campusMarker.id,
              position: campusMarker.position,
              size: const Size(25, 25),
              icon: NOverlayImage.fromAssetImage(campusMarker.imagepath),
            )
              ..setZIndex(10)
              ..setGlobalZIndex(10),
          ),

마커를 조금 더 효율적으로 표시하기 위해서 hsscCampusMarker에 필요한 정보를 다 써두고, 해당 정보를 반복적으로 불러와서 마커를 표시하려고 했습니다.

그런데 icon이 const가 아닌 경우 (코드처럼 다 다른 경우) 마커가 hsscCampusMarker의 상단에 있는 3개 ~ 4개만 보이고 나머지는 대부분 누락됩니다.

해당 코드에서 icon을 const로 변경하는 경우( 다 동일한 아이콘을 주는 경우) 의도한대로 동작합니다.

• asset의 문제는 아닙니다.
• IOS & Android 둘다 동일합니다.

[note11g]

안녕하세요. 제보에 감사드립니다.

혹시 pubspec.yaml에 asset 경로를 어떻게 설정해두셨는지 여쭤볼 수 있을까요?

[spencer0124]

flutter:
  assets:
    - ".env"
    - assets/
    - assets/applogo/
    - assets/fonts/
    - assets/images/
    - assets/lottie/
    - assets/SKKU/

이렇게 설정해두었고, 마커에 필요한 이미지 파일은 assets/images 폴더 안에 line(숫자).png 형식으로 저장해두었습니다.

[note11g]

혹시 이미지들의 크기를 알 수 있을까요? 비트맵의 크기가 너무 크면 이런 현상이 발생할 수도 있을 것 같습니다. 맵에 100m 간격으로 모두 다른 아이콘(평균 을 사용하여 테스트해 보았을 때,

zoomLevel이 14까지는 정상적으로 표출되었으나, 줌 레벨을 더 줄였을 때에는 메모리에 적재되는 양을 조절하느라 일부 마커가 보이지 않는 현상이 발생하였습니다. 다만, 이때 오버레이 터치 이벤트 역시 수신되지 않는 것으로 보아, 오버레이 자체가 지도에서 보여지지 않게 되는 것 같습니다. (보여지지 않는 상태에서 마커 이미지를 기본으로 변경해보았으나, 뜨지 않는 것을 확인했습니다)

(사용한 예시 아이콘-1774, 아이콘들은 0\~9999번까지 생성하여 테스트하였으며 용량은 7~9kb입니다. 해당 이미지들을 사용한 결과, 1000개가 넘어가면 일부 마커가 보여지지 않습니다.)

정확한 답변을 위해, SDK 팀에 공식 답변을 요청하도록 하겠습니다. 일단은 파일 크기에 의해 숨겨지는 것으로 추정됩니다.

그리고 마커에 정보를 나타내야 한다면, 많은 이미지를 사용하는 것보다는 caption 혹은 subCaption 등을 활용하시는 방법을 권장드립니다. 감사합니다.

[spencer0124]

감사합니다!

혹시 caption이나 subCaption을 사용하는 부분은 문서 어디서 찾아볼 수 있을까요?

[note11g]

marker.setCaption처럼 설정하실 수 있습니다. 문서에는 곧 추가될 예정입니다.

[spencer0124]

감사합니다 다만 현재 제가 구현하고자 하는 부분은 사진처럼 건물 사이 간격이 50m 내외인 경우라서 텍스트를 넣기보다는 마커별로 다른 숫자를 표현해줘야 하는 기능이 절실한데.. 네이버 답변이 오기 전에 시도해볼 수 있는 방법 중

(1) 마커 바로 위에 숫자를 오버레이하거나 (2) 마커 이미지 자체를 Container와 같은 위젯으로 만드는 것

둘중에 가능한게 있을까요?

[note11g]

1. 네이버 지도 SDK 팀에 문의를 드리기 위해, 정확한 재현 조건이 필요해서 해당 재현 방법을 조사중에 있습니다. 이 부분이 상당시간 소요될 것으로 판단됩니다.

2. 말씀하신 방법 2가지를 설명드리자면,

   • 1번 방법은 captionAligns와 captionOffset을 활용할 수 있습니다.
   • 2번 방법은 NOverlayImage.fromWidget factory constructor를 통해서 지원하고 있으나, 이 역시 비트맵 이미지를 활용하는 방법이기 때문에, 같은 문제가 발생할 수 있는 점 양해 바랍니다.

[note11g]

증상에 알맞게 제목을 변경합니다.

[note11g]

• 1번 방법은 captionAligns와 captionOffset을 활용할 수 있습니다.

다음은 예시입니다.

final pathMarker = NMarker(
        id: "path_mark_$pathPointId",
        position: latLng,
        caption: NOverlayCaption(text: "$pathPointId", textSize: 14),
        captionOffset: -16,
        captionAligns: [NAlign.top]);

    mapController.addOverlay(pathMarker);

[spencer0124]

말씀해주신 방법으로 원하는 형태로 구현 성공했습니다! 감사드립니다

증상 재현을 위해서는

1. 마커의 이미지를 각각 모두 다르게 설정
2. 마커의 간격들을 50-100m 이내로 밀집되게 설정 두가지가 핵심 요인인 것으로 추정합니다.

제가 사용했었던 NLatLng으로 테스트해보시면 쉬울 것 같습니다

List<CampusMarker> hsscMarkers = [
  CampusMarker(
    idNumber: "1",
    position: const NLatLng(37.587361, 126.994479),
  ),
  CampusMarker(
    idNumber: "2",
    position: const NLatLng(37.587441, 126.990506),
  ),
  CampusMarker(
    idNumber: "4",
    position: const NLatLng(37.588636, 126.993209),
  ),
  CampusMarker(
    idNumber: "7",
    position: const NLatLng(37.588353, 126.994262),
  ),
  CampusMarker(
    idNumber: "8",
    position: const NLatLng(37.58752, 126.99322),
  ),
  CampusMarker(
    idNumber: "9",
    position: const NLatLng(37.586819, 126.995246),
  ),
  CampusMarker(
    idNumber: "31",
    position: const NLatLng(37.589184, 126.991539),
  ),
  CampusMarker(
    idNumber: "32",
    position: const NLatLng(37.589053, 126.992435),
  ),
  CampusMarker(
    idNumber: "33",
    position: const NLatLng(37.588572, 126.992666),
  ),
  CampusMarker(
    idNumber: "61",
    position: const NLatLng(37.587882, 126.991079),
  ),
  CampusMarker(
    idNumber: "62",
    position: const NLatLng(37.588160, 126.990868),
  ),
];

[note11g]

둘 다 잘 보이는 것 같습니다. 지금은 11개의 서로 다른 마커를 사용하였는데요, 사용된 이미지를 업로드합니다(마지막 마커는 사용하지 않았습니다만, 일단 올립니다.)

대부분의 경우 1000개 이하의 이미지 종류면 문제가 없는 것으로 보입니다.

일단은 재현이 불가능하므로, 이슈를 닫겠습니다. 다시 문제가 발생하신다면, 이슈를 열어주시고 재현 조건을 상세히 기재해주시길 부탁드리겠습니다. 감사합니다.

---