---

---

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