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

 更新时间:2021-12-17 12:01:56   作者:佚名   我要评论(0)

目录一、天地图部分1、在vue中安装openlayers二、高德地图部分一、天地图部分
1、在vue中安装openlayers


npm i --save ol



这里说的vue是

一、天地图部分

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>

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

效果图:

二、高德地图部分

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

<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加载天地图和高德地图的文章就介绍到这了,更多相关openlayers加载天地图和高德地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
  • Vue + OpenLayers 快速入门学习教程
  • VUE + OPENLAYERS实现实时定位功能
  • vue+openlayers绘制省市边界线
  • vue项目中openlayers绘制行政区划
  • vue-openlayers实现地图坐标弹框效果
  • vue集成openlayers加载geojson并实现点击弹窗教程
  • Vue+Openlayers自定义轨迹动画
  • vue使用openlayers实现移动点动画

相关文章

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

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

    目录一、天地图部分1、在vue中安装openlayers二、高德地图部分一、天地图部分 1、在vue中安装openlayers npm i --save ol 这里说的vue是
    2021-12-17
  • .NET垃圾回收GC诊断工具dotnet-gcmon使用

    .NET垃圾回收GC诊断工具dotnet-gcmon使用

    今天介绍一个新的诊断工具 dotnet-gcmon, 也是全局 .NET CLI 工具, 它可以监控到 .NET 程序的 GC, 能获取到的信息也很详细, 另外 maoni 大佬
    2021-12-17
  • HTML+CSS+JavaScript创建一个简单的井字游戏

    HTML+CSS+JavaScript创建一个简单的井字游戏

    目录实现 HTML添加 CSS实现 Javascript 部分演示地址 实现 HTML 首先在 head 部分,我将包含我们稍后创建的 css 和 javascript 文件。我还添
    2021-12-17
  • Javascript Bootstrap的网格系统,导航栏和轮播详解

    Javascript Bootstrap的网格系统,导航栏和轮播详解

    目录bootstrap简介及其相关内容网格系统列嵌套列偏移 列排序 导航栏轮播总结bootstrap简介及其相关内容 Bootstrap 是一个用于快速开发 Web
    2021-12-17
  • .NET6新特新?struct优化

    .NET6新特新?struct优化

    目录一、Record Struct二、readonly struct record三、Parameterless Constructor 在.NET6中针对Struct做了一些优化,下面我们就通过一些案例
    2021-12-17
  • Vue?element树形控件添加虚线详解

    Vue?element树形控件添加虚线详解

    目录1.实现效果2.实现代码3.其他实现总结1.实现效果 2.实现代码 树形控件虚线的添加主要通过控制css来实现,并且在树形控件的缩进数只能为0
    2021-12-17
  • 微信小程序通过uni-app进行全局分享

    微信小程序通过uni-app进行全局分享

    实际使用中,经常需要小程序分享到好友或者朋友圈,一般而言是一个个页面去设置。 官网分享介绍:https://uniapp.dcloud.io/api/plugins/sha
    2021-12-17
  • jQuery实现Ajax聊天机器人完成案例

    jQuery实现Ajax聊天机器人完成案例

    聊天机器人可以省掉很多人工方面的问题,在很多时候都可以用到,例如客服,天气回复等问题,本文就详细的介绍一下jQuery Ajax聊天机器人,具
    2021-12-17
  • .NET?Core?中对象池?Object?Pool的使用

    .NET?Core?中对象池?Object?Pool的使用

    目录一、什么是对象池二、.NET Core 中的对象池三、本文小结一、什么是对象池 对象池简单来说就是一种为对象提供可复用能力的软件设计思路。
    2021-12-17
  • vue通过element树形控件实现树形表格

    vue通过element树形控件实现树形表格

    目录实现效果图安装依赖自定义树形控件其他实现总结在vue中通过element树形控件来实现树形表格的效果 通过缩进来实现近似树形表格的效果 实现
    2021-12-17

最新评论