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)中提到的一些值得继续延伸的关注点继续进行探索和学习,所涉及的内容以解决实际问题为主要导向. 一.新的需求? 在完成了矢量切片的工作后,新的需求出现 ...
随机推荐
- 目前 c++ primer学习总结笔记
C++的开始 1 main的返回值:0为成功状态,非0为系统定义的错误类型 2 输入输出:计算结果为左侧运算对象,IO操作读写缓冲与程序中的动作无关 3 输入流istream对象:cin(标准输入): ...
- python中贪婪与非贪婪
Python里数量词默认是贪婪的(在少数语言里也可能是默认非贪婪),总是尝试匹配尽可能多的字符: 非贪婪则相反,总是尝试匹配尽可能少的字符. 在"*","?", ...
- 【题解】CF952F 2 + 2 != 4
题目传送门 首先这道题没有翻译,这是很奇怪的,经过了(bai)查(du)字(fan)典(yi)之后,你会发现,什么用都没有-- 楼下的 dalao 们给的解释非常的模糊(果然还是我太弱了),于是我自己 ...
- 11.15 gryz校测（题解分析报告）
T1 心有灵犀 (cooperate) 题目大意 给你一个不超过 \(10^9\) 的数字 \(n\) 和一个交换次数上限 \(k\), 每次操作对这个 数字 \(n\) 的其中两位进行交换, 比如 ...
- JTS Geometry
JTS Geometry关系判断和分析 JTS Geometry关系判断和分析 1.关系判断 1.1实例 2.关系分析 2.1实例 JTS(Geometry) JTS Geometry关系判断和分析 ...
- mysql在8.0版本下修改密码的命令
ubuntu20.04上边部署了一个新的mysql服务,默认没密码,想要修改密码. 使用如下手段 第一种:ALTER USER 'root'@'localhost' IDENTIFIED BY '密码 ...
- Pytest（16）随机执行测试用例pytest-random-order
前言 通常我们认为每个测试用例都是相互独立的,因此需要保证测试结果不依赖于测试顺序,以不同的顺序运行测试用例,可以得到相同的结果. pytest默认运行用例的顺序是按模块和用例命名的 ASCII 编码 ...
- MySQL常用SQL语句1
-- 创建表 CREATE TABLE USER ( -- id默认每个表都该拥有(非空 不重复) -- (id是每一行的唯一标识) -- 其他字段可能会重复,我们无法依赖其他的字段去确定某一行记录 ...
- POJ2932 Coneology【圆扫描线】
POJ2932 Coneology 题意: 给出一些不相交的圆,问有多少个圆不被其他圆包围 题解: 扫描线,把所有圆的左边界和右边界放到\(vector\)里排序,遍历到圆左边界的时候判断是否满足条件 ...
- centos7源码编译安装lamp/lnmp
centos7源码编译安装lamp/lnmp 进程:是包工头(相当于是个门,只管开门关门,不管门内的事儿) 线程:是各种工种(cpu调度的是线程) 进程 是一件事情, 线程 是 同一个时间范围内 同时 ...