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)中提到的一些值得继续延伸的关注点继续进行探索和学习,所涉及的内容以解决实际问题为主要导向. 一.新的需求? 在完成了矢量切片的工作后,新的需求出现 ...
随机推荐
- Java调用RestFul接口
使用Java调用RestFul接口,以POST请求为例,以下提供几种方法: 一.通过HttpURLConnection调用 1 public String postRequest(String url ...
- 通达OA<=11.5版本SQL注入——日程安排
注入点产生位置
- 封装各种生成唯一性ID算法的工具类
/** * Copyright (c) 2005-2012 springside.org.cn * * Licensed under the Apache License, Version 2.0 ( ...
- 利用Java反射机制将Bean转成Map
import java.lang.reflect.Field; import java.lang.reflect.InvocationTargetException; import java.lang ...
- 1.Centos7修改主机名
1.在CentOS7中,有三种定义的主机名: 静态的(Static hostname):也称为内核主机名,是系统在启动时从/etc/hostname自动初始化的主机名. 瞬态的(Tansient ho ...
- Asp.net core通过自定义特性实现双端数据验证的一些想法
asp.net core集成了非常方便的数据绑定和数据校验机制,配合操作各种easy的vs,效率直接高到飞起. 通过自定义验证特性(Custom Validation Attribute)可以实现对于 ...
- Redis-第七章节-持久化
目录 概述 RDB AOF 如何选择持久化机制 1.概述 Redis 是内存数据库,如果不能将内存中的数据保存到磁盘中,那么一旦服务器进程退出,服务器的数据库数据也会消失,所以Redis提供了持久化的 ...
- 翻译：《实用的Python编程》01_Introduction_00_Overview
目录 | 下一节 (2 处理数据) 1. Python 简介 本章是第一章,将会从头开始介绍 Python 基础知识,让你从零开始,学会怎么编写.运行.调试一个简单的程序.最后,你可以运用这些 Pyt ...
- HDU5407 CRB and Candies 【LCM递推】
HDU5407 CRB and Candies 题意: 计算\(LCM(C(n,0),C(n,1),C(n,2),\cdots,C(n,n-1),C(n,n))\) \(n\le 10^6\) 题解: ...
- Codeforces Round #652 (Div. 2) D. TediousLee（dp）
题目链接:https://codeforces.com/contest/1369/problem/D 题意 最初有一个结点,衍生规则如下: 如果结点 $u$ 没有子结点,添加 $1$ 个子结点 如果结 ...