| | |
| | | <!-- 地图 --> |
| | | <template> |
| | | <!-- 地图容器 --> |
| | | <view id="map" class="map" style="width: 100%; height: 80vh;"></view> |
| | | <view id="map" class="map" style="width: 100%; height: 80vh"></view> |
| | | </template> |
| | | |
| | | <script setup> |
| | | onShow(() => { |
| | | console.log(222) |
| | | // #ifdef APP-PLUS |
| | | onShow(() => { |
| | | console.log(222); |
| | | // #ifdef APP-PLUS |
| | | |
| | | console.log(111) |
| | | plus.screen.lockOrientation('landscape-primary'); |
| | | // #endif |
| | | }) |
| | | console.log(111); |
| | | plus.screen.lockOrientation("landscape-primary"); |
| | | // #endif |
| | | }); |
| | | |
| | | onHide(() => { |
| | | console.log(123123) |
| | | // #ifdef APP-PLUS |
| | | plus.screen.lockOrientation('portrait-primary'); |
| | | // #endif |
| | | }) |
| | | onHide(() => { |
| | | console.log(123123); |
| | | // #ifdef APP-PLUS |
| | | plus.screen.lockOrientation("portrait-primary"); |
| | | // #endif |
| | | }); |
| | | </script> |
| | | |
| | | <script module="leaflet" lang="renderjs"> |
| | | import L from 'leaflet' |
| | | import { |
| | | onBeforeUnmount, |
| | | onMounted |
| | | } from 'vue'; |
| | | import L from 'leaflet' |
| | | import { |
| | | onBeforeUnmount, |
| | | onMounted |
| | | } from 'vue'; |
| | | |
| | | export default { |
| | | mounted() { |
| | | var basemapLayer0 = L.tileLayer( |
| | | 'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', { |
| | | maxZoom: 18, |
| | | minZoom: 1, |
| | | tileSize: 256, |
| | | zoomOffset: 1 |
| | | }); |
| | | var basemapLayer1 = L.tileLayer( |
| | | 'http://t1.tianditu.com/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', { |
| | | maxZoom: 18, |
| | | minZoom: 1, |
| | | tileSize: 256, |
| | | zoomOffset: 1 |
| | | }); |
| | | var basemapLayer2 = L.tileLayer( |
| | | 'http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', { |
| | | maxZoom: 18, |
| | | minZoom: 1, |
| | | tileSize: 256, |
| | | zoomOffset: 1 |
| | | }); |
| | | var basemapLayer3 = L.tileLayer( |
| | | 'http://t1.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', { |
| | | maxZoom: 18, |
| | | minZoom: 1, |
| | | tileSize: 256, |
| | | zoomOffset: 1 |
| | | }); |
| | | var basemap0 = L.layerGroup([basemapLayer0, basemapLayer1]); |
| | | var basemap1 = L.layerGroup([basemapLayer2, basemapLayer3]); |
| | | export default { |
| | | mounted() { |
| | | var basemapLayer0 = L.tileLayer( |
| | | 'http://t1.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', { |
| | | maxZoom: 18, |
| | | minZoom: 1, |
| | | tileSize: 256, |
| | | zoomOffset: 1 |
| | | }); |
| | | var basemapLayer1 = L.tileLayer( |
| | | 'http://t1.tianditu.com/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', { |
| | | maxZoom: 18, |
| | | minZoom: 1, |
| | | tileSize: 256, |
| | | zoomOffset: 1 |
| | | }); |
| | | var basemapLayer2 = L.tileLayer( |
| | | 'http://t1.tianditu.com/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', { |
| | | maxZoom: 18, |
| | | minZoom: 1, |
| | | tileSize: 256, |
| | | zoomOffset: 1 |
| | | }); |
| | | var basemapLayer3 = L.tileLayer( |
| | | 'http://t1.tianditu.com/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=e110584a27d506da2740edca951683f4', { |
| | | maxZoom: 18, |
| | | minZoom: 1, |
| | | tileSize: 256, |
| | | zoomOffset: 1 |
| | | }); |
| | | var basemap0 = L.layerGroup([basemapLayer0, basemapLayer1]); |
| | | var basemap1 = L.layerGroup([basemapLayer2, basemapLayer3]); |
| | | |
| | | let map = L.map('map', { |
| | | preferCanvas: true, |
| | | crs: L.CRS.EPSG4326, |
| | | layers: [basemap1], |
| | | zoomControl: false, |
| | | attributionControl: false, |
| | | doubleClickZoom: false, |
| | | editable: true //绘制控件 |
| | | }).setView([25.992338, 114.823254], 13); |
| | | } |
| | | let map = L.map('map', { |
| | | preferCanvas: true, |
| | | crs: L.CRS.EPSG4326, |
| | | layers: [basemap1], |
| | | zoomControl: false, |
| | | attributionControl: false, |
| | | doubleClickZoom: false, |
| | | editable: true //绘制控件 |
| | | }).setView([25.992338, 114.823254], 13); |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | /* Leaflet 默认容器要有高度 */ |
| | | .map { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | /* Leaflet 默认容器要有高度 */ |
| | | .map { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | </style> |