地图的组成
- 地图是由控件、标注、矢量图形、图层等组成的,可以理解为ps对一个图片的操作
- 一个地图可以有多个图层,图层上放置的是数据源,一个图层对应一个数据源,数据源放置要素,一个数据源可以有多个要素,要素包括了地理信息和样式信息
快速起步
- 引入ol和样式
-
<link rel="stylesheet" href="https://lib.baomitu.com/ol3/4.6.5/ol.css"> <script src="https://lib.baomitu.com/ol3/4.6.5/ol.js"></script>
-
- 初始化地图
-
const gaode = new Layer.Tile({ title: '高德地图', source: new ol.source.XYZ({ url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}', wrapX: false }) }) const map = new ol.Map({ target: "map", layers: [ gaode ], view: new ol.View({ center: [114.30, 30.50], zoom: 18, projection: 'EPSG:4326' }) })
- target:指定挂在的元素
- layers:地图需要加载的图层,可以设置多个图层
- view 设置视图(显示的范围),center设置视图的中心点,zoom代表放大级别
- EPSG:4326地理坐标系(经纬度来表示)EPSG:3857墨卡托坐标系(以米为单位)
- 需要注意的是,必须在挂在元素渲染以后,才可以对地图进行实例化, 否则渲染不出来
-
地图控件
地图控件是应用程序或网站中用于显示和交互地理信息的组件,使用户能够查看、操作地图,并展示特定的地理信息。
视图跳转控件
extent 跳转可显示的范围
const zoomToExtent = new ol.control.ZoomToExtent({
extent: [110, 30, 160, 30]
});
放大缩小控件
const zoomSlider = new ol.control.ZoomSlider();
全屏控件
const fullScreen = new ol.control.FullScreen();
添加控件
map.addControl('控件');
绘制要素
要素包含几何信息和样式信息
创建几何信息
const point = new ol.Feature({
geometry: new ol.geom.Point([114.30, 30.50])
})
创建样式信息
-
const style = new ol.style.Style({ image: new ol.style.Circle({ radius: 10, fill: new ol.style.Fill({ color: '#ff2d15' }), stroke: new ol.style.Stroke({ width: 2, color: '#000' }) }) })
-
radius:圆点的半径,单位是deg
-
fill:圆点的颜色
-
stroke:圆点的边框
-
要素的类型
- Point:点
- LineString:线
- Polygon:面
- MultiPoint:点集合
-
const multiPoint = new ol.Feature({ geometry: new ol.geom.MultiPoint([[114.3, 30.5], [114.4, 30.6]]) });
-
-
MultiLineString
-
const multiLineString = new ol.Feature({ geometry: new ol.geom.MultiLineString([ [[114.3, 30.5], [115.3, 31.5]], [[114.5, 30.2], [115.1, 30.8]] ]) });
-
- MultiPolygon:面集合
-
// 创建第一个多边形 const polygon1 = new ol.geom.Polygon([ [[114.2, 30.4], [114.3, 30.4], [114.3, 30.5], [114.2, 30.5], [114.2, 30.4]] ]); // 创建第二个多边形 const polygon2 = new ol.geom.Polygon([ [[114.4, 30.6], [114.5, 30.6], [114.5, 30.7], [114.4, 30.7], [114.4, 30.6]] ]); // 使用上面创建的两个多边形来创建一个多边形集合 const multiPolygon = new ol.geom.MultiPolygon([polygon1.getCoordinates(), polygon2.getCoordinates()]);
-
加载geojson数据
构造指定的geojson数据,通过改变features中的type来指定绘制的要素
const data = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [[[114.30, 30.50], [116, 30.50], [116, 30]]]
}
}
]
}