1嗅绰、初始化地圖
initMap(){
? const mapContainer = this.$refs.rootmap
? // 控件展示
? const FullScreen = new olControl.FullScreen() // 全屏控件
? const ScaleLine = new olControl.ScaleLine() // 比例尺控件
? const MousePosition = new olControl.MousePosition() // 鼠標(biāo)經(jīng)過位置坐標(biāo)指示
? const ZoomSlider = new olControl.ZoomSlider() // 滑動(dòng)縮放
? const ZoomToExtent = new olControl.ZoomToExtent() // 特定程度上更改地圖視圖
? const Zoom = new olControl.Zoom() // 放大縮小按鈕
? const map = new Map({
? ? layers: mapconfig.streetmap(),
? ? controls: [FullScreen, ScaleLine, Zoom],
? ? target: mapContainer,
? ? view: new View({
? ? projection: "EPSG:4326",
? ? center: this.mapCenter,
? ? zoom: this.mapZoom
? ? })
? })
? // 添加鼠標(biāo)點(diǎn)擊事件
? map.on('click', this.mapClick)
? // 添加鼠標(biāo)經(jīng)過事件
? map.on('pointermove',this.mapPointerMove)
? // 保存地圖
? this.mapData = map
? }
2、地圖事件
點(diǎn)擊事件：
mapClick(evt){
? // 獲取點(diǎn)擊中心點(diǎn)
? this.clickCenter = evt.coordinate
? // 移動(dòng)地圖
? this.mapData.getView().animate({
? ? center:evt.coordinate,
? })
},
鼠標(biāo)劃過地圖事件
// 鼠標(biāo)劃過地圖事件
? mapPointerMove(evt){
? ? if (evt.dragging) {
? ? return
? }
? // 獲取地圖上的重疊像素（用來獲得疊加圖層）
? const pixel = this.mapData.getEventPixel(evt.originalEvent)
? const hit = this.mapData.hasFeatureAtPixel(pixel)
? // 獲取地圖上的feature
? const feature = this.mapData.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
? ? return feature
? })
? // 獲取疊加圖層對(duì)像素疊加圖層（hit）設(shè)置鼠標(biāo)樣式（給標(biāo)注點(diǎn)添加鼠標(biāo)經(jīng)過樣式）
? this.mapData.getTarget().style.cursor = hit ? 'pointer' : ''
? // 鼠標(biāo)移動(dòng)到點(diǎn)標(biāo)注的時(shí)候顯示彈出窗體搀继，feature.get('name') 可以獲取標(biāo)注標(biāo)題窘面，如果設(shè)置了的話
}
