天地圖(全國版)根據已知點集合繪製直線
阿新 • • 發佈：2018-12-16
場景：
最近又開始整天地圖了，先前整的是福建省的，這次整全國版的(http://lbs.tianditu.gov.cn/)，省級的和全國的天地圖用的竟然是不一樣的，國家搞一套，省級搞一套，市級不知道是不是又是一套，作為開發人員，覺得這個好難受，好坑，特別是已經做好了，又突然要改的。這次遇到要根據已知的點在地圖上畫線，簡單來說就是繪製歷史軌跡，省級的示例頁面上直接有方法，這邊不多說，全國版的只有開啟繪製功能，沒有根據已知點集合進行繪製，剛剛研究了一下，找到了方法，很簡單，特此記錄下，以下為程式碼：
解決方法：
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="keywords" content="天地圖"/> <title>天地圖－地圖API－演示根據已知點繪製歷史軌跡</title> <script src=" http://api.tianditu.gov.cn/api?v=4.0&tk=您的金鑰" type="text/javascript"></script> <script src="http://cdn.bootcss.com/d3/3.5.17/d3.js " charset="utf-8"></script> <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/D3SvgOverlay.js"></script> <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/CarTrack.js"></script> <script src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/data/point.js"></script> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微軟雅黑";} #mapDiv{height:400px;width:100%;} p,input { margin-top: 10px; margin-left: 5px; font-size: 14px; } </style> </head> <body> <div id="mapDiv" ></div> <p>演示根據已知點繪製歷史軌跡</p> <script> //地圖設定 var tile = new T.TileLayer("http://t4.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}"); var map = new T.Map("mapDiv", {layers: [tile]}); map.centerAndZoom(new T.LngLat(116.318090, 39.920270), 13); /******************根據已知點集合繪製歷史軌跡開始***********************/ //線的一下基本配置 var lineconfig={ color: "red", //線的顏色 weight: 2, //線的寬度 opacity: 1, //線的透明度 lineStyle:"solid" //線的樣式 }; //建立點物件集合並建立幾個點放進集合中 var points = new Array(); points[0]=new T.LngLat(116.318090, 39.920270); points[1]=new T.LngLat(116.311, 39.920272); points[2]=new T.LngLat(116.1, 39.920276); var line = new T.Polyline(points,lineconfig);//建立線條的物件 //向地圖上新增線 map.addOverLay(line); /******************根據已知點集合繪製歷史軌跡結束***********************/ </script> </body> </html>
以上程式碼可以開啟頁面 國家天地圖程式碼示例 複製進去，點選執行即可。