openLayers绘制点、线、面

Raccom

已于 2022-10-25 14:40:21 修改

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： WebGIS 文章标签： 1024程序员节

于 2022-10-24 14:17:33 首次发布

本文链接：https://blog.csdn.net/Raccon_/article/details/127491268

WebGIS 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何使用OpenLayers库在地图上按坐标生成点、线、面图形。首先，展示了初始化地图的基本步骤，然后分别详细讲解了点、线、圆的创建过程，包括图层样式配置。点图层可以设置图片样式，线图层通过指定经纬度坐标生成，圆图层则通过中心点和半径定义。此外，还提及了按鼠标点击进行绘制的功能，包括绘制、修改和删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)