英文:
Convert GeoJson to latLng coordinates
问题
我试图根据坐标更改路径的颜色。我需要为路径的每个段更改颜色，所以我认为我需要将坐标转换为数组，然后为每个段应用样式。
到目前为止，我已经成功读取了KML文件，将其应用于地图并更改了其颜色（使用LeafletJs和Omnivore）：
// 地图容器的声明
var mymap = L.map('mapid').setView([纬度, 经度], 缩放值);
// 地图图层的声明
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=TOKEN_VALUE', {
maxZoom: 18,
id: 'mapbox.streets'
}).addTo(mymap);
// 读取和解析包含要着色的路径的KML文件
var runLayer = omnivore.kml("kml/path.kml")
.on('ready', function() {
runLayer.eachLayer(function (layer) {
layer.setStyle({
color: '#f44336',
weight: 4
});
}).addTo(mymap);
})
然而，这会更改整个路径的颜色，我需要知道如何分析并根据其特定坐标更改每个单独的段的颜色。
我尝试获取坐标数组 coordsToLatLngs，但没有关于如何使用它的文档，我无法使其工作。
我尝试了以下代码：
var coords = L.coordsToLatLngs(runLayer.coordinates);
但是它给我返回了错误：
L.coordsToLatLngs is not a function
所以我尝试了：
var coords = L.GeoJSON.coordsToLatLngs(runLayer.coordinates);
和
var coords = L.GeoJSON.coordsToLatLngs(runLayer.coordinates, 0, false);
但现在它们都返回了错误：
Uncaught TypeError: Cannot read properties of undefined (reading 'length')
英文:
I'm trying to change a path color, based on it's coordinates. I need to change the color for every segment of the path, so I think I need to convert the coordinates to an array and then apply a style for each segment.
So far I managed to read KML file, apply it to the map and change it's color (with LeafletJs and Omnivore):
// declaration of the map container
var mymap = L.map('mapid').setView([latitude, longitude], zoomValue);
/ declaration of the map layer
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=TOKEN_VALUE', {
maxZoom: 18,
id: 'mapbox.streets'
}).addTo(mymap);
// read and parse the KML file containing the path to be colored
var runLayer = omnivore.kml("kml/path.kml")
.on('ready', function() {
runLayer.eachLayer(function (layer)
{
layer.setStyle({
color: '#f44336',
weight: 4
});
}).addTo(mymap);})
However this change the color to the entire path, I need to know how to analyze and change each single segment color based on it's specific coordinates.
I've tried getting an array of coordinates coordsToLatLngs but there is no documentation on how to use it and I cannot make it work.
I've tried
var coords = L.coordsToLatLngs(runLayer.coordinates);
but it gives me the error
L.coordsToLatLngs is not a function
so I tried
var coords = L.GeoJSON.coordsToLatLngs(runLayer.coordinates);
and
var coords = L.GeoJSON.coordsToLatLngs(runLayer.coordinates, 0, false);
but now they both return
Uncaught TypeError: Cannot read properties of undefined (reading 'length')
答案1
得分: 1
不要紧，我找到解决方案了：
var runLayer = omnivore.kml("kml/path.kml")
.on('ready', function() {
runLayer.eachLayer(function (layer) {
// 将GeoJson坐标转换为数组
var coordsArr = layer._latlngs;
// 对于每个线段
var i = 0;
while (i + 1 < coordsArr.length) {
// 获取线的起点和终点坐标
var lineStartPoint = L.latLng(coordsArr[i]);
var lineEndPoint = L.latLng(coordsArr[i + 1]);
var lnPts = [lineStartPoint, lineEndPoint];
// 要更改的颜色
var clr = '#0b5394';
// 这里是颜色更改的逻辑
// 使用之前获取的坐标和颜色插入折线
var polyline = L.polyline(lnPts, {color: clr}).addTo(mymap);
// 计数器增加
i++;
}
});
})
英文:
Never mind, I found the solution:
var runLayer = omnivore.kml("kml/path.kml")
.on('ready', function() {
runLayer.eachLayer(function (layer) {
// convert GeoJson coordinates to array
var coordsArr = layer._latlngs;
// for each segment
var i = 0;
while (i + 1 < coordsArr.length) {
// get the start and end coordinates for the line
var lineStartPoint = L.latLng(coordsArr[i]);
var lineEndPoint = L.latLng(coordsArr[i + 1]);
var lnPts = [lineStartPoint, lineEndPoint];
// the color to be changed
var clr = '#0b5394';
// logic for color change here
// insert a polyline with the coordinates and color retrieved before
var polyline = L.polyline(lnPts, {color: clr}).addTo(mymap);
// counter increment
i++;
}
});
})
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论