Raphael.js는 중국 지도 지도 그리기 방법_javascript 기술을 그립니다.

최근 데이터 통계 프로젝트에 중국 지도가 사용되는데, 이는 특정 기간의 특정 성 및 지역의 통계 데이터를 지도에 동적으로 표시하는 것입니다. 플래시가 필요하지 않고 단지 의존하기만 하면 됩니다. Raphael.js 및 SVG 이미지는 지도의 대화형 작업을 완료합니다. 이 기사에서는 js를 사용하여 지도 상호 작용을 완료하는 방법을 공유하겠습니다.

raphael.js를 간단히 소개하자면, raphael.js는 웹페이지에 다양한 벡터 그래픽, 각종 차트, 이미지 자르기, 회전, 모션 애니메이션 등의 기능을 그릴 수 있는 작은 자바스크립트 라이브러리입니다. 또한, Raphael.js는 브라우저 간 호환이 가능하며 이전 IE6과도 호환됩니다. Raphael.js 공식 홈페이지 주소: http://raphaeljs.com/

준비

벡터 지도를 준비해야 합니다. 인터넷에서 벡터 지도를 찾거나 일러스트레이터를 사용하여 벡터 지도를 그린 다음 SVG 형식의 파일로 내보낼 수 있습니다. 이 파일은 브라우저에서 열 수 있습니다. 경로 경로 정보(M으로 시작하는 좌표)가 추출됩니다. 그리고 chimamapPath.js 형식에 맞게 맵 경로 정보를 준비합니다.

코드 복사 코드는 다음과 같습니다.

var china = [];
function PaintMap(R) {
var attr = {
"fill": "#97d6f5",
"획": "#eee",
"획 너비": 1 ,
"Stroke-linejoin": "round"
};

china.aomen = {
이름: "마카오",
경로: R.path("M413. 032,. .......일부 생략... ,414.183z").attr(attr)
}
china.hk = {
  //형식은 위와 동일
}
}

위는 준비된 지도 경로 정보를 () 함수에 캡슐화하고 나중에 호출하기 위해 파일 이름을 chinamapPath.js로 저장하는 방법입니다.

HTML

먼저 head 섹션에 있는 raphael.js 라이브러리 파일과 chimamapPath.js 경로 정보 파일을 로드합니다.

코드 복사 코드는 다음과 같습니다.

그런 다음 지도를 배치해야 하는 본문에 div#map을 배치합니다.

코드 복사 코드는 다음과 같습니다.

자바스크립트

먼저 페이지에서 지도를 호출하는 방법은 다음과 같습니다.

코드 복사 코드

window.onload = function () {
//지도 그리기
var R = Raphael("map", 600, 500);//Load the ID가 map 인 div에 매핑하고 영역을 600x500px 크기로 설정합니다.
페인트맵(R)
}

이때, 브라우저로 열면 로드된 지도가 표시됩니다. 다음으로 지도의 해당 지방 영역에 지방 이름을 추가하고 각 지방 블록 위로 마우스를 이동할 때 색상이 변하는 애니메이션 효과를 추가해야 합니다.

코드 복사 코드는 다음과 같습니다.

window.onload = function () {
var R = Raphael("map", 600, 500)
//지도 그리기 메소드 호출
PaintMap(R); 🎜 >
var textAttr = {
"fill": "#000",
"font-size": "12px",
"cursor": "pointer"
}; 🎜>
{

// 현재 그래픽의 중앙 좌표를 가져옵니다
                                                    | tr);

st[0 ].onmouseover = function () {//
st.animate({fill: st.color, 스트로크 : "#eee"}, 500)으로 마우스 슬라이드
                                                  .onmouseout = 기능 () {// 마우스가
St.animate({Fill: "#97d6F5", Stroke: "#eee"}, 500)
China [State] ['Text']             R.safari를 떠납니다. () 🎜>

raphael이 제공하는 메소드는 위 코드에서 사용됩니다: getColor, getBBox, animate, toFront 등. 이러한 지침은 Raphael 문서에서 찾을 수 있으며 이 기사에서는 설명하지 않습니다.
또한, 지도의 크기로 인해 일부 지방 이름이 지도에 제대로 표시되지 않는 현상이 있으며, 더욱 편안하게 보이도록 오프셋을 수정해야 합니다.





코드 복사


코드는 다음과 같습니다.

window.onload = function () {
    var R = Raphael("map", 600, 500);
    ...
    for (var state in china) {
        ...
        (function (st, state) {
            ....
            switch (china[state]['name']) {
                case "江苏":
                    xx += 5;
                    yy -= 10;
                    break;
                case "河北":
                    xx -= 10;
                    yy += 20;
                    break;
                case "天津":
                    xx += 10;
                    yy += 10;
                    break;
                case "上海":
                    xx += 10;
                    break;
                case "广东":
                    yy -= 10;
                    break;
                case "澳门":
                    yy += 10;
                    break;
                case "香港":
                    xx += 20;
                    yy += 5;
                    break;
                case "甘肃":
                    xx -= 40;
                    yy -= 30;
                    break;
                case "陕西":
                    xx += 5;
                    yy += 10;
                    break;
                case "内蒙古":
                    xx -= 15;
                    yy += 65;
                    부서지다;
               기본값:
            }
            ...
      })(china[state]['path'], state);
   }
}