快捷導(dǎo)航

Vue+OpenLayers?創(chuàng)建地圖并顯示鼠標(biāo)所在經(jīng)緯度(完整代碼)

更新時(shí)間：2023年11月09日 09:27:25 作者：L221545

這篇文章主要介紹了Vue+OpenLayers?創(chuàng)建地圖并顯示鼠標(biāo)所在經(jīng)緯度,本文使用的是高德地圖，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1、效果

2、創(chuàng)建地圖

本文用的是高德地圖
頁面

 <div class="map" id="map"></div>
                    <div id="mouse-position" class="position_coordinate"></div>

初始化地圖

     var gaodeLayer = new TileLayer({
          title: "高德地圖",
          source: new XYZ({
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
            wrapX: false
          })
        });
        this.map = new Map({
          layers: [gaodeLayer],
          target: 'map',
          view: new View({
            center: transform([123.23, 25.73], 'EPSG:4326', 'EPSG:3857'), //地圖初始中心點(diǎn)
            projection: 'EPSG:3857',
            zoom: 4,
            minZoom: 1
          }),
        });

3、添加經(jīng)緯度

   var mousePositionControl = new MousePosition({
          coordinateFormat: function (coordinate) {
            return formatAxirs(coordinate, '經(jīng)度:{x} 緯度:{y}', 2);
          },
          projection: 'EPSG:4326',
          className: "custom-mouse-position",
          target: document.getElementById("mouse-position"), //將位置數(shù)據(jù)放到那里
          undefinedHTML: "",
        });
        this.map.addControl(mousePositionControl);

4、完整代碼

<script>
import { Map, View } from "ol";
    import TileLayer from 'ol/layer/Tile.js';
  import XYZ from 'ol/source/XYZ.js';
  import { get as getProjection, transform } from 'ol/proj.js';
    import MousePosition from "ol/control/MousePosition";
   import { format as formatAxirs } from 'ol/coordinate';
  export default {
    data() {
  return {
         map: null,
        draw: null,
      };
    },
    mounted() {
      this.initMap();
    },
      methods: {
     //初始化地圖
      initMap() {
        var gaodeMapLayer = new TileLayer({
          title: "高德地圖",
          source: new XYZ({
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
            wrapX: false
          })
        });
        this.map = new Map({
          layers: [gaodeMapLayer],
          target: 'map',
          view: new View({
            center: transform([103.23, 35.33], 'EPSG:4326', 'EPSG:3857'), //地圖初始中心點(diǎn)
            projection: 'EPSG:3857',
            zoom: 4,
            minZoom: 1
          }),
        });
        // 獲取鼠標(biāo)在地圖的經(jīng)緯度
        var mousePositionControl = new MousePosition({
          coordinateFormat: function (coordinate) {
            return formatAxirs(coordinate, '經(jīng)度:{x} 緯度:{y}', 2);
          },
          projection: 'EPSG:4326',
          className: "custom-mouse-position",
          target: document.getElementById("mouse-position"), //將位置數(shù)據(jù)放到那里
          undefinedHTML: "",
        });
        this.map.addControl(mousePositionControl);
      },
}
}

附css代碼

  .position_coordinate {
    color: #6a6a6a;
    position: absolute;
    font-size: 14px;
    bottom: 20px;
    right: 20px;
    z-index: 999;
    text-align: center;
    line-height: 30px;
  }

到此這篇關(guān)于Vue+OpenLayers 創(chuàng)建地圖并顯示鼠標(biāo)所在經(jīng)緯度的文章就介紹到這了,更多相關(guān)Vue OpenLayers 鼠標(biāo)經(jīng)緯度內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: