vue+openlayers（-）安装 + 配置 + 初始化地图

运行npm install ol

 下面是可以运行的代码：

  1 <template>
  2     <div id="map">
  3 
  4     </div>
  5     
  6 </template>
  7 <script>
  8 import {Map, View} from 'ol'
  9 import TileLayer from 'ol/layer/Tile.js';
 10 import { XYZ } from "ol/source";
 11 import { defaults as defaultControls } from "ol/control.js";
 12 import { defaults as defaultInteractions } from "ol/interaction.js";
 13 // 绘制地图上的经纬度
 14 import Graticule from 'ol/layer/Graticule';
 15 import Synchronize from 'ol-ext/interaction/Synchronize'
 16 import Stroke from 'ol/style/Stroke';
 17 import 'ol-ext/interaction/Synchronize.css'
 18 export default {
 19     name: 'initMap',
 20     components:{
 21         pointPage
 22     },
 23     data() {
 24         return  {
 25             map: null,
 26             // 是否绘制图层
 27             isDraw: false
 28         }
 29     },
 30     mounted() {
 31         this.initMap()
 32     },
 33     methods: {
 34         /**
 35          * 初始化地图
 36          */
 37         initMap() {
 38             this.map = new Map({
 39                 target: "map", // 指定挂载dom，注意必须是id
 40                 layers: [
 41                     new TileLayer({
 42                         source: new XYZ({
 43                             url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=468e79fa8f33ee0c2ba6c1f10de76c36",
 44                             crossOrigin: ""
 45                         })
 46                     }),
 47                     new TileLayer({
 48                         source: new XYZ({
 49                             url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=468e79fa8f33ee0c2ba6c1f10de76c36",
 50                             crossOrigin: ""
 51                         })
 52                     }),
 53                     new Graticule({
 54                         // 绘制经纬线的颜色
 55                         strokeStyle: new Stroke({
 56                             color: 'rgba(255,255,255,0.4)',
 57                             width: 2,
 58                             lineDash: [3, 3],
 59                         }),
 60                         zIndex: 11,
 61                         showLabels: true,
 62                         wrapX: true,
 63                         className_: 'gridding'
 64                     }),
 65                 ],
 66                 view: new View({
 67                     // 视图
 68                     projection: "EPSG:4326", // 坐标系
 69                     center: [108.885436, 30.054604],
 70                     zoom: 4, // 默认视图层级
 71                     // minZoom: 5, // 设置最小缩放级别
 72                     maxZoom: 10 // 设置最大缩放级别
 73                 }),
 74                 controls: defaultControls({
 75                     attribution: false, // 禁用右下角的地图属性组件
 76                     rotate: false, // 禁用旋转组件 alt+shift true旋转交互时会有一个旋转控件显示出来
 77                     zoom: false // 禁用右上角缩放组件
 78                 }), // 地图控件
 79                 interactions: defaultInteractions({
 80                     doubleClickZoom: false, // 禁用双击缩放
 81                 }) 
 82             })
 83             // 绘制经纬度
 84             this.map.addInteraction(new Synchronize({ maps: this.map }))
 85             // 将map保存到全局
 86             window._map = this.map
 87             this.isDraw = true
 88         }
 89     }
 90 }
 91 </script>
 92 
 93 <style scoped>
 94     #map {
 95         position: absolute;
 96         left: 0;
 97         top: 0;
 98         right: 0;
 99         bottom: 0;
100     }
101 </style>

 

posted on 2023-09-18 09:17  小雨子1993  阅读(371)  评论(0)  编辑  收藏  举报

导航