directly on the code
//绘制点,地图初始化就可以绘制操作
var draw: any;
const drawpoint = (source: any) => {
if (isview == false) {
//画点
const addInteraction = () => {
draw = new Draw({
source: source,
type: 'Point',
style: iconStyle
});
hxMap.mapInstance.addInteraction(draw);
};
addInteraction();
if (draw) {
hxMap.mapInstance.on('click', function (evt: any) {
var pixel = hxMap.mapInstance.getEventPixel(evt.originalEvent); //获取点击的像素点
var coordinate3857 = hxMap.mapInstance.getCoordinateFromPixel(pixel); //获取像素点的坐标
const coor4326 = transform(coordinate3857, 'EPSG:3857', 'EPSG:4326');
formRef.setFieldsValue({
longitude: String(coor4326[0].toFixed(8)) });
formRef.setFieldsValue({
latitude: String(coor4326[1].toFixed(8)) });
});
}
//只显示最后一个绘制的点
draw.on('drawend', () => {
let drawendSource: any[];
nextTick(() => {
drawendSource = source.getFeatures();
if (drawendSource.length > 1) {
//每点击一次就删除上一个绘制的点
source.removeFeature(drawendSource[0]);
source.getFeatures()[0].setId('drawfeature');
}
});
});
//绘制的点是否在田块内
isinField();
}
};
//使用条件
//点样式
let Iconsrc = require('@/assets/farm/point.gif');
var iconStyle = new Style({
image: new Icon({
src: Iconsrc,
scale: 0.05,
anchor: [0.5, 0.8]
//anchorXUnits: 'fraction',
//anchorYUnits: 'fraction',
})
});
var source = new VectorSource({
wrapX: false, features: [] });
var vectorlayer = new VectorLayer({
source: source,
style: iconStyle
});
hxMap.mapInstance.addLayer(vectorlayer);
//调用
drawpoint(source);