温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue如何利用openlayers加载天地图和高德地图

发布时间:2021-11-22 12:32:29 来源:亿速云 阅读:649 作者:小新 栏目:开发技术

这篇文章给大家分享的是有关vue如何利用openlayers加载天地图和高德地图的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

    一、天地图部分

    1、在vue中安装openlayers

    npm i --save ol

    这里说的vue是基于脚手架构建的。 新建个页面,也就是vue文件,配置好路由。接着就是可以直接放入我的代码运行显示了。

    <template>
    
      <div class="wrapper">
    
        <div>天地图</div>
    
        <div class="map" id="olMap"></div>
    
      </div>
    
    </template>
    
    <script>
    
    import "ol/ol.css";
    
    import {
    
      Tile as TileLayer } from "ol/layer";
    
    import XYZ from "ol/source/XYZ";
    
    import {
    
      defaults as defaultControls } from "ol/control";
    
    import Map from "ol/Map.js";
    
    import View from "ol/View.js";
    export default {
    
      data() {
       return {
    
          map: null,
    
          parser: null,
    
        };
    
      },
    
      mounted() {
        this.initMap();
    
      },
    
      methods: {
    
        initMap() {
    
         const map = new Map({
           target: "olMap",
    
            view: new View({
    
     
    
              center: [0, 0], //中心点经纬度
    
              zoom: 4, //图层缩放大小
    
              projection: "EPSG:4326",
    
            }),
    
            controls: defaultControls({
              zoom: true,
    
              attribution: false,
    
              rotate: false,
    
            }),
    
          });
    
          this.map = map;
    
          // 添加地图
    
          let url = "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}";
    
          url = `${
    
       url}&T=vec_c&tk=替代你的key`;
    
          const source = new XYZ({
         url: url,
    
            projection: "EPSG:4326",
    
          });
    
          const tdtLayer = new TileLayer({
    
            source: source,
    
          });
    
          this.map.addLayer(tdtLayer);
    
          // 添加注记
    
          url = "http://t{0-7}.tianditu.com/DataServer?x={x}&y={y}&l={z}";
    
          url = `${
    
       url}&T=cva_c&tk=替代你的key`;
    
          const sourceCVA = new XYZ({
            url: url,
    
            projection: "EPSG:4326",
    
          });
    
          const tdtcvaLayer = new TileLayer({
    
            source: sourceCVA,
    
          });
    
          this.map.addLayer(tdtcvaLayer);
    
        },
    
      },
    
    };
    
    </script>
    <style scoped>
    
    .map {
    
      width: 100%;
    
      height: 100vh;
    
    }
    
    </style>

    天地图就可以显示出来了。

    效果图:

    vue如何利用openlayers加载天地图和高德地图

    二、高德地图部分

    相对于天地图,高德地图就容易多了,直接上代码

    <template>
    
      <div class="wrapper">
    
        <div>高德地图</div>
    
        <div id="map"></div>
    
      </div>
    
    </template>
    <script>
    
    import {
    
     Map,View,Feature} from 'ol'
    
    
    
    import * as olProj from 'ol/proj'
    
    import {
    
     Point} from 'ol/geom'
    
    import {
    
      Style, Fill, Stroke, Circle as sCircle } from "ol/style";
    
    // 添加图层
    
    import Tilelayer from 'ol/layer/Tile'
    
    import {
    
     Vector as VectorLayer} from 'ol/layer'
    
    import {
    
     XYZ,Vector as VectorSource} from 'ol/source'
    
    //引入样式文件
    
    import "ol/ol.css"
    export default {
      data() {
    
      return {
        map:null
    
        }
    
      },
    
      mounted() {
    
      this.init();
    
       this.setMarker();
    
      },
    
      methods: {
    
        init(){
    
           this.map=new Map({
    
             target:'map',
    
             layers:[new Tilelayer({
    
               source: new XYZ({
    
                   url:'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
    
               })
    
             })
    
             ],
    
            view:new View({
    
    
                // 将西安作为地图中心 
    
                // olProj.fromLonLat方法将经纬度转换成对应的坐标
    
              center:olProj.fromLonLat([108.945951, 34.465262]),
    
              zoom:2
    
            }),
    
           })
    
        },
    
        setMarker(){
    
            let _style = new Style({
    
                image:new sCircle({
    
                    radius:10,
    
                    stroke:new Stroke({
    
                        color:"#fff",
    
                    }),
    
                    fill: new Fill({
    
                        color:'#3399CC',
    
                    }),
    
                }),
    
            });
    
            let _feature = new Feature({
    
     
    
                geometry:new Point(olProj.fromLonLat([108.945951, 34.465262])),
    
            });
    
            _feature.setStyle(_style);
    
            let _marker = new VectorLayer({
    
    
                source: new VectorSource({
    
                   feature:[_feature],
    
                }),
    
            });
    
            this.map.addLayer(_marker);
    
        },
    
      },
    
    }
    
    </script>
    
    <style scoped>
    
      #map{
    
          /* 屏幕宽高 */
    
        width: 100vw;
    
        height: 100vh;
    
      }
    
    </style>

    感谢各位的阅读!关于“vue如何利用openlayers加载天地图和高德地图”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI