使用Google地图API绘制改变颜色的折线 [英] Use Google maps API to draw a polyline that changes color
本文介绍了使用Google地图API绘制改变颜色的折线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在开发一个项目，将GPX文件的轨道绘制到Google地图上，并使用属性对颜色进行颜色编码（我们称之为 Score ）。我已经做了一些编辑，现在有一个额外的标记 Score ，用于此GPX文件中的每个坐标。这是我修改的GPX文件的一个片段。
< trkpt lat =50.834048lon = - 0.127354> < ELE> 31.0< / ELE>
< Score> -0.64730385< / Score>
< time> 2016-07-07T14：31：51Z< / time>
< / trkpt>
< trkpt lat =50.833833lon = - 0.127600> < ELE> 31.0< / ELE>
< Score> -0.647203< / Score>
< time> 2016-07-07T14：32：09Z< / time>
< / trkpt>
我正在学习Google Maps的JavaScript API来完成绘图部分。我的问题是，如何创建基于 Score 更改颜色的ployline？我明白，我可以用两点画出数以千计的迷你多段线，并为它们中的每一个设置颜色。但它感觉很原始。有没有更好的方法来做到这一点？另外，我可以编写自己的函数来解析这个GPX文件，但为什么Google Maps不支持GPX？
如果有助于说明我的目的，那就是我尝试实现：
解决方案
为每个线段创建一条单独的折线，并根据该线段第一个点中的Score为其分配颜色。
for（var i = 0; i <（trkpts.length-1）; i ++）{
var coord1 = new google.maps.LatLng（parseFloat（trkpts [i] .getAttribute（lat）），
parseFloat（trkpts [i] .getAttribute（lon）））;
var coord2 = new google.maps.LatLng（parseFloat（trkpts [i + 1] .getAttribute（lat）），
parseFloat（trkpts [i + 1] .getAttribute（lon） ））;
var score = parseFloat（nodeValue（trkpts [i] .getElementsByTagName（Score）[0]））;
var polyline = new google.maps.Polyline（{
map：map，
path：[coord1，coord2]，
strokeColor：rgb（-1,1，score） ，
strokeWeight：4，
strokeOpacity：1.0
}）;
}
代码段：
var map; var bounds = new google.maps.LatLngBounds（）; function initialize（）{map = new google.maps.Map（document.getElementById（map_canvas），{center：new google.maps .LatLng（34,108），zoom：13，mapTypeId：google.maps.MapTypeId.ROADMAP}）; var gpxStr ='< gpx>< trk>< trkseg>< trkpt lat =50.834048lon = - 0.127354> < ele> 31.0< / ele>< Score> -0.64730385< / Score><时间> 2016-07-07T14：31：51Z< / time>< / trkpt>< trkpt lat =" 50.833833 lon = - 0.127600> < ele> 31.0< / ele>< Score> -0.647203< / Score><时间> 2016-07-07T14：32：09Z< / time>< / trkpt>< trkpt lat =50.833715 lon = - 0.127768> < ele> 31.0< / ele>< Score> 0.647203< / Score>< time> 2016-07-07T14：32：50Z< / time>< / trkpt>< trkpt lat =50.833171 LON = - 0.128468 > < ele> 31.0< / ele>< Score> 0.99609375< / Score><时间> 2016-07-07T14：32：50Z< / time>< / trkpt>
html，body，＃ map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//
I'm working on a project that plots a track from GPX file onto google maps, and color-code it with an attribute (let's call it Score). I've done some editing that now there is an additional tag Score for each coordinate in this GPX file. Here is a snippet of my modified GPX file.
<trkpt lat="50.834048" lon="-0.127354"> <ele>31.0</ele>
<Score>-0.64730385</Score>
<time>2016-07-07T14:31:51Z</time>
</trkpt>
<trkpt lat="50.833833" lon="-0.127600"> <ele>31.0</ele>
<Score>-0.647203</Score>
<time>2016-07-07T14:32:09Z</time>
</trkpt>
I'm learning Google maps' javascript API to do the plotting part. My question is, how to create a ployline that changes color based on Score? I understand that I can draw thousands of mini polylines with just two points, and set a color for each of them. But it feels very primitive. Are there better ways of doing it? Also, I could write my own function to parse this GPX file, but why doesn't google maps support GPX?
If it helps to illustrate my purpose, this is what I try to achieve:
解决方案
One option would be to make a separate polyline for each line segment and assign it a color based on the Score in the first point of that segment.
for (var i=0;i<(trkpts.length-1);i++) {
var coord1 = new google.maps.LatLng(parseFloat(trkpts[i].getAttribute("lat")),
parseFloat(trkpts[i].getAttribute("lon")));
var coord2 = new google.maps.LatLng(parseFloat(trkpts[i+1].getAttribute("lat")),
parseFloat(trkpts[i+1].getAttribute("lon")));
var score = parseFloat(nodeValue(trkpts[i].getElementsByTagName("Score")[0]));
var polyline = new google.maps.Polyline({
map: map,
path: [coord1, coord2],
strokeColor: rgb(-1,1,score),
strokeWeight: 4,
strokeOpacity: 1.0
});
}
code snippet:
var map;
var bounds = new google.maps.LatLngBounds();
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(34, 108),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var gpxStr = '<gpx><trk><trkseg><trkpt lat="50.834048" lon="-0.127354"> <ele>31.0</ele><Score>-0.64730385</Score><time>2016-07-07T14:31:51Z</time></trkpt><trkpt lat="50.833833" lon="-0.127600"> <ele>31.0</ele><Score>-0.647203</Score><time>2016-07-07T14:32:09Z</time></trkpt><trkpt lat="50.833715" lon="-0.127768"> <ele>31.0</ele><Score>0.647203</Score><time>2016-07-07T14:32:50Z</time></trkpt><trkpt lat="50.833171" lon="-0.128468"> <ele>31.0</ele><Score>0.99609375</Score><time>2016-07-07T14:32:50Z</time></trkpt><trkpt lat="50.832951" lon="-0.128771"> <ele>31.0</ele><Score>-0.5</Score><time>2016-07-07T14:32:50Z</time></trkpt></trkseg></trk></gpx>';
var xml = parseXml(gpxStr);
var trkpts = xml.getElementsByTagName("trkpt");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < (trkpts.length - 1); i++) {
var coord1 = new google.maps.LatLng(parseFloat(trkpts[i].getAttribute("lat")),
parseFloat(trkpts[i].getAttribute("lon")));
bounds.extend(coord1);
var coord2 = new google.maps.LatLng(parseFloat(trkpts[i + 1].getAttribute("lat")),
parseFloat(trkpts[i + 1].getAttribute("lon")));
bounds.extend(coord2);
var score = parseFloat(nodeValue(trkpts[i].getElementsByTagName("Score")[0]));
var polyline = new google.maps.Polyline({
map: map,
path: [coord1, coord2],
strokeColor: rgb(-1, 1, score),
strokeWeight: 4,
strokeOpacity: 1.0
})
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
function rgb(minimum, maximum, value) {
var ratio = 2 * (value - minimum) / (maximum - minimum);
b = Math.floor(Math.max(0, 255 * (1 - ratio)));
r = Math.floor(Math.max(0, 255 * (ratio - 1)));
g = 255 - b - r;
var hexStr = ("00" + r.toString(16)).slice(-2);
hexStr += ("00" + g.toString(16)).slice(-2);
hexStr += ("00" + b.toString(16)).slice(-2);
hexStr = "#" + hexStr;
return hexStr
}
function parseXml(str) {
if (window.ActiveXObject) {
var doc = new ActiveXObject('MicrosoftXMLDOM');
doc.loadXML(str);
return doc;
} else if (window.DOMParser) {
return (new DOMParser()).parseFromString(str, 'text/xml');
}
}
//nodeValue: Extract the text value of a DOM node, with leading and trailing whitespace trimmed
function nodeValue(node, defVal) {
var retStr = "";
if (!node) {
return (typeof defVal === 'undefined' || defVal === null) ? '' : defVal;
}
if (node.nodeType == 3 || node.nodeType == 4 || node.nodeType == 2) {
retStr += node.nodeValue;
} else if (node.nodeType == 1 || node.nodeType == 9 || node.nodeType == 11) {
for (var i = 0; i < node.childNodes.length; ++i) {
retStr += arguments.callee(node.childNodes[i]);
}
}
return retStr;
};
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
这篇关于使用Google地图API绘制改变颜色的折线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
