openLayers绘制点、线、面
按坐标生成
点
import 'ol/ol.css';
import Map from 'ol/Map'; // 地图
import OSM from 'ol/source/OSM'; // 原生地图api
import XYZ from 'ol/source/XYZ'; // 其他地图api自定义url
import TileLayer from 'ol/layer/Tile'; // 平铺图片的图层源
import * as control from 'ol/control'; // 地图控件
import * as interaction from 'ol/interaction'; // 交互
import View from 'ol/View'; // 视图
import {Vector as VectorLayer} from "ol/layer";
import {Vector as SourceLayer} from "ol/source";
import Feature from 'ol/Feature';
import {Circle} from 'ol/geom'; // 生成圆图层
import {LineString} from 'ol/geom'; // 生成线图层
import {Point} from 'ol/geom'; // 生成点图层
import {Stroke, Style, Icon, Text, Fill} from "ol/style"; // 配置图层样式
import {onMounted, ref} from "vue";
const map = ref<any>(null)
// 初始化地图实例
const initMap = () => {
map.value = new Map({
layers: [
new TileLayer({
// 使用内置地图
// source: new OSM()
// 使用高德瓦片
source: new XYZ({
url: "http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8"
})
})
],
target: 'map', // 挂载元素
view: new View({
center: [0, 0], // 地图打开的默认中心点
zoom: 2,
maxZoom: 18,
projection: 'EPSG:4326',
constrainResolution: true, // 设定缩放级别为整数
smoothResolutionConstraint: false // 关闭无级缩放地图
}),
// 在默认控件的基础上,再加上其他内置的控件
controls: control.defaults().extend([
new control.FullScreen(),
new control.MousePosition(),
new control.OverviewMap(),
new control.ScaleLine(),
new control.ZoomSlider(),
new control.ZoomToExtent()
]),
interactions: interaction.defaults({
doubleClickZoom: false, // 关闭双击缩放
mouseWheelZoom: false // 关闭滚轮缩放
})
})
}
//--------------------------------生成点图层---------------------------------------------------
const addModel = () => {
const Layer: any = new VectorLayer({ // 源于"ol/layer"
// softMove()内的时间容器
source: new SourceLayer(), // 源于"ol/source"
})
const model = new Point([0, 0]);// 新建点对象
const feature = new Feature(model);// 新建Feature对象 并将model传入
feature.setStyle(style)
Layer.getSource().addFeature(feature)// 将Feature对象填入图层源
map.value.addLayer(Layer) // 将图层添至地图对象
}
//----------------------------------------------------------------------------------------
onMounted(() => {
initMap()
})
点图层可以通过setStyle设置样式添加图片(只能点图层添加图片)
import img from './assets/good.png' // 导入图片源
// 创建元素显示图片
const log = ref<HTMLImageElement>(document.createElement("img"))
log.value.src = img
// 修改 addModel 函数
const addModel = () => {
//----------------------------------------------------------
const style = new Style({
image: new Icon({// 图像 但是要注意 图像有些Feature不能用 如circle
img: log.value, // 图像的源
imgSize: [500, 500],
// scale: [1,1],//图的大小
// rotateWithView: true,
// opacity: 0.2,
// offset: [-10, -10],// 偏离度
// rotation: -this.rotation
})
})
//----------------------------------------------------------
const Layer: any = new VectorLayer({ // 源于"ol/layer"
// softMove()内的时间容器
source: new SourceLayer(), // 源于"ol/source"
})
const model = new Point([0, 0]);// 新建点对象
const feature = new Feature(model);// 新建Feature对象 并将model传入
//------------设置样式--------------
feature.setStyle(style)
//----------------------------------
Layer.getSource().addFeature(feature)// 将Feature对象填入图层源
map.value.addLayer(Layer) // 将图层添至地图对象
}
线
const addModel = () => {
const Layer: any = new VectorLayer({ // 源于"ol/layer"
// softMove()内的时间容器
source: new SourceLayer(), // 源于"ol/source"
})
//---------------修改new类为LineString并填入二位数组经纬度坐标即可--------------------
const model = new LineString([[0, 0], [10, 15], [20, 20]]); // 新建线对象
//-------------------------------------------------------------------------------
const feature = new Feature(model);// 新建Feature对象 并将model传入
Layer.getSource().addFeature(feature)// 将Feature对象填入图层源
map.value.addLayer(Layer) // 将图层添至地图对象
}
圆
const addModel = () => {
//----------------------------------------------------------
const style = new Style({
fill: new Fill({ // 填充颜色
color: "rgba(255, 0, 0, 0.3)"
}),
stroke: new Stroke({ // 边缘颜色
color: "blue",
width: 3
}),
text: new Text({ // 设置字体
fill: new Fill({ // 字体颜色
color: '#000'
}),
font: '20px console', // 字体样式
text: '看我', // 字体内容
backgroundStroke: new Stroke({ // 字体外框颜色
width: .1,
}),
// backgroundFill: new Fill({
// color: "rgba(0, 0,0,0.5)",
// }),
scale: [0.7, 0.7],
// padding: [1, 11, 11, 1],
// offsetY: 15,
// offsetX: -10,
})
})
//----------------------------------------------------------
const Layer: any = new VectorLayer({ // 源于"ol/layer"
// softMove()内的时间容器
source: new SourceLayer(), // 源于"ol/source"
})
//---------------修改new类为Circle并填入经纬度坐标及半径即可--------------------
const model = new Circle([0, 0], 20); // 新建圆对象
//-------------------------------------------------------------------------------
const feature = new Feature(model);// 新建Feature对象 并将model传入
feature.setStyle(style)
Layer.getSource().addFeature(feature)// 将Feature对象填入图层源
map.value.addLayer(Layer) // 将图层添至地图对象
}
按鼠标点击绘制
import 'ol/ol.css';
import Map from 'ol/Map'; // 地图
import OSM from 'ol/source/OSM'; // 原生地图api
import XYZ from 'ol/source/XYZ'; // 其他地图api自定义url
import TileLayer from 'ol/layer/Tile'; // 平铺图片的图层源
import * as control from 'ol/control'; // 地图控件
import * as interaction from 'ol/interaction'; // 交互
import View from 'ol/View'; // 视图
import {Vector as VectorLayer} from "ol/layer";
import {Vector as SourceLayer} from "ol/source";
import {onMounted, ref} from "vue"
const map = ref<any>(null)
// 矢量地图源
let vectorSource = new SourceLayer();
// 矢量地图
let vectorLayer = new VectorLayer({
source: vectorSource
});
let draw:any = ref(null)
let snap: any = ref(null);
const initMap = () => {
map.value = new Map({
layers: [
new TileLayer({
// 使用内置地图
// source: new OSM()
// 使用高德瓦片
source: new XYZ({
url: "http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8"
})
}),
vectorLayer
],
target: 'map', // 挂载元素
view: new View({
center: [0, 0], // 地图打开的默认中心点
zoom: 2,
maxZoom: 18,
projection: 'EPSG:4326',
constrainResolution: true, // 设定缩放级别为整数
smoothResolutionConstraint: false // 关闭无级缩放地图
}),
// 在默认控件的基础上,再加上其他内置的控件
controls: control.defaults().extend([
new control.FullScreen(),
new control.MousePosition(),
new control.OverviewMap(),
new control.ScaleLine(),
new control.ZoomSlider(),
new control.ZoomToExtent()
]),
})
let modify = new interaction.Modify({
source: vectorSource
});
// 将Modify控件加入到Map对象中
map.value.addInteraction(modify);
function addInteractions(){
// 创建一个Draw控件,并加入到Map对象中
// 绘制图形类型
// Point 点
// LineString 线
// Polygon 多边形
// Circle 圆
draw.value = new interaction.Draw({
source: vectorSource,
type: 'Point'
});
map.value.addInteraction(draw.value);
// 创建一个Snap控件,并加入到Map对象中
snap.value = new interaction.Snap({
source: vectorSource
});
map.value.addInteraction(snap.value);
}
addInteractions();
}
const cancel = () => {
// 取消绘制事件
map.value.removeInteraction(draw.value);
map.value.removeInteraction(snap.value);
}
onMounted(() => {
initMap()
})
删除上一个点
let delete1 = null;
// 生成点时将其存在delete1中
draw.on('drawend', function (e: { feature: any; }) {
delete1.value = (e.feature);
// drawLayer.removeInteraction(e);
// drawLayer.removeLayer(e);
})
// vectorLayer为点所在的图层
// 通过removeFeature删除模型
vectorLayer.getSource().removeFeature(delete1)
删除所有点
// vectorLayer为点所在的图层
vectorLayer.getSource().clear()
// 清除图层
map.removeLayer(vectorLayer)