D3.js를 사용하여 물류 지도를 만드는 단계에 대한 자세한 설명-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

D3.js를 사용하여 물류 지도를 만드는 단계에 대한 자세한 설명

php中世界最好的语言

Apr 13, 2018 am 10:32 AM

javascript 지도

이번에는 D3.js를 사용하여 물류맵을 생성하는 과정을 자세히 설명하겠습니다. D3.js를 사용하여 물류맵을 생성할 때 주의사항은 무엇인가요? .

제작 아이디어

배경으로 중국 지도를 그려야 합니다.
도로 시트의 시작점과 끝점을 그리려면 주요 도시의 위도 및 경도 좌표가 필요합니다.
물류 주문이 접수된 도시에는 깜박이는 표시가 그려집니다.
이미 물류주문 대상 도시가 있어 경로는 그려지지 않습니다.
새로운 물류 주문이 생성될 때마다 마크가 대상까지의 경로를 따라 이동하는 애니메이션 효과가 발생합니다.
브라우저의 리소스 사용량을 줄이기 위해 그리기 후 데이터를 정리해야 합니다.

코딩 시작하기

1.웹페이지 템플릿 만들기

D3JS를 로드합니다. 편의상 디버깅을 위해 d3.js 파일을 로컬로 직접 다운로드하여 실제 사용 시 로딩 경로로 변경할 수 있습니다. D3의 V4 버전이 사용되며 이는 V3 버전과 다릅니다.

그릴 준비가 된 p 블록을 만듭니다.

rreee

SVG를 만들고 다음 코드를 모두 <script></script>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf8">
    <script type="text/javascript" src="../../static/d3/d3.js"></script>
    <title>地图</title>
  </head>
  <body>
    <p class="fxmap">
    </p>
  </body>
  <script type="text/javascript"></script>
</html>

로그인 후 복사

에 배치하세요. 호출할 준비가 된 SVG 그래픽 그룹 만들기

gmp는 배경 지도와 시작점 마커를 저장합니다.
mline은 시작점과 대상 및 대상점 사이의 연결을 저장합니다.
버튼, 테스트용 버튼

var width=1000 , height=800; // 定义SVG宽高
var svg = d3.select("body p.fxmap")
            .append("svg")
            .attr("width", "width) 
            .attr("height", height)
            .style("background","#000"); //

로그인 후 복사

프로젝션 기능 만들기

경도와 위도는 도면에 직접 사용할 수 없으며 평면 좌표로 변환해야 합니다. d3js는 상대적으로 다양한 투영 방법을 제공합니다. 이 예에서는 geoEquirectangular() 방법이 사용됩니다.
projection은 경도와 위도를 평면 좌표로 변환하는 방법입니다.
path는 선 그리기를 위해 경도와 위도를 점 좌표로 변환하는 방법입니다(경로를 구성하기 위해 함수를 작성할 필요가 없습니다)

gmap = svg.append("g").attr("id", "map").attr("stroke", "white").attr("stroke-width",1);
    mline = svg.append("g").attr("id", "moveto").attr("stroke", "#FFF").attr("stroke-width", 1.5).attr("fill","#FFF");
    button = svg.append("g").attr("id", "button").attr("stroke", "white").attr("stroke-width", 1).attr("fill", "white");

로그인 후 복사

다중 연결 끝점 호출을 위한 마커 만들기

물류 라인의 끝점은 여러 개 있으므로 모두 마커에서 호출됩니다.
이 마크는 가운데 원 + 바깥쪽 고리로 구성되어 있습니다. 외부 링의 깜박임 효과는 별도로 생성됩니다.

var projection = d3.geoEquirectangular()
              .center([465,395]) // 指定投影中心，注意[]中的是经纬度
              .scale(height)
              .translate([width / 2, height / 2]);
var path = d3.geoPath().projection(projection);

로그인 후 복사

중국 지도를 그리고 출발점(창사)을 표시

지도에 사용된 경도와 위도 세트는 china.json입니다. 온라인에는 많은 파일이 있습니다

marker = svg.append("defs")
          .append("marker")
          .append("marker")
          .attr("id", "pointer")
          .attr("viewBox","0 0 12 12")  // 可见范围
          .attr("markerWidth","12")    // 标记宽度
          .attr("markerHeight","12")    // 标记高度
          .attr("orient", "auto")     //
          .attr("markerUnits", "strokeWidth") // 随连接线宽度进行缩放
          .attr("refX", "6")       // 连接点坐标
          .attr("refY", "6")
    // 绘制标记中心圆
    marker.append("circle")
        .attr("cx", "6")
        .attr("cy", "6")
        .attr("r", "3")
        .attr("fill", "white");
    // 绘制标记外圆，之后在timer()中添加闪烁效果
    marker.append("circle")
        .attr("id", "markerC")
        .attr("cx", "6")
        .attr("cy", "6")
        .attr("r", "5")
        .attr("fill-opacity", "0")
        .attr("stroke-width", "1")
        .attr("stroke", "white");

로그인 후 복사

지정된 시작점에서 끝점까지 선을 그리는 방법을 만들고 네트워크 지점에 마커를 그립니다.

해당 메소드에는 목적지 도시명(city)과 경도 및 위도(데이터)를 입력해야 합니다.
이전에 구축한 project() 메소드를 호출하여 목적지 경도 및 위도를 평면 좌표로 변환합니다.
시작점(창사)과 끝점 사이의 거리를 선 길이와 애니메이션 시간 매개변수로 계산합니다.
선에 원형 표시를 그려 시작점에서 끝점까지 움직이는 애니메이션을 구현합니다.
마크가 끝점으로 이동한 후 리소스 절약을 위해 삭제됩니다.
이전에 선점이 그려져 있었다면 선은 그려지지 않고 움직이는 표시만 그려집니다.
물류 주문이 처리될 때마다 도시 기록이 +1됩니다.

// 记录长沙坐标
    var changsha = projection([112.59,28.12]);
    // 读取地图数据，并绘制中国地图
    mapdata = [];
    d3.json('china.json', function(error, data){
      if (error)
        console.log(error);
      // 读取地图数据
      mapdata = data.features;
      // 绘制地图
      gmap.selectAll("path")
        .data(mapdata)
        .enter()
        .append("path")
        .attr("d", path);
      // 标记长沙
      gmap.append("circle").attr("id","changsha")
        .attr("cx", changsha[0])
        .attr("cy", changsha[1])
        .attr("r", "6")
        .attr("fill", "yellow")
      gmap.append("circle").attr("id","changshaC")
        .attr("cx", changsha[0])
        .attr("cy", changsha[1])
        .attr("r", "10")
        .attr("stroke-width", "2")
        .attr("fill-opacity", "0");
    });

로그인 후 복사

마크 바깥쪽 원의 깜박이는 효과를 얻기 위해 애니메이션 대기열 인스턴스를 만듭니다

// 创建对象，保存每个城市的物流记录数量
    var citylist = new Object();
    // 创建方法，输入data坐标，绘制发射线
    var moveto = function(city, data){
      var pf = {x:projection([112.59,28.12])[0], y:projection([112.59,28.12])[1]};
      var pt = {x:projection(data)[0], y:projection(data)[1]};
      var distance = Math.sqrt((pt.x - pf.x)**2 + (pt.y - pf.y)**2);
      if (city in citylist){
        citylist[city]++;
      }else{
        mline.append("line")
            .attr("x1", pf.x)
            .attr("y1", pf.y)
            .attr("x2", pt.x)
            .attr("y2", pt.y)
            .attr("marker-end","url(#pointer)")
            .style("stroke-dasharray", " "+distance+", "+distance+" ")
            .transition()
            .duration(distance*30)
            .styleTween("stroke-dashoffset", function(){
              return d3.interpolateNumber(distance, 0);
            });
        citylist[city] = 1;
      };
      mline.append("circle")
        .attr("cx", pf.x)
        .attr("cy", pf.y)
        .attr("r", 3)
        .transition()
        .duration(distance*30)
        .attr("transform", "translate("+(pt.x-pf.x)+","+(pt.y-pf.y)+")")
        .remove();
    };

로그인 후 복사

테스트 버튼을 만들고 대상 도시 데이터를 테스트하세요

var scale = d3.scaleLinear();
    scale.domain([0, 1000, 2000])
      .range([0, 1, 0]);
    var start = Date.now();
    d3.timer(function(){
      var s1 = scale((Date.now() - start)%2000);
      // console.log(s1);
      gmap.select("circle#changshaC")
        .attr("stroke-opacity", s1);
      marker.select("circle#markerC")
        .attr("stroke-opacity", s1);
    });

로그인 후 복사

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7517

Cakephp 튜토리얼

1378

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

iPhone에서 Google 지도를 기본 지도로 설정하는 방법 Apr 17, 2024 pm 07:34 PM

iPhone의 기본 지도는 Apple의 독점 위치 정보 제공업체인 지도입니다. 지도가 점점 좋아지고 있지만 미국 이외의 지역에서는 잘 작동하지 않습니다. Google 지도와 비교하면 아무것도 제공할 수 없습니다. 이 기사에서는 Google 지도를 사용하여 iPhone의 기본 지도로 만드는 실행 가능한 단계에 대해 설명합니다. iPhone에서 Google 지도를 기본 지도로 설정하는 방법 Google 지도를 휴대전화의 기본 지도 앱으로 설정하는 것은 생각보다 쉽습니다. 아래 단계를 따르십시오. – 전제 조건 단계 – 휴대폰에 Gmail이 설치되어 있어야 합니다. 1단계 – AppStore를 엽니다. 2단계 – “Gmail”을 검색하세요. 3단계 - Gmail 앱 옆을 클릭하세요.

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 Dec 17, 2023 pm 02:54 PM

WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 Dec 17, 2023 pm 12:09 PM

JavaScript 및 WebSocket을 사용하여 실시간 온라인 주문 시스템을 구현하는 방법 소개: 인터넷의 대중화와 기술의 발전으로 점점 더 많은 레스토랑에서 온라인 주문 서비스를 제공하기 시작했습니다. 실시간 온라인 주문 시스템을 구현하기 위해 JavaScript 및 WebSocket 기술을 사용할 수 있습니다. WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로 클라이언트와 서버 간의 실시간 양방향 통신을 실현할 수 있습니다. 실시간 온라인 주문 시스템에서는 사용자가 요리를 선택하고 주문을 하면

Xiaohongshu 지도에 매장 주소를 추가하는 방법은 무엇입니까? 매장 주소 설정은 어떻게 입력하나요? Mar 29, 2024 am 09:41 AM

샤오홍슈가 젊은이들 사이에서 점점 더 인기를 끌면서 샤오홍슈에 매장을 오픈하는 사람들도 점점 더 많아지고 있습니다. 많은 초보 판매자들이 매장 주소를 설정할 때 어려움을 겪고 있으며 매장 주소를 지도에 추가하는 방법을 모릅니다. 1. 샤오홍슈 지도에 매장 주소를 추가하는 방법은 무엇인가요? 1. 먼저 귀하의 매장이 Xiaohongshu에 등록된 계정이 있고 성공적으로 매장을 오픈했는지 확인하세요. 2. Xiaohongshu 계정에 로그인하고 스토어 백엔드에 들어가서 "스토어 설정" 옵션을 찾으세요. 3. 스토어 설정 페이지에서 "스토어 주소" 열을 찾아 "주소 추가"를 클릭하세요. 4. 팝업되는 주소 추가 페이지에서 시, 군, 군, 거리, 집번호 등 매장의 상세 주소 정보를 입력합니다. 5. 입력 후 '추가 확인' 버튼을 클릭하세요. Xiaohongshu가 주소를 알려드릴 것입니다.

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 Dec 17, 2023 am 09:39 AM

WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법 오늘날의 디지털 시대에는 점점 더 많은 기업과 서비스에서 온라인 예약 기능을 제공해야 합니다. 효율적인 실시간 온라인 예약 시스템을 구현하는 것이 중요합니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 예약 시스템을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. WebSocket이란 무엇입니까? WebSocket은 단일 TCP 연결의 전이중 방식입니다.

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 Dec 17, 2023 pm 05:13 PM

JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리

Highcharts를 사용하여 지도 히트맵을 만드는 방법 Dec 17, 2023 pm 04:06 PM

Highcharts를 사용하여 지도 히트맵을 생성하려면 특정 코드 예제가 필요합니다. 히트맵은 다양한 색상 음영을 통해 각 영역의 데이터 분포를 나타낼 수 있는 시각적 데이터 표시 방법입니다. 데이터 시각화 분야에서 Highcharts는 풍부한 차트 유형과 대화형 기능을 제공하는 매우 인기 있는 JavaScript 라이브러리입니다. 이 기사에서는 Highcharts를 사용하여 지도 히트맵을 생성하고 특정 코드 예제를 제공하는 방법을 소개합니다. 먼저, 몇 가지 데이터를 준비해야 합니다.

See all articles

D3.js를 사용하여 물류 지도를 만드는 단계에 대한 자세한 설명

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제