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)中提到的一些值得继续延伸的关注点继续进行探索和学习,所涉及的内容以解决实际问题为主要导向. 一.新的需求? 在完成了矢量切片的工作后,新的需求出现 ...
随机推荐
- redis中的小秘密和持久化小细节
https://www.jianshu.com/p/36c301ac87df 持久化的情况 https://www.cnblogs.com/wdliu/p/9377278.html 集群搭建 主从 ...
- 【十天自制软渲染器】DAY 03：画一个三角形（向量叉乘算法 & 重心坐标算法）
如果你喜欢我写的文章,可以把我的公众号设为星标 ,这样每次有更新就可以及时推送给你啦. 前面两天画了点和线,今天我们来画一个最简单也是最强大的面--三角形. 本文主要讲解三角形绘制算法的推导和思路(只 ...
- PL/SQL 学习分享
PL SQL概述 什么是PLSQL PLSQL的特点 PLSQL的开发环境 PLSQL的工作原理 语句块重点部分 PLSQL声明命名规则 声明 命名规则 表达式和运算符 表达式的分类 运算符分类 流程 ...
- 详解Java8特性之新的日期时间 API
详解Java8特性之新的日期时间 API http://blog.csdn.net/timheath/article/details/71326329 Java8中时间日期库的20个常用使用示例 ht ...
- 深信服EDR3.2.21任意代码执行
漏洞原理: dev_linkage_launch.php 为设备联动的新入口点主要是将联动的接口构造成业务统一处理的接口 主要调用 跟进 可以看到 第一个检查为 $req_url = $_SERVE ...
- centos安装、升级新火狐最新版 31
1.登录火狐主页 下载最新版本firefox-31.0.tar.bz2 解压: tar -jxvf firefox-31.0.tar.bz2 2.然后把旧版本的firefox卸掉 # yum eras ...
- cassandra权威指南读书笔记--配置cassadnra
配置集群时,要求所有节点的集群名,分区器,snitch必须相同.种子节点最好相同. 种子节点:最好每个DC,配置2个,这样即使一个DC中一个种子节点挂了,仍然有一个中子节点可用.种子节点被认为是最先加 ...
- Java一些概念
1.Java先编译后解释 同一个.class文件在不同的虚拟机会得到不同的机器指令(Windows和Linux的机器指令不同),但是最终执行的结果却是相同的. 2.JDK包含JRE,JRE包含JVM, ...
- CodeForces 893C （并查集板子题）
刷题刷到自闭,写个博客放松一下 题意:n个人,m对朋友,每寻找一个人传播消息需要花费相应的价钱,朋友之间传播消息不需要花钱,问最小的花费 把是朋友的归到一起,求朋友中花钱最少的,将所有最少的加起来. ...
- 【uva 12174】Shuffle（算法效率--滑动窗口）
题意:假设一种音乐播放器有一个乱序的功能,设定每播放S首歌为一个周期,随机播放编号为1~S的歌曲.现在给一个长度为N的部分播放记录,请统计下次随机排序所发生的时间的可能性种数.(1≤S,N≤10000 ...