openlayers加载天地图

前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。本人不是专业GIS开发，只是记录，方便后续查找。

参考资料：
openlayers官网：https://openlayers.org/
geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector
地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint/index.html

openlayers核心：Map对象、View视图、Layer图层、Source来源、Feature特征等

<template><!-- 承载地图的容器，注意宽高一定要有，否则不显示 （后面将该文件封装为组件，以便调用） --><div class="base-map" id="base-map" />
</template>

<script>
import Map from 'ol/Map'
import View from 'ol/View'
import { defaults as Defaults } from 'ol/control.js'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'export default {name: 'BaseMap',data () {return {// 地图实例对象map: null}},mounted () {// 窗口拖拉，更新地图大小window.addEventListener('resize', () => {if (this.map) {this.map.updateSize()}})this.$nextTick(() => {this.initMap()})},methods: {// 加载地图initMap () {// T=vec_c表示请求的是路网数据，x 表示切片的 x 轴坐标，y 表示切片的y轴坐标，z表示切片所在的缩放级别。// 使用 ol.source.XYZ 加载切片，并将获取的数据初始化一个切片图层 ol.layer.Tile：// 天地图底图var source = new XYZ({url: 'http://t4.tianditu.com/DataServer?T=vec_w&tk=b9031f80391e6b65bd1dd80dcde1b097&x={x}&y={y}&l={z}'})var tileLayer = new TileLayer({title: '天地图',source: source})// 标注图层(就是我们所看见的行政区名称，道路)var sourceMark = new XYZ({url: 'http://t4.tianditu.com/DataServer?T=cva_w&tk=b9031f80391e6b65bd1dd80dcde1b097&x={x}&y={y}&l={z}'})var tileMark = new TileLayer({title: '标注图层',source: sourceMark})//  创建地图对象this.map = new Map({target: 'base-map', // 地图容器 对应idlayers: [tileLayer, tileMark], // 图层view: new View({ // 视图projection: 'EPSG:4326', // 坐标系// 初始化地图中心 可以去地图坐标拾取网站获取想要的坐标center: [118.339408, 32.261271],// 缩放zoom: 12,// 最大缩放maxZoom: 18,// 最小缩放minZoom: 1}),// 地图自带控件，这里我们不需要，后续自己做类似功能controls: new Defaults({zoom: false,rotate: false})})// 将地图对象抛出去this.$emit('getMap', this.map)}}
}
</script>

<style scoped>
.base-map {width: 100%;height: 100%;z-index: -1;
}
</style>

包版本

若加载不成功，请自行申请天地图key，天地图官网：https://www.tianditu.gov.cn/

加载成功效果

openlayers学习——1、openlayers加载天地图相关推荐

Vue+Openlayers实现加载天地图WMTS服务显示
场景 Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图: Vue中使用Openlayers加载OSM(Open Street Map)显示街道地图_BADAO_ ...
（转）Openlayers 2.X加载天地图
http://blog.csdn.net/gisshixisheng/article/details/44621923 概述: 在前面的章节,讲到了Arcgis for js加载天地图,在本节讲述如何 ...
OpenLayers 加载天地图模糊的问题 OpenLayers 地图缩放模糊
openlayers 加载天地图模糊的问题,OpenLayers 地图缩放几次之后模糊 2021年12月20日纠正模糊原因: 地图加载瓦片实质上还是图片,一般来说是256&256,将一个静态 ...
GIS初学者，最新OpenLayers WMTS 天地图，OpenLayers加载天地图、调用天地图WMTS示例、tianditu、EPSG:3857、EPSG:4326
2018最新OpenLayers天地图加载可行方案,天地图WMTS调用,OpenLayers 天地图 WMTS GetCapabilities GetTile 最近要了解Web GIS方面的知识,对我 ...
OpenLayers 加载天地图
要使用 OpenLayers 3 加载天地图,首先要弄清楚天地图发布的原理,以及遵循的发布规范,上一篇中我们提到了使用 OpenLayers 3 加载百度地图,我们提到一般网络地图为了加快访问速度,都 ...
openlayers加载天地图及天地图地形图影像图
openlayer加载天地图.天地图地形图.天地图影像图,相关代码有注释. 加载效果: 天地图底图天地图地形图天地图影像图相关代码: import {XYZ,TileImage} from 'o ...
OpenLayer学习之加载天地图在线地图
1.天地图官网 http://www.tianditu.gov.cn/ 2.申请key 注意: 天地图自2019年1月 1日起需获得开发授权,然后在引用的API 地址后增加授权信息即可(&tk ...
【WebGIS】二、基于Openlayers实现地图的加载与显示
二.基于Openlayers实现地图的加载与显示基于上文中配置好的环境,先通过Element Plus实现一个页面的布局,然后基于openlayers加载显示全球瓦片地图. 1. 引入element ...
ol xyz 加载天地图_OpenLayers加载天地图方法——WMTS和XYZ
1.ol.layer.Tile及数据源类结构 openlayers中,图层(layer)不可缺少的组成部分是数据源(source),天地图是切片的数据服务,对应的图层是ol.layer.Tile,下图 ...

openlayers学习——1、openlayers加载天地图

openlayers加载天地图

openlayers学习——1、openlayers加载天地图相关推荐

最新文章

热门文章