【openlayers框架学习】九：openlayers中的交互类（select和draw）

openlayers进阶

28 openlayers中的事件

常用进行事件交互的对象：map\view\source

29 openlayers中select交互类的使用

Interaction->Draw

Interaction->Select

import './style.css';
import Map from 'ol/Map';
import 'ol/ol.css';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON.js';
import VectorLayer from 'ol/layer/Vector.js';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Select from 'ol/interaction/Select.js';
const center = [114.25, 30.59];
const view = new View({
    center: center,
    zoom: 4,
    projection: "EPSG:4326",
});
//城市矢量地图-高德地图瓦片
const gaodeSource = new XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
});
const gaodeLayer = new TileLayer({
    source: gaodeSource,
});
const map = new Map({
    target: "map",
    view: view,
    layers: [gaodeLayer],
});
//加载矢量地图 将一些矢量数据（很多格式 如GEOJSON）加载到底图上
const vectorSource = new VectorSource({
    url:'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
    //处理对应的矢量数据格式
    format: new GeoJSON(),
});
const vectorLayer = new VectorLayer({
    source: vectorSource,
    style: new Style({
        fill: new Fill({
            // color: "red", //填充为红色
            color: "rgba(255,0,0,0.6)", //填充为红色
        }),
        stroke: new Stroke({
            color:"green",
        }),
    }),
});
//加载数据需要发送请求 => 异步 在回调函数中处理数据
// vectorSource.on("change",function(){
//     console.log(this.getFeatures());
// });
//GeoJSON的数据格式 记录的是要素信息的集合 要素信息 包括自定义属性 几何信息（经纬度-形状）
map.addLayer(vectorLayer);
const select = new Select();
map.addInteraction(select);
select.on('select',function(e){
    console.log(e);
    const f = e.selected[0];
    f.setStyle(new Style({
        fill: new Fill({
            color:"rgba(0,255,0,0.6)",
        }),
    }));
});

30 openlayers中select常见的配置选项

main.js

import './style.css';
import Map from 'ol/Map';
import 'ol/ol.css';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON.js';
import VectorLayer from 'ol/layer/Vector.js';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Select from 'ol/interaction/Select.js';
import { pointerMove } from 'ol/events/condition';
const center = [114.25, 30.59];
const view = new View({
    center: center,
    zoom: 4,
    projection: "EPSG:4326",
});
//城市矢量地图-高德地图瓦片
const gaodeSource = new XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
});
const gaodeLayer = new TileLayer({
    source: gaodeSource,
});
const map = new Map({
    target: "map",
    view: view,
    layers: [gaodeLayer],
});
//加载矢量地图 将一些矢量数据（很多格式 如GEOJSON）加载到底图上
const vectorSource = new VectorSource({
    url:'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
    //处理对应的矢量数据格式
    format: new GeoJSON(),
});
const vectorLayer = new VectorLayer({
    source: vectorSource,
    style: new Style({
        fill: new Fill({
            // color: "red", //填充为红色
            color: "rgba(255,0,0,0.6)", //填充为红色
        }),
        stroke: new Stroke({
            color:"green",
        }),
    }),
});
//加载数据需要发送请求 => 异步 在回调函数中处理数据
// vectorSource.on("change",function(){
//     console.log(this.getFeatures());
// });
//GeoJSON的数据格式 记录的是要素信息的集合 要素信息 包括自定义属性 几何信息（经纬度-形状）
map.addLayer(vectorLayer);
const select = new Select({
    condition:pointerMove,  //鼠标移动时触发，默认是点击时触发
    filter:function(feature, layer){
        return layer === vectorLayer; //过滤图层
    }
});
map.addInteraction(select);
select.on('select',function(e){
    console.log(e);
    const f = e.selected[0];
    f.setStyle(new Style({
        fill: new Fill({
            color:"rgba(0,255,0,0.6)",
        }),
    }));
});

31 openlayers中绘制交互类（Draw）

Interaction->Draw

main.js

import './style.css';
import Map from 'ol/Map';
import 'ol/ol.css';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { XYZ } from 'ol/source';
import VectorSource from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON.js';
import VectorLayer from 'ol/layer/Vector.js';
import Style from 'ol/style/Style';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Draw from 'ol/interaction/Draw.js';
const center = [114.25, 30.59];
const view = new View({
    center: center,
    zoom: 4,
    projection: "EPSG:4326",
});
//城市矢量地图-高德地图瓦片
const gaodeSource = new XYZ({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
});
const gaodeLayer = new TileLayer({
    source: gaodeSource,
});
const map = new Map({
    target: "map",
    view: view,
    layers: [gaodeLayer],
});

//加载矢量地图 
const vectorSource = new VectorSource();
const vectorLayer = new VectorLayer({
    source: vectorSource,
    style: new Style({
        stroke: new Stroke({
            color:"red",
            width:4,
        }),
    }),
});

const draw = new Draw({
    type:'LineString',
    source: vectorLayer.getSource(),
});

map.addInteraction(draw);
map.addLayer(vectorLayer);