<template>
	<view class="container">
        <u-navbar title="综合监视" :autoBack="true" :titleStyle="{
				fontSize:'18px'
			}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
		</u-navbar>
		<view id="map" class="map"></view>
	</view>
</template>
<script module="ol" lang="renderjs">
	import ol from 'ol';
	import {Source,Feature,Map,Overlay} from 'ol'
	import {XYZ,Vector} from 'ol/source';
	import {Group} from 'ol/layer'
	import {geom,Point,LineString} from 'ol/geom'
	import {Style,Circle,Fill,Stroke,Text} from 'ol/style'   
	import View from 'ol/View';
	import TileLayer from 'ol/layer/Tile';
	import Lvector from 'ol/layer/Vector'
	import OSM from 'ol/source/OSM';
	import Gcircle from 'ol/geom/Circle'  
	export default {
			data() {
				return {
					map: null,
				}
			},
			mounted() {
			this.initMap();
		},
		methods: {
			initMap() {
				this.map = new Map({
					target: 'map',
					layers: [new TileLayer({
							// source: new OSM()
							source: new XYZ({
							url: "https://t{0-7}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=efc861f25f96dc6e5f884f0403ebfefd",
								projection: 'EPSG:3857',
								// wrapX: false
								crossOrigin: '*',
							}),
                            maxZoom: 20,
						})],
					view: new View({
						center: [81.277857, 43.907986],
						// center: [114.30, 30.50],
						zoom: 12,
						projection: 'EPSG:4326'
					})
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	#map {
		position: relative;
		width: 100%;
		height: 1400rpx;
	}
</style>
