배경: 회사는 원래 Gaode 온라인 지도를 사용했지만 일부 고객이 인트라넷을 사용하기 때문에 지도를 열면 비어 있습니다. 따라서 오프라인 지도 기능이 추가되어 탭을 통해 지도가 전환되며 기본적으로 온라인 지도가 표시되며 오프라인 탭을 클릭하면 echarts 오프라인 지도가 표시됩니다.
중요: ---- 데모 소스 링크 ---
링크: https://pan.baidu.com/s/1tIKVs1exU_fDctbcoP7beg
추출 코드: 81e6
포함: my-offline-map.rar(데모 소스 코드) 오프라인 지도 개발 지침.doc(문서)
1. 달성:
1.1 월드맵으로 초기화 됩니다.
1.2 하이라이트 효과와 함께 마우스 오버. 지도 마커 렌더링 기능으로 마커를 클릭하면 마커 정보 팝업창이 나타납니다. 팝업 창을 닫으려면 오른쪽 상단의 닫기 버튼을 클릭합니다.
1.3 다른 국가를 클릭하면 다른 국가를 입력하고 해당 국가의 지도를 표시하고 해당 국가의 행정 구역을 클릭하면 해당 행정 구역의 지도를 표시하고 계속 드릴다운하여 초기 세계 지도로 돌아갑니다.
1.4 중국을 클릭하면 중국 지도로 들어가고, 지방을 클릭하면 지방 지도가 표시되며, 해당 도시를 클릭하면 표시됩니다.
도시의 지도. 도시의 카운티를 클릭하면 카운티 수준 지도가 표시됩니다. 드릴다운을 계속하여 초기 세계 지도로 돌아갑니다.
2. 주요 기술 Echarts framework angular
3. 주요 문서:
자산 폴더 아래의 data 및 echarts 폴더는 중국어에서 영어로 번역된 모든 Json 파일 및 JS 맵 파일을 저장하는 데 사용됩니다.
4. 일반적인 문제 해결:
4.1 Echarts 지도 클릭 이벤트가 여러 번 발생하는 이유, 일부는 세 번, 일부는 두 번 발생
지도에 드릴다운이 있어서 그런가 봐요 중국 지도를 클릭했지만 지방 지도도 클릭했습니다
myChart.off('click'); // 반복 호출을 피하기 위해 여기서는 off를 사용합니다.
4.2 Echart 맵 3단계 드릴다운 맵 패닝 및 줌 후 지방을 클릭합니다 중심점의 오프셋으로 인해 지방이 컨테이너 외부로 이동하여 새로 생성된 맵이 보이지 않습니다. －－－ 해결책: 차트를 다시 그릴 때 myChart.setOption(option,true), 다시 그리기를 의미하는 setOption() 메서드에 true를 추가하고 마지막으로 완벽하게 해결해야 한다는 것이 나중에 발견되었습니다.
5. 효과 그림:
6. 기타 참고 사항
6.1 모든 지명은 중국어로 번역되고, countries-map.js--다른 국가의 이름을 중국어로 번역합니다.
6.2 다른 국가의 json 파일 이름과 영어 이름의 차이로 인해 일부 국가에서는 파일 이름이 요청 쿼리 이름과 일치하지 않기 때문에 json 파일을 클릭하여 404로 요청할 수 있습니다. 코드는 getCountriesFileName 함수에 의해 처리됩니다. 세계 지도에 국가가 있고 클릭으로 국가 지도로 드릴할 수 없는 경우 콘솔을 열어 국가 json 파일에 해당하는 요청 경로의 json 파일 이름을 봅니다. all-countries 폴더 아래에 이름이 일치하는지 여부, 일치하지 않는 경우 getCountriesFileName 함수에서 eleList 배열에 계속 추가하십시오.
