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)中提到的一些值得继续延伸的关注点继续进行探索和学习,所涉及的内容以解决实际问题为主要导向. 一.新的需求? 在完成了矢量切片的工作后,新的需求出现 ...
随机推荐
- worker 启动时向 etcd 注册自己的信息，并设置一个带 TTL 的租约，每隔一段时间更新这个 TTL，如果该 worker 挂掉了，这个 TTL 就会 expire 并删除相应的 key。
1.通过etcd中的选主机制,我们实现了服务的高可用.同时利用systemd对etcd本身进行了保活,只要etcd服务所在的机器没有宕机,进程就具备了容灾性. https://mp.weixin.qq ...
- Web信息收集-目标扫描-Nmap
Web信息收集-目标扫描-Nmap 一.Nmap简介 二.扫描示例 使用主机名扫描: 使用IP地址扫描: 扫描多台主机: 扫描整个子网 使用IP地址的最后一个字节扫描多台服务器 从一个文件中扫描主机列 ...
- Django（自定义过滤器和自定义标签）
模版是一个用django模版语言标记过的python字符串.模版可以包含模版标签和变量. 模版标签是在一个模版里起作用的标记.比如,一个模版标签可以产生控制结构的内容(if或者for),可以获取数据库 ...
- STM32通过rosserial接入ROS通讯开发
作者:良知犹存 转载授权以及围观:欢迎添加微信公众号:羽林君 前言 主题:串口是一种设备间常用的通讯接口,rosserial将串口字符数据转发到标准ROS网络,并输出到rosout和其日志文件.本文将 ...
- Java程序操作Hive
1.hive的lib+jdbc,还要把mysql的连接驱动加载过来 2.编写程序 开启远程服务:[root@zhiyou ~]# hiveserver2 &[1] 4127[root@zhiy ...
- Codeforces Round #316 (Div. 2) D. Tree Requests(dsu)
题目链接 题意:对于m次询问 求解以vi为根节点 深度为hi的的字母能不能组合成回文串. 思路:暴力dsu找一边 简直就是神技! #include<bits/stdc++.h> #defi ...
- SPOJ - PHRASES Relevant Phrases of Annihilation
传送门:SPOJ - PHRASES(后缀数组+二分) 题意:给你n个字符串,找出一个最长的子串,他必须在每次字符串中都出现至少两次. 题解:被自己蠢哭...记录一下自己憨憨的操作,还一度质疑评测鸡( ...
- P2765 魔术球问题 (网络流)
题意:n根柱子 把编号1,2,3....的球依次插到柱子上去 需要满足相邻的两个球编号加起来为完全平方数 n < 55 题解:网络流24(23)题里的 但是一直不知道怎么建图 或者说建图的意义 ...
- Codeforces Round #660 (Div. 2) Uncle Bogdan and Country Happiness dfs
题目链接:Uncle Bogdan and Country Happiness 题意: t组输入,每组数据输入如下 首先一个n代表有n个城市,所有城市总人数为m,后面输入pi表示第i个城市的居住人数, ...
- hdu5438 Ponds
Time Limit: 1500/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) Total Submissi ...