Vue+OpenLayers入门（加载高德在线地图）

开发环境的搭建在上一篇教程中已有描述，如果不知道怎么搭建，请移步Vue+OpenLayers入门（加载OSM在线地图）

此代码为加载高德在线地图以及清除地图上的默认控件：

<template><div class="map-box" id="map-box" ref="mapBox"></div>
</template>
<script>
import 'ol/css';
import {fromLonLat} from 'ol/proj';
import Map from 'ol/Map';
import View from 'ol/View';
import {Tile as TileLayer} from 'ol/layer';
import {defaults as Defaults} from 'ol/control';
import XYZ from 'ol/source/XYZ';
export default {data() {return {map: null,}},mounted() {this.initMap();},methods: {/** 初始化地图 */initMap() {this.map = new Map({layers: [new TileLayer({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}',}),})],view: new View({center: fromLonLat([104.06, 30.67]), // 成都zoom: 10, // 设置初始化时的地图缩放层级projection: 'EPSG:3857', // 坐标系maxZoom: 18, // 最大缩放层级minZoom: 4, // 最小缩放层级}),target: 'map-box', // 地图的domcontrols: new Defaults({// 清除地图上的控件attribution: false,rotate: false,zoom: false,})});},}
}
</script>
<style>.map-box {width: 100%;height: 100%;}
</style>

效果图

Vue+OpenLayers入门（加载高德在线地图）相关推荐

ArcGIS Javascript API 加载高德在线地图扩展
利用ArcGIS JavaScript API加载高德在线地图的扩展 /*** Created by WanderGIS on 2015/7/15.*/ define(["dojo/_bas ...
Qt加载高德在线地图
Qt使用QWebView加载高德地图首先 widget.h文件中对变量.槽函数声明 private:QWebView* m_pWebView; // QWebView对象private slots: ...
qml加载高德在线地图
Qml加载在线高德地图 1:上高德地图开发平台注册开发者账号,并申请key: https://lbs.amap.com/api/javascript-api/guide/abc/prepare 2:准 ...
leaflet-webpack 入门开发系列二加载不同在线地图切换显示（附源码下载）
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载 webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 ...
星图地球数据云，便捷加载各类在线地图服务的又一神器
星图地球目前发布了一系列的产品,对我来说比较感兴趣的是星图地球数据云(GEOVIS Earth Datacloud)这款地球大数据产品.今天,我就带大家以来深入在线体验一下这款产品. 01 在线体验 ...
Vue+Leaflet实现加载Stamen显示地图
场景 Vue+Leaflet实现加载OSM显示地图: Vue+Leaflet实现加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面加载显示OSM的基础上,怎样显示s ...
Dazdata BI加载百度在线地图并标注
Dazdata BI除了内置了全国瓦片地图,支持自定义园区瓦片地图等功能外,还支持加载百度在线地图,并方便的进行标注. 下面以全国空气污染前十城市标注为例,看如何实现: 首先要去百度地图开放平台,注册 ...
Vue+Leaflet实现加载OSM显示地图
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_BADAO_LIUMANG_QIZHI的博客-CSDN博客如果是在Vue中怎样实现. 注: 博客: B ...
使用OpenLayers加载高德离线地图简单实用
转载请标注:http://blog.csdn.net/qq_25552049/article/details/79453414 概述 OpenLayers是一个用于开发WebGIS客户端的Java ...

Vue+OpenLayers入门（加载高德在线地图）

效果图

Vue+OpenLayers入门（加载高德在线地图）相关推荐

最新文章

热门文章