【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);