天地图(全国版)根据已知点集合绘制直线
生活随笔
收集整理的這篇文章主要介紹了
天地图(全国版)根据已知点集合绘制直线
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
場景：
? ? ? ? ?最近又開始整天地圖了，先前整的是福建省的，這次整全國版的(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>以上代碼可以打開頁面??國家天地圖代碼示例 復制進去，點擊運行即可。
總結
以上是生活随笔為你收集整理的天地图(全国版)根据已知点集合绘制直线的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 秋招如何抱佛脚？2022最新大厂Java
- 下一篇： oracle新增、删除索引以及主键修改