我用的是4326坐标系,有些地方和3857坐标系不一样
思维导图是大佬整理的,我拿来用了
初始化地图
引入依赖
import Map from "ol/Map.js";
import View from "ol/View.js";
import { XYZ } from "ol/source.js";
import { OSM, Vector as VectorSource } from "ol/source.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
初始化地图
我是以高德地图为地图图层的,url这里是高德的瓦片地址
initAMap() {
// 初始化地图
const raster = new TileLayer({
source: new XYZ({
url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
crossOrigin: "anonymous",
}),
});
// 防止横向拉伸
this.source = new VectorSource({ wrapX: false });
// 矢量图层,显示绘制的图像
const vector = new VectorLayer({
source: this.source,
});
this.vector = vector;
this.map = new Map({
layers: [raster, vector],
// target为地图容器的id
target: "mapDiv",
view: new View({
center: [120.8, 28.9],
zoom: 16,
maxZoom: 18,
minZoom: 5,
projection: "EPSG:4326",
}),
});
// 单位,4326坐标系1单位代表多少米
this.unit = this.map.getView().getProjection().getMetersPerUnit()
},
绘制圆
// 单位为度,4326坐标系1单位代表多少米
this.unit = this.map.getView().getProjection().getMetersPerUnit()
this.circle = new Feature({
// 4326坐标系,圆的半径单位是度,米需要转换成度
// 半径转换,半径/单位 this.radius / this.unit
// geometry: new Circle(center, this.radius / this.unit)
geometry: new Circle([120.8, 28.9], 0.1),
});
// 这里的source是之前创建的数据源
// 注意是addFeatures,数据类型是数组
this.source.addFeatures([this.circle]); // 添加到地图上显示
绘制多边形
this.polygon = new Feature({
// 这里的坐标组注意是个三维数组,而且首尾坐标需要闭合
geometry: new Polygon([[[120.8, 28.9],[120.9, 28.9],[120.84634, 29.9],[120.8, 28.9]]]),
style: new Style({ //样式根据需要自己改
fill: new Fill({
color: "rgba(132, 157, 230, 0.5)",
}),
}),
});
这里得注意一下,和圆不一样,方法是addFeature,没有s,也不用加中括号,这里浪费了我好长时间
this.source.addFeature(this.polygon); // 添加到地图上显示
绘制点
点就简单多了,和多边形差不多
const point= new Feature({
geometry:new Point([120, 28]),
});
this.source.addFeature(point); // 添加到地图上显示