还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。
No. | 内容链接 |
---|---|
1 | Openlayers 【入门教程】 - 【源代码+示例300+】 |
2 | Leaflet 【入门教程】 - 【源代码+图文示例 150+】 |
3 | Cesium 【入门教程】 - 【源代码+图文示例200+】 |
4 | MapboxGL【入门教程】 - 【源代码+图文示例150+】 |
5 | 前端就业宝典 【面试题+详细答案 1000+】 |
文章目录
- 常用参数
- 常用监听事件
- OpenLayers中的图层类型
- 按照渲染分类
- 加载常用的地图底图
- 1 加载谷歌地图
- 2 加载OSM地图
- 3 加载Bing地图
- 4 加载Mapbox地图
- 5 加载baidu地图
- 6 加载Arcgis地图
- 7 加载高德地图
- 8 加载天地图
图层就像是含有文字或图形等元素的图片,一张张按顺序叠放在一起,组合起来形成页面的最终效果。
在 openlayers 中,图层是使用 layer 对象表示的,主要有 WebGLPoints Layer、热度图(HeatMap Layer)、图片图层(Image Layer)、切片图层(Tile Layer)和 矢量图层(Vector Layer)五种类型
,它们都是继承 Layer 类的。
常用参数
source
,指定了图层的数据来源,图层作用是以一定的样式渲染数据,source则指定了数据;
visible
,是否可见;
zIndex
,图层的叠加次序,默认是0,最底层,如果使用setMap方法添加的图层,zIndex值是Infinity,在最上层;
extent
,图层渲染的区域,即浏览器窗口中可见的地图区域。extent 是一个矩形范围,格式是[number, number, number, number] 分别代表 [left, bottom, right, top] 。为了提升渲染效率和加载速度,extent范围之外的瓦片是不会请求的,当然也不会渲染;
className
,图层各个元素的样式;
opacity
,透明度,默认为 1 ,即完全透明;
minResolution
,图层可见的最小分辨率;
maxResolution
,图层可见的最大分辨率;
minZoom
,图层可见的最小zoom level;
maxZoom
,图层可见的最大zoom level
常用监听事件
• prerender 图层开始渲染之前。
• postrender 渲染完成之时。
• error 发生任何错误。
• change 图层发生修改。
OpenLayers中的图层类型
• Graticule,地图上覆盖的网格标尺图层。
• HeatMap,热力图。
• Vector,矢量图。
• VectorImage,单张的矢量图层。
• VectorTile,矢量瓦片图层。
• WebGLPoints,WebGL渲染的海量点图层。
• Tile,栅格图层。
按照渲染分类
图层按照渲染的位置分为两类,一类是在服务器端渲染好,以图片形式返回浏览器的, imagelayer 和 tilelayer 都是属于这种类型;另一类是在浏览器渲染的图层类型,vectorlayer 和 heatmaplayer 就是这种类型。
加载常用的地图底图
1 加载谷歌地图
示例:加载谷歌地图
2 加载OSM地图
示例:加载OSM地图
3 加载Bing地图
示例:加载Bing地图
4 加载Mapbox地图
示例:加载Mapbox地图
5 加载baidu地图
示例:加载baidu地图
6 加载Arcgis地图
示例: 加载Arcgis地图
7 加载高德地图
示例: 加载高德地图
8 加载天地图
示例:加载天地图