数据类型

Nodes

Way

下面介绍一下way的类型

open way

描述不共享第一个节点和最后一个节点的方法。

closed way

描述最后一个节点和第一个节点共享。该注意的是，（默认带有area = yes标签）他表示一个区域。

不过下面两个方法解释为封闭折线：

highway = *: 表示环岛路或圆形步行路
barrier = *：表示完全围绕某个物件的障碍，如篱笆、围栏

area（面积）

表示被closed way围起来的封闭填充区域

Combined closed-polyline and area

将上述类型结合起来描述。

一、创建简单Area的两种方式：

对于比较小的区域，使用closed way创建一个封闭路径，然后加合适标签area = yes
对于比较大的区域，使用multipolygon

二、创建有孔Area的方式：

relation: multipolygon

说实话，我把这知识点提炼出来还是一知半解，来看看栗子吧～

假设：我们要表示一条单向住宅街，那么分析一个可以提炼出这样的重点：highway = residential(住宅) + name = YY street(这条街的名字) +oneway = yes

<way id = 1 >
    <tag k = 'highway' v = 'residential' />
    <tag k = 'name' v = 'YY street' />
    <tag k = 'oneway' v = 'yes' />
</way>

Relations

看graph.js源码

在代码上做注释，还没整理出来

结合React

React元素：简单理解为我们在页面上要看到的内容,且它是不可变的对象，不能更改他的子元素或者属性。

	const element = <h1>hello, world</h1>;

React元素也可以是自定义的组件

	function Welcome(props) {
		return <h1>hello, {props.name}</h1>
	} ／／ 函数组件
	const element = <Welcome name = 'world' />;

现在有一个根DOM节点：

如何将一个React元素渲染成DOM？只需要将这个元素和DOM一起传入ReactDOM.render()中，就可以将这个元素渲染到DOM节点中了。

ReactDOM.render(element, document.getElementById('root'));

那怎么更新已经渲染的元素呢？我们已经知道React元素是不可变对象，所以更新UI的唯一办法就是创建一个新的React元素，并将其传入ReactDOM.render()中。看看这个计时器的例子，它每过一秒就会调用一次ReactDOM.render(),页面显示的内容每秒都在变化

function tick(props) {
	const element = (
		<div>
			<h1>hello,world</h1>
			<h1>It is {new Date().toLocaleTimeString()}</h1>>
		</div>
	);
	ReactDOM.render(element, document.getElementById('root'))
}
setInterval(tick, 1000);

而且React只会更新需要更新的部分，它将现在的元素和之前的元素进行比较，更新不一样的地方，来达到DOM预期的状态

创建React组件的两种方式：

1、函数组件

	function Welcome(props) {
		return <h1>hello, {props.name}</h1>
	}

2、class定义组件

	class Welcome extends React.Component {
		render() {
			return <h1>hello ,{props.name}</h1>
		}

	}

注意： React规定组件必须以大写字母开头，这是为了区分原生DOM标签。（原生DOM用小写） React要求必须保护入参（props）不被修改

那么如何将函数组件转化为class组件呢？

class Clock entends React.Component {
	render() {
		return (
			<div>
				<h1>hello,world</h1>
				<h2>It is {this.props.date.toLocaleTimeString()}</h2>
			</div>
		)
	}	
}

重点来啦，如何封装一个复用率很高的组件呢？就看看上面计时器的例子，现在想要封装一个Clock组件，它将每秒更新一次

class Clock extends React.Component {
	constructor(props) {
		super(props);
		this.state = {date: new Date()};
	}
	render() {
		return (
			<div>
				<h1>hello,world</h1>
				<h2>It is {this.state.date.toLocaleTimeString()}</h2>
			</div>
		)
	}	
}
ReactDOM.render(
	<Clock />
	
)

碎片