GeoJSON feature & Mapbox segments
GeoJSON feature & Mapbox segments
custom JSON format ???
{
"rows": [],
"props": {
"labelPoint": {
"x": 93.5,
"y": 68.0291
},
"type": "",
"fill": "#ffffff"
},
"_type": "",
"graphType": "Polygon",
"graph": {
"points": [
{
"x": 93.5,
"y": 2
},
{
"x": 182.4238,
"y": 52.4418
},
{
"x": 148.4579,
"y": 134.0582
},
{
"x": 38.5421,
"y": 134.0582
},
{
"x": 4.5762,
"y": 52.4418
}
],
"segments": [
{
"p1": {
"x": 93.5,
"y": 2
},
"p2": {
"x": 182.4238,
"y": 52.4418
},
"line": {
"k": 0.5672474635586874,
"b": -51.03763784273727,
"x": null
}
},
{
"p1": {
"x": 182.4238,
"y": 52.4418
},
"p2": {
"x": 148.4579,
"y": 134.0582
},
"line": {
"k": -2.4028923125840915,
"b": 490.7865466523778,
"x": null
}
},
{
"p1": {
"x": 148.4579,
"y": 134.0582
},
"p2": {
"x": 38.5421,
"y": 134.0582
},
"line": {
"k": 0,
"b": 134.0582,
"x": null
}
},
{
"p1": {
"x": 38.5421,
"y": 134.0582
},
"p2": {
"x": 4.5762,
"y": 52.4418
},
"line": {
"k": 2.402892312584092,
"b": 41.44568419915268,
"x": null
}
},
{
"p1": {
"x": 4.5762,
"y": 52.4418
},
"p2": {
"x": 93.5,
"y": 2
},
"line": {
"k": -0.5672474635586874,
"b": 55.03763784273727,
"x": null
}
}
],
"segmentNum": 0,
"middleLine": null,
"fill": "#ffffff"
},
"fill": "#ffffff"
}
geojson-segment
split a geojson file generated by togeojson into two-vertex chunks with properties
$ npm i -S @mapbox/geojson-segment
https://github.com/mapbox/geojson-segment
mapbox demo
https://docs.mapbox.com/mapbox-gl-js/example/data-driven-lines/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Style lines with a data-driven property</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoieGdxZnJtcyIsImEiOiJjaXNtbmVrNWMwMW9lMnFteHJlN2M4NWU1In0.USVUsZvLCNUF1dNVuZsO5g';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-122.48383155304096, 37.82882682974591],
zoom: 16
});
map.on('load', function() {
map.addSource('lines', {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': [
{
'type': 'Feature',
'properties': {
'color': '#F7455D' // red
},
'geometry': {
'type': 'LineString',
'coordinates': [
[-122.4833858013153, 37.829607404976734],
[-122.4830961227417, 37.82932776098012],
[-122.4830746650696, 37.82932776098012],
[-122.48218417167662, 37.82889558180985],
[-122.48218417167662, 37.82890193740421],
[-122.48221099376678, 37.82868372835086],
[-122.4822163581848, 37.82868372835086],
[-122.48205006122589, 37.82801003030873]
]
}
},
{
'type': 'Feature',
'properties': {
'color': '#33C9EB' // blue
},
'geometry': {
'type': 'LineString',
'coordinates': [
[-122.48393028974533, 37.829471820141016],
[-122.48395174741744, 37.82940826466351],
[-122.48395174741744, 37.829412501697064],
[-122.48423874378203, 37.829357420242125],
[-122.48422533273697, 37.829361657278575],
[-122.48459815979002, 37.8293425906126],
[-122.48458743095398, 37.8293447091313],
[-122.4847564101219, 37.82932776098012],
[-122.48474299907684, 37.829331998018276],
[-122.4849334359169, 37.829298101706186],
[-122.48492807149889, 37.82930022022615],
[-122.48509705066681, 37.82920488676767],
[-122.48509168624878, 37.82920912381288],
[-122.48520433902739, 37.82905870855876],
[-122.48519897460936, 37.82905870855876],
[-122.4854403734207, 37.828594749716714],
[-122.48543500900269, 37.82860534241688],
[-122.48571664094925, 37.82808206121068],
[-122.48570591211319, 37.82809689109353],
[-122.4858346581459, 37.82797189627337],
[-122.48582661151886, 37.82797825194729],
[-122.4859634041786, 37.82788503534145],
[-122.48595803976059, 37.82788927246246],
[-122.48605459928514, 37.82786596829394]
]
}
}
]
}
});
map.addLayer({
'id': 'lines',
'type': 'line',
'source': 'lines',
'paint': {
'line-width': 3,
// Use a get expression (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-get)
// to set the line-color to a feature property value.
'line-color': ['get', 'color']
}
});
});
</script>
</body>
</html>
toFixed
x = "-100";
"-100"
"-100"
+x;
-100
x = -100;
-100
+x.toFixed(4);
-100
x = -100.000000001;
-100.000000001
+x.toFixed(4);
-100
x = 100.00111;
100.00111
+x.toFixed(4);
100.0011
x = -100.00111;
-100.00111
+x.toFixed(4);
-100.0011
GeoJSON feature & Mapbox segments的更多相关文章
- php请求返回GeoJSON格式的数据
<?php /* * Following code will list all the products */ // array for JSON response $response = ar ...
- Geotools操作GeoJSON：解析FeatureCollection对象文件
Geotools操作GeoJSON:解析FeatureCollection对象文件 一.解析FeatureCollection对象文件 1.1 geotools操作GeoJSON过程中的问题及相关源码 ...
- GeoJson的生成与解析，JSON解析，Java读写geojson，geotools读取shp文件，Geotools中Geometry对象与GeoJson的相互转换
GeoJson的生成与解析 一.wkt格式的geometry转成json格式 二.json格式转wkt格式 三.json格式的数据进行解析 四.Java读写geojson 五.geotools读取sh ...
- Vector Tile
Mapbox Vector Tile Specification A specification for encoding tiled vector data. <?XML:NAMESPACE ...
- leaflet地图库
an open-source JavaScript libraryfor mobile-friendly interactive maps Overview Tutorials Docs Downlo ...
- Leaflet_创建地图（官网示例,可以直接运行）(2017-10-20)
官网:http://leafletjs.com/examples.html 快速启动指南 http://leafletjs.com/examples/quick-start/example.html ...
- Go 语言相关的优秀框架，库及软件列表
If you see a package or project here that is no longer maintained or is not a good fit, please submi ...
- Awesome Go精选的Go框架，库和软件的精选清单.A curated list of awesome Go frameworks, libraries and software
Awesome Go financial support to Awesome Go A curated list of awesome Go frameworks, libraries a ...
- 矢量切片（Vector tile）番外一：Proj4js
说明:番外篇是对正篇矢量切片(Vector tile)中提到的一些值得继续延伸的关注点继续进行探索和学习,所涉及的内容以解决实际问题为主要导向. 一.新的需求? 在完成了矢量切片的工作后,新的需求出现 ...
随机推荐
- Win10家庭版Hyper-V出坑（完美卸载，冲突解决以及Device Guard问题）
本文链接:https://blog.csdn.net/hotcoffie/article/details/85043894 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附 ...
- sentry 错误监控 报警
错误监控 报警 Sentry | Error Tracking Software - JavaScript, Python, PHP, Ruby, more https://sentry.io/wel ...
- Java 从数组来看值传递和引用传递
从数组来看值传递和引用传递 惯例先看一段代码 public class DemoCollection14 { public static void main(String[] args) { Stri ...
- 洛谷 P6362 平面欧几里得最小生成树
题目描述 平面上有 \(n\) 个点,第 \(i\) 个点坐标为 \((x_i, y_i)\).连接 \(i, j\) 两点的边权为 \(\sqrt{(x_i - x_j) ^ 2 + (y_i - ...
- Windows操作Redis及Redis命令
Windows操作Redis及Redis命令 一.Windows下操作Redis 设置密码 打开redis服务 Windows 下的redis命令行 二.redis常用命令大全 key String ...
- linux反弹shell总结
1.1发送文件(公网发内网) 文件发送端: nc -lp 6666 < 文件 文件接收端: nc 发送端ip 发送端端口 > 新文件 1.2发送文件(内网发公网)文件发送端: nc -lp ...
- Linux-yum安装和相关命令
Linux-yum安装和相关命令 一 yum yum命令是在Fedora和RedHat以及SUSE中基于rpm的软件包管理器,它可以使系统管理人员交互和自动化地更细与管理RPM软件包,能够从指定的服务 ...
- Spark+Kafka实时监控Oracle数据预警
目标: 监控Oracle某张记录表,有新增数据则获取表数据,并推送到微信企业. 流程: Kafka实时监控Oracle指定表,获取该表操作信息(日志),使用Spark Structured Strea ...
- CSAPP_BombLab实验报告
Lab_2实验报告 目录 Lab_2实验报告 屏幕截图 考察内容 各题答案 bomb1 bomb2 bomb3 bomb4 bomb5 bomb6 secret_phase 解题思路 bomb1 bo ...
- BZOJ4668: 冷战 (并查集 + LCA)
题意:动态给点连边 询问两个点之间最早是在第几个操作连起来的 题解:因为并查集按秩合并 秩最高是logn的 所以我们可以考虑把秩看作深度 跑LCA #include <bits/stdc++.h ...