- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一系列(编码或解码的)折线,这些折线是从 Google map /开放街道 map 等服务中捕获的。
例如:
var polylines = ["kclaG|i_qLe@i@{AgBu@_AsCyCiBmBMMW[eCiC}A_BEEeBiB{@}@MW]a@a@e@]a@IGGG_AgAm@i@MOYYMEQSCCi@k@KKu@y@{A}Ay@cA{@{@eBiBOMe@k@_@a@e@e@QQY[cAkAUWMOUWu@w@AACCYY?AMKUUSSSQ]]GGECCCECA?AAA?A?C?G?WB"
,"yfnaGld}pL?e@?]AuDAgA?KAkBGqG?{C?_B?S?aC?[?]A}A?wAASAQ"
,"qmnaGlxxpLn@tEL~@"]
我想将它们存储为 GeoJSON。我发现了很多通过 Leaflet 等工具渲染 GeoJSON 的包,但我在寻找可以将折线导出到 GeoJSON 的包时遇到了困难。
是否存在类似的解决方案,或者是否存在我应该研究的 GeoJSON 标准的特定子集,以便我可以编写工具 myset?
旁注:我最终想要一个 KML 或 SHP 文件。我打算使用http://ogre.adc4gis.com/从 GeoJSON 转换为 SHP。
最佳答案
您正在寻找 GeoJSON LineString 几何类型。虽然算法有点复杂,但是有一个a project on Github提供 JavaScript 中的功能。您应该能够轻松地将其移植到您选择的语言。我还将该功能封装到 JSFiddle 中,以便您可以将其用作在线工具。
您可以在https://jsfiddle.net/ivansams/tw7qLvh4/2/找到该工具。 - 您可以将编码的折线粘贴到“编码折线”中,然后单击“解码”,这将返回 GeoJSON LineString。下面复制了代码,因为 StackOverflow 的规则要求 JSFiddle 附带代码,但可以在 Github 项目站点获取最新代码。
function decode() {
var encodedPolyline = document.getElementById("encoded-polyline").value;
document.getElementById("geojson").value = encodedPolyline;
var coords = polyline.toGeoJSON(encodedPolyline);
document.getElementById("geojson").value = JSON.stringify(coords);
}
var polyline = {};
function encode(current, previous, factor) {
current = Math.round(current * factor);
previous = Math.round(previous * factor);
var coordinate = current - previous;
coordinate <<= 1;
if (current - previous < 0) {
coordinate = ~coordinate;
}
var output = '';
while (coordinate >= 0x20) {
output += String.fromCharCode((0x20 | (coordinate & 0x1f)) + 63);
coordinate >>= 5;
}
output += String.fromCharCode(coordinate + 63);
return output;
}
/**
* Decodes to a [latitude, longitude] coordinates array.
*
* This is adapted from the implementation in Project-OSRM.
*
* @param {String} str
* @param {Number} precision
* @returns {Array}
*
* @see https://github.com/Project-OSRM/osrm-frontend/blob/master/WebContent/routing/OSRM.RoutingGeometry.js
*/
polyline.decode = function(str, precision) {
var index = 0,
lat = 0,
lng = 0,
coordinates = [],
shift = 0,
result = 0,
byte = null,
latitude_change,
longitude_change,
factor = Math.pow(10, precision || 5);
// Coordinates have variable length when encoded, so just keep
// track of whether we've hit the end of the string. In each
// loop iteration, a single coordinate is decoded.
while (index < str.length) {
// Reset shift, result, and byte
byte = null;
shift = 0;
result = 0;
do {
byte = str.charCodeAt(index++) - 63;
result |= (byte & 0x1f) << shift;
shift += 5;
} while (byte >= 0x20);
latitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));
shift = result = 0;
do {
byte = str.charCodeAt(index++) - 63;
result |= (byte & 0x1f) << shift;
shift += 5;
} while (byte >= 0x20);
longitude_change = ((result & 1) ? ~(result >> 1) : (result >> 1));
lat += latitude_change;
lng += longitude_change;
coordinates.push([lat / factor, lng / factor]);
}
return coordinates;
};
/**
* Encodes the given [latitude, longitude] coordinates array.
*
* @param {Array.<Array.<Number>>} coordinates
* @param {Number} precision
* @returns {String}
*/
polyline.encode = function(coordinates, precision) {
if (!coordinates.length) {
return '';
}
var factor = Math.pow(10, precision || 5),
output = encode(coordinates[0][0], 0, factor) + encode(coordinates[0][1], 0, factor);
for (var i = 1; i < coordinates.length; i++) {
var a = coordinates[i],
b = coordinates[i - 1];
output += encode(a[0], b[0], factor);
output += encode(a[1], b[1], factor);
}
return output;
};
function flipped(coords) {
var flipped = [];
for (var i = 0; i < coords.length; i++) {
flipped.push(coords[i].slice().reverse());
}
return flipped;
}
/**
* Encodes a GeoJSON LineString feature/geometry.
*
* @param {Object} geojson
* @param {Number} precision
* @returns {String}
*/
polyline.fromGeoJSON = function(geojson, precision) {
if (geojson && geojson.type === 'Feature') {
geojson = geojson.geometry;
}
if (!geojson || geojson.type !== 'LineString') {
throw new Error('Input must be a GeoJSON LineString');
}
return polyline.encode(flipped(geojson.coordinates), precision);
};
/**
* Decodes to a GeoJSON LineString geometry.
*
* @param {String} str
* @param {Number} precision
* @returns {Object}
*/
polyline.toGeoJSON = function(str, precision) {
var coords = polyline.decode(str, precision);
return {
type: 'LineString',
coordinates: flipped(coords)
};
};
if (typeof module === 'object' && module.exports) {
module.exports = polyline;
}
关于google-maps - 将折线转换为 GeoJSON,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14968026/
有没有办法将多个线段视为 1 条线? IE:我将鼠标悬停在其中一个上,两者都会突出显示,并且切换图例中的可见性将隐藏这两个部分。 http://jsfiddle.net/rayholland/HSvB
我正在使用 geojson 创建折线。我的geojson的格式如下: var myLines = [{ "type": "LineString", "coordinates": [[-
我对 matlab 和图像处理很陌生 我想要实现的是检测图像中的不规则线条。例如,在下图中,有 4 条折线: 我的目标是得到一组代表这 4 条不规则线/折线的像素点。像这样。 我已经通读了一些主题,例
本章响应小伙伴的反馈,除了算法自动画连接线(仍需优化完善),实现了可以手动绘制直线、折线连接线功能。 请大家动动小手,给我一个免费的 Star 吧~ 大家如果发现了 Bug,欢迎来提 Is
这一章把直线连接改为折线连接,沿用原来连接点的关系信息。关于折线的计算,使用的是开源的 AStar 算法进行路径规划,启发方式为 曼哈顿距离,且不允许对角线移动。 请大家动动小手,给我一个免费
话接上回《前端使用 Konva 实现可视化设计器(13)- 折线 - 最优路径应用【思路篇】》,这一章继续说说相关的代码如何构思的,如何一步步构建数据模型可供 AStar 算法进行路径规划,最终画出节
是否可以使用水平线性渐变描边 SVG 多段线,其中渐变的角度在每个多段线顶点发生变化?它看起来像这样: 最佳答案 看看tubefy以色列艾森伯格。目前 svg 中没有任何内容可以准确地以声明方式提供您
我已经实现了一些代码,可以在单击 ListView 项时从 URL 加载图像;这已经用“虚拟”图像进行了测试,并且在 ImageView 对象中显示的图像没有任何问题。 但是,我真正想做的是通过 UR
我正在编写一个函数,用于在 mouseover 和 mouseout 上添加和删除 Mapbox polyline。我的 mouseover 可以正常工作,但我似乎不知道如何在 mouseout 上访
我使用此代码在 OSM 上有一些自定义折线 var polyline1 = [ [44.772142, 17.208980], [44.774753, 17.20764
我的应用程序是实时跟踪器,多个用户登录并通过将他们的坐标发送到我们的网络服务来更新他们的位置,然后每 2 分钟回调一次,让我们在我的 MapView 上显示所有用户。 每次我在 connectionD
我想知道是否有一种方法可以通过单击来突出折线。像这样: Before click After click 最佳答案 您可以使用折线两次。第一次折线更宽并且笔划不透明度为“0”。当您将鼠标悬停在该组上时
我需要显示从 A 到 B 的不同折线。因此,这些线应该彼此区分。我曾尝试使用带有高度参数的推点函数来设置折线。然而它仍然在地面上。我插入的最后一条折线会覆盖前一条折线。高度值适用于标记,但我想将其应用
我正在尝试向 svg 多段线添加类似叠加的效果。基本目标是使单击该线变得容易,并且由于该线太细,我想添加一个背景叠加层,当鼠标悬停在上面时会亮起。 我使用多边形尝试了以下方法,但这看起来很乏味。 (线
如何在 Google map 中绘制圆弧折线? 我已经用过this创建曲线折线的代码。 下面是绘制曲线折线的方法: private void showCurvedPolyline (LatLng p1
背景: 开发使用 Android Google Map v2 的原生 Android 应用,使用 android.support.v4.app.FragmentActivity。在 Android v
如何使用 JavaScript 将坐标添加到现有的 SVG 折线? 我正在使用 IE 9(在 .hta 文件中)并且需要能够动态地将新点附加到折线。目标是能够创建折线图。我提前道歉,我完
如何在 JavaScript 中拆分数据数组 {x:30, y:45, x:36, y:49} 进入表格 [30, 45, 36, 49] ? 我需要此表单才能将坐标传递给 SVG 折线。我找到了一个
在角度 6 中。我正在为 agm-polyline 使用流动代码。 我想在 agm-polyline 中添加箭头符号(折线)( https://developers.google.com/maps/d
我在 map 上做了路线。使用一些坐标生成的路线,这些坐标完成了附加信息(速度)。我希望当路线悬停时,将出现一个工具提示并显示这些坐标处的信息(速度)。我很困惑如何显示速度的工具提示。 Po
我是一名优秀的程序员,十分优秀!