63 lines
1.5 KiB
Vue
63 lines
1.5 KiB
Vue
<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>
|