1、安装OpenLayers

使用以下方式将OpenLayers添加为对您的应用程序的依赖

npm i -S ol

此时，您可以要求NPM通过运行以下命令来添加所需的开发依赖项

npm i --save-dev parcel-bundler

2、注册天地图

注册地址：https://uums.tianditu.gov.cn/register

3、创建新应用

创建新应用地址：https://console.tianditu.gov.cn/api/key

4、创建新页面

<template><div id='map' class='map'></div>
</template><script>import 'ol/ol.css'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import View from 'ol/View'
import XYZ from 'ol/source/XYZ'export default {name: 'disHome',mounted() {const map = new Map({target: 'map',layers: [new TileLayer({title: '天地图卫星影像',source: new XYZ({url: 'http://t4.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=*****************************'})}),new TileLayer({title: '天地图路网',source: new XYZ({url: 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=*****************************'})}),new TileLayer({title: '天地图文字标注',source: new XYZ({url: 'http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=*****************************'})})],view: new View({center: [111.003957, 35.022778],zoom: 10,projection: 'EPSG:4326'})})}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>#map {width: 100%;height: 500px;
}</style>

注意：将以上*****************************替换为自己注册的key

5、GIS页面效果

OpenLayers集成天地图相关推荐

ES6 环境下 Openlayers 集成使用 ol-ext 以及在线示例
ES6 环境下 Openlayers 集成使用 ol-ext 以及在线示例 ol-ext 简介版本说明打包后体积集成方式在线示例最近打算重新封装一下 Openlayers,方便前端人员使用, ...
ArcGis for Android 集成天地图四川（一）
(一)安装环境配置 ① 去官网下载SCGIS API for Android V2.0 ② 将安装目录下的scmapapi.aar包拷到项目libs文件夹中将安装目录下的assets文件拷贝到app ...
GIS初学者，最新OpenLayers WMTS 天地图，OpenLayers加载天地图、调用天地图WMTS示例、tianditu、EPSG:3857、EPSG:4326
2018最新OpenLayers天地图加载可行方案,天地图WMTS调用,OpenLayers 天地图 WMTS GetCapabilities GetTile 最近要了解Web GIS方面的知识,对我 ...
在vue中用openlayers调取天地图服务并动态选择各个省份的中心，及行政边界
vue这块我就不说了,直接讲openlayers. 1.openlayers是什么? Openlayers是一个专为Web GIS客户端开发提供的JavaScript类库包,用于实现标准格式发布的地图 ...
Openlayers 地名搜索、坐标搜索、行政区划等服务-基于天地图Web服务
Openlayers 地名搜索.坐标搜索.行政区划等服务-基于天地图Web服务 OpenLayers 教程 Openlayers 使用天地图Web服务在线示例 OpenLayers 教程天地图作为 ...
Openlayers4加载天地图
文章首发于GISGO | GIS | 地理信息科学 - GIS研究中心:http://www.gisgo.top/ 相较于ArcGIS API而言,Openlayers添加天地图和其他第三方的地图服务 ...
python调用wmts服务_OpenLayers 加载山东天地图（WMTS）
最近在做一个项目使用的Openlayers. 天地图山东地图API-示例-WMTS图层加载 body{width: 100%;height: 100%;position: absolute;margi ...
openlayers案例
1.openlayers案例一这个例子是我创建gs项目区域预警gis功能的原型demo,在此demo上学到了基本的html知识和openlayers项目搭建:是一个很不错的demo. 另一个gs项目 ...
基于百度ai的抑郁症分析_AI根据脑波模式预测有效的抑郁症治疗
基于百度ai的抑郁症分析 By Tracie White 由崔西怀特 Current methods used to diagnose and treat depression are impreci ...

OpenLayers集成天地图

1、安装OpenLayers

2、注册天地图

3、创建新应用

4、创建新页面

5、GIS页面效果

OpenLayers集成天地图相关推荐

最新文章

热门文章