在人口密度可视化的demo
中,我们使用geoJson格式存储这种数据,决定放在后台控制,由请求而来,但碍于接口的开发尚未完成,所以都是演示数据。河南省的数据有意去除,为后来的数据加载填充做铺垫。
中国人口密度可视化项目 预览地址: http://guess.platonic.xyz
webGIS开发,是基于Pc浏览器的网页应用程序,兼容移动端网页的跨平台Web应用程序
在参选框架时,Leaflet 是一个为建设交互性好适用于移动设备地图,而开发的现代的、开源的 JavaScript 库。是快速上手并进行开发的很好的工具框架。其api的大类分为以下几个方面:
快速开始:在页面引入必要的cssjs文件,使用setView方法
默认情况下(创建地图实例时我们没有传递任何选项),所有的鼠标及触控交互操作都是可用的,并且包含缩放和属性控制.
注意到调用setView方法也会返回地图对象--大多数leaflet方法运行时也一样(不返回一个明确的值时),这使得类似jQuery的方法链十分方便.
接下来我们添加一个基本图块到我们的地图上,这样的话它就是一个Mapbox Street的基本图层,创建一个基本图层通常三个方面
包含为图层图像设置[URL模板]
//在mapbox地图接口 mapbox_url:'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
注册mapbox官网,拿到token后,就能够免费试用。不过免费版有五万次的限制。
- 属性文本
- 图层的最大缩放等级。
<link rel="stylesheet" href="./lib/leaflet/leaflet.css">
<script src="./lib/leaflet/leaflet.js"></script>
const mymap = L.map("mapDiv", {
crs: L.CRS.EPSG3857,
zoomControl: true,
minZoom: 1,
attributionControl: false,
zoomAnimation: true //缩放是否带动画
}).setView([34.76, 113.65], 5);
let Baselayer = L.tileLayer(urlTemplate.mapbox_url, {
maxZoom: 18,
id: 'mapbox.streets',
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors,'
}).addTo(mymap);
在地图的开发中,熟悉文档的过程就是加深对基本要素的理解。
点(Point)
结构: x, y 和 x, y, z
特殊:多点(Multi Point)
线(Line、Polyline)
结构:一串连续的x, y数组(或 x, y, z)
特殊:按顺序连接点,具有方向
面(Polygon)
结构:一串闭合的x, y数组(或x, y, z )
特殊:闭合(首尾相接),有方向,可能多串(环、洞)
点符号:Point Marker
特征:样式(Style)、大小(Size)、颜色(Color)
样式:抽象符号(圆点、三角形、方块等),图标,闪烁点
线符号(Line Symbol)
特征:样式(Style)、宽度(Width)、颜色(Color)
样式:平滑线、点、破折线等;动画线
面符号(Fill Symbol)
特征:样式(Style)、边线(Outline)、颜色(Color)
样式:纯色填充、渐变色填充、图片填充
当然,在本例中为了渲染图层数据,使用了中国各个省份的地图数据,以geoJson格式存储。以北京市为例,为了在地图上渲染功能,除了存储其必要的经纬信息用来描绘地理信息外,还要增加所要显示的字段。
{
"type": "Feature",
"properties": {
"density":1322.74,
"adcode": 110000,
"name": "北京市",
"center": [116.405285, 39.904989],
"centroid": [116.41989, 40.189913],
"childrenNum": 16,
"level": "province",
"subFeatureIndex": 0,
"acroutes": [100000],
"parent": {
"adcode": 100000
}
},
"geometry": {
"type": "MultiPolygon",
"coordinates": [
[
[[117.210024, 40.082262],
[117.105315, 40.074479],
[117.105315, 40.074479],
[117.102851, 40.073563],
[117.102235, 40.073105],
[117.102235, 40.073105],
[117.102851, 40.073563],
[116.999989, 40.030053],
[116.927924, 40.054788],
[116.783794, 40.035093],
[116.757925, 39.968176],
[116.786874, 39.886963],
[116.926076, 39.835524]
]
]
]
}
}
coordinates字段的经纬必需事无巨细。画图的精准度由此决定。
以下为leaflet的api开发概览。在后续的学习中可以持续查阅。
Leaflet开发纪实录 - 山岚计划
hmomspmqcr http://www.g3t902v3gb5w5o40x1t47mijcau6243ws.org/
[url=http://www.g3t902v3gb5w5o40x1t47mijcau6243ws.org/]uhmomspmqcr[/url]
ahmomspmqcr