hlt_app/pages/map/olRender.js

import {
	olMapConfig
} from '../../static/mapConfig.js';

import olMapClass from './olMap.js';

export const olRenderJs = {
	name: "openlayer-map",
	data() {
		return {
			tdtLayersSl: [],
			tdtLayersYx: [],
			gwLayers: [],
			pipeInfo: null,
			jzLayers: [],
			siteLayers: [],
			mapObj: null,
			userLocVisible: true
		};
	},
	mounted() {
		this.mapObj = new olMapClass()
		this.initOlMap()
	},
	methods: {
		initOlMap() {
			this.$ownerInstance.callMethod('methodForRenderJs', {
				type: 'startInitMap'
			});
			console.log('初始化ol地图')
			// 等待dom容器,否则挂不上
			setTimeout(() => {
				this.mapObj.initOlMap('ol-map-view', olMapConfig.center, olMapConfig.zoom)
				olMapConfig.layerTdt.sl.forEach((tdtUrl, index) => {
					this.mapObj.addMapLayers('base', `sl${index}`, 'tdt', tdtUrl, true)
					this.tdtLayersSl.push(`sl${index}`)
				})
				olMapConfig.layerTdt.yx.forEach((tdtUrl, index) => {
					this.mapObj.addMapLayers('base', `yx${index}`, 'tdt', tdtUrl, false)
					this.tdtLayersYx.push(`yx${index}`)
				})

				// 添加用户位置标签
				let userMarker = [{
					longitude: "104.06",
					latitude: "30.67",
					name: "用户位置标签",
					id: "user-loc-marker",
				}]
				let icon = {
					anchor: [0.5, 1],
					src: './static/images/components/mapSearch/user-loc.png'
				}
				this.mapObj.addVectorLayers('userLoc', 'userLoc', this.userLocVisible, userMarker, true, icon, null)
				// 添加弹窗
				this.mapObj.addPopUp('gwPop', 'ol-popup-box', false)
				
				this.mapObj.initOlMapEvent('singleclick', async (event) => {
					console.log(event)
				})
				this.$ownerInstance.callMethod('methodForRenderJs', {
					type: 'initMap'
				});
			}, 3000)
		}
	}
}