OpenLayers 教程

天地图作为广大 GISer 使用频繁的服务之一，除了应用众多的底图服务（影像、地形、矢量），还有很多 Web 服务接口。

比如：地名搜索、地理编码查询、地理逆编码查询、行政区划、路径公交规划等，可以根据项目的实际需求调用接口。

本文介绍在前端使用 ajax 发起请求，获取天地图服务数据，并且在地图渲染。

包括： 地名搜索（获取列表）、地理编码查询（地名查询坐标）、地理逆编码查询（坐标查询地名）、行政区别、路径规划（导航） 。

PS：其他服务也类型，前端发起请求，获取数据，通过 Openlayers 渲染即可！

放上官网地址： 天地图 Wep API

Openlayers 使用天地图Web服务

<html lang="en">
<head><meta charSet="utf-8"><!--注意：openlayers 原版的比较慢，这里引起自己服务器版--><link rel="stylesheet" href="http://openlayers.vip/examples/css/ol.css" type="text/css"><style>/* 注意：这里必须给高度，否则地图初始化之后不显示；一般是计算得到高度，然后才初始化地图 */.map {height: 400px;width: 100%;float: left;}</style><!--注意：openlayers 原版的比较慢，这里引起自己服务器版--><script src="http://openlayers.vip/examples/resources/ol.js"></script><script src="http://openlayers.vip/examples/resources/jquery-3.5.1.min.js"></script><script src="http://openlayers.vip/examples/resources/layer.js"></script><script src="./tiandituLayers.js"></script><title>OpenLayers example</title></head>
<body>
<h2>OpenLayers tianditu web</h2>
<!--地图容器，需要指定 id -->
<div id="map" class="map"></div><script type="text/javascript">var map = new ol.Map({// 地图容器target: 'map',// 地图图层，比如底图、矢量图等layers: [getIMG_CLayer(),getIBO_CLayer(),getCIA_CLayer(),],// 地图视野view: new ol.View({projection: "EPSG:4326",// 定位center: [115.67724700667199, 37.73879478106912],// 缩放zoom: 6,maxZoom: 18,minZoom: 1,// 注意，天地图地图等级 level 参数，需要设置为整数，否则会出错//1.设置缩放级别为整数constrainResolution: true,//2.关闭无级缩放地图smoothResolutionConstraint: false,})});// 初始化图层var layerVector = initVectorLayer();/*** @todo 矢量图层* @returns {VectorLayer}* @constructor*/function initVectorLayer() {//实例化一个矢量图层Vector作为绘制层let source = new ol.source.Vector();//创建一个图层let customVectorLayer = new ol.layer.Vector({source: source,zIndex: 2,});//将绘制层添加到地图容器中map.addLayer(customVectorLayer);return customVectorLayer;}/*** @todo wkt格式数据转化成图形对象* @param {string} wkt   "POINT(112.7197265625,39.18164062499999)" 格式数据* @param {string|Projection} sourceCode 源投影坐标系* @param {string|Projection} targetCode 目标投影坐标系* @returns {Feature}*/function getFeatureByWKT(wkt, sourceCode, targetCode) {try {let view = map.getView();if (!wkt) {return null;}let format = new ol.format.WKT();let feature;feature = format.readFeature(wkt, {featureProjection: targetCode || view.getProjection(),dataProjection: sourceCode || view.getProjection(),});return feature;} catch (e) {console.log(e);return null;}}/*** 获取样式* @param name* @returns {ol.style.Style}*/function getStyle(name) {// 圆点样式return new ol.style.Style({image: new ol.style.Icon({// 允许跨域，如果不设置，打印地图不会打印crossOrigin: 'anonymous',// 标注图片和文字之间的距离anchor: [0.5, 0],// 图片的偏移offset: [0.2, 0],// 图片的锚点，一般来说，都是右下角anchorOrigin: 'bottom-right',//图标的urlsrc: "http://api.tianditu.gov.cn/v4.0/image/marker-icon.png",//图标比例, 0.5 大概是25*34scale: 1,}),text: new ol.style.Text({text: name,// 偏移offsetX: 0,offsetY: -60,// 文字居中textAlign: 'center',// 字体font: 'normal bold  18px  Arial,sans-serif',// 比例scale: 1,// 边距padding: [5, 5, 5, 5],// 字体颜色fill: new ol.style.Fill({color: 'rgba(51,51,51, 1)'}),// 字体边框，可以配合 fill 是文字高亮stroke: new ol.style.Stroke({color: 'rgba(0, 255, 255, 0.8)',width: 2,}),// 背景色backgroundFill: new ol.style.Fill({color: 'rgba(252,254,255, 1)'}),// 背景边框backgroundStroke: new ol.style.Stroke({color: 'rgba(0, 255, 255, 0.8)',width: 1,}),})});}/*** 定位* @param layerTemp*/function moveTo(layerTemp) {//定位范围map.getView().fit(layerTemp.getSource().getExtent(), {duration: 500,//动画的持续时间,callback: function () {},});}// 添加多个点，地名获取列表，将点叠加在地图上let addMarkerList = function (poi) {let arr = [];if (poi && poi.length > 0) {for (let i = 0; i < poi.length; i++) {const poiElement = poi[i];let xy = poiElement.lonlat.split(',');let feature = getFeatureByWKT('POINT(' + xy[0] + ' ' + xy[1] + ')');feature.setStyle(getStyle(poiElement.name));arr.push(feature)}}layerVector.getSource().addFeatures(arr);moveTo(layerVector);}// 添加点let addMarker = function (result) {let x = result.location.lon;let y = result.location.lat;let feature = getFeatureByWKT('POINT(' + x + ' ' + y + ')');// 如果有面图形要素，则加载；主要是行政区划的边界。let featurePolygon = result.location.polygon && getFeatureByWKT(result.location.polygon);feature.setStyle(getStyle(result.formatted_address || result.location.keyWord))layerVector.getSource().addFeatures([feature]);featurePolygon && layerVector.getSource().addFeatures([featurePolygon]);moveTo(layerVector);}//显示导航位置let addLine = function (responseData) {// 导航数据为 xml 格式let temp = $(responseData).find('routelatlon').text();// 拼接 wkt 格式while (temp.indexOf(',') != -1) {temp = temp.replace(',', ' ');}while (temp.indexOf(';') != -1) {temp = temp.replace(';', ',');}temp = temp.substring(0, temp.length - 1);temp = 'LINESTRING(' + temp + ')';let feature = getFeatureByWKT(temp);//渐变色线let styleLine = [];let steps = 10;// 渐变色原理，其实就是多个样式共同使用for (let i = 0; i < steps; i++) {styleLine.push(new ol.style.Style({stroke: new ol.style.Stroke({color: [0, 255, 255, 1 / (steps - i)],width: (steps - i) * 2 - 1}),}));}feature.setStyle(styleLine);layerVector.getSource().addFeatures([feature]);moveTo(layerVector);}// 关键字查询列表，根据关键字获取列表数据function searchKeyword() {// 清除上一次叠加对象layerVector && layerVector.getSource().clear();$.ajax({url: 'http://api.tianditu.gov.cn/v2/search',type: 'get',contentType: "application/json;charset=UTF-8", //指定消息请求类型data: {// 注意参数格式postStr: JSON.stringify({// 关键字"keyWord": $('#searchKeywordQuery').val(),// 地图等级，需要设置整数"level": map.getView().getZoom(),// 地图范围"mapBound": map.getView().calculateExtent(map.getSize()).toString(),// 查询类型"queryType": '1',// 分页"start": '0',"count": '10',}),type: 'query',// 请更换自己的 tk，此 tk 只能在当前域名下使用tk: '2b7cbf61123cbe4e9ec6267a87e7442f',},beforeSend: function () {layer.load(2, {shade: [0.5, '#fff'] //0.1透明度的白色背景})},success: function (res, status) {layer.closeAll();res.pois && addMarkerList(res.pois);},});}// 地理编码查询，根据关键字查询坐标function searchName() {// 清除上一次叠加对象layerVector && layerVector.getSource().clear();$.ajax({url: 'http://api.tianditu.gov.cn/geocoder',type: 'get',contentType: "application/json;charset=UTF-8", //指定消息请求类型data: {// 注意参数格式ds: JSON.stringify({// 关键字"keyWord": $('#searchNameQuery').val(),}),type: 'query',// 请更换自己的 tk，此 tk 只能在当前域名下使用tk: '2b7cbf61123cbe4e9ec6267a87e7442f',},beforeSend: function () {layer.load(2, {shade: [0.5, '#fff'] //0.1透明度的白色背景})},success: function (res, status) {layer.closeAll();res = JSON.parse(res);res.location && addMarker(res);},});}// 地理逆编码查询，根据坐标查询名称function searchCoordinate() {// 清除上一次叠加对象layerVector && layerVector.getSource().clear();let coordinates = $('#searchCoordinateQuery').val().split(',');$.ajax({url: 'http://api.tianditu.gov.cn/geocoder',type: 'get',contentType: "application/json;charset=UTF-8", //指定消息请求类型data: {// 注意参数格式postStr: JSON.stringify({// 坐标"lon": coordinates[0],"lat": coordinates[1],"ver": 1}),type: 'geocode',// 请更换自己的 tk，此 tk 只能在当前域名下使用tk: '2b7cbf61123cbe4e9ec6267a87e7442f',},beforeSend: function () {layer.load(2, {shade: [0.5, '#fff'] //0.1透明度的白色背景})},success: function (res, status) {layer.closeAll();res = JSON.parse(res);res.result && addMarker(res.result);},});}// 行政区别，根据关键字查询行政区划信息；包括名称、类型（省市）、范围等function searchGovernment() {// 清除上一次叠加对象layerVector && layerVector.getSource().clear();$.ajax({url: 'http://api.tianditu.gov.cn/administrative',type: 'get',async: false,contentType: "application/json;charset=UTF-8", //指定消息请求类型data: {// 注意参数格式postStr: JSON.stringify({// 关键字"searchWord": $('#searchGovernmentQuery').val(),"searchType": '1',// 子项"needSubInfo": 'false',// 所有属性"needAll": 'false',// 边界属性，好像是不起作用"needPolygon": 'true',"needPre": '10',}),type: 'query',// 请更换自己的 tk，此 tk 只能在当前域名下使用tk: '2b7cbf61123cbe4e9ec6267a87e7442f',},beforeSend: function () {layer.load(2, {shade: [0.5, '#fff'] //0.1透明度的白色背景})},success: function (res, status) {layer.closeAll();if (res && res.data && res.data.length > 0) {// 拼接通用方法参数let location = {};// 坐标location.lon = res.data[0].lnt;location.lat = res.data[0].lat;// 名称location.keyWord = res.data[0].name;// 四至范围location.bound = res.data[0].bound.split(',');// 类型（省市县）location.adminType = res.data[0].adminType;// 拼接矩形（面状图形要素）let polygon = 'POLYGON((' + location.bound[0] + ' ' + location.bound[1] + '' +',' + location.bound[2] + ' ' + location.bound[1] + ',' +'' + location.bound[2] + ' ' + location.bound[3] + ',' +'' + location.bound[0] + ' ' + location.bound[3] + ',' +'' + location.bound[0] + ' ' + location.bound[1] + '))';location.polygon = polygon;res.data[0].location = location;addMarker(res.data[0]);}},});}// 路径规划，根据出发地和目的地获取导航路径function searchRoute() {// 清除上一次叠加对象layerVector && layerVector.getSource().clear();$.ajax({url: 'http://api.tianditu.gov.cn/drive',type: 'get',contentType: "application/json;charset=UTF-8", //指定消息请求类型data: {// 注意参数格式postStr: JSON.stringify({// 出发地"orig": $('#searchRouteQuery1').val(),// 目的地"dest": $('#searchRouteQuery2').val(),"style": '0',"ver": 1}),type: 'search',// 请更换自己的 tk，此 tk 只能在当前域名下使用tk: '2b7cbf61123cbe4e9ec6267a87e7442f',},beforeSend: function () {layer.load(2, {shade: [0.5, '#fff'] //0.1透明度的白色背景})},success: function (res, status) {layer.closeAll();res && addLine(res);},});}</script>
<br/>
<br/>
<input type="text" id="searchKeywordQuery" value="西什库大街" placeholder="请输入地名查询..."/>
<button id="searchKeyword" onClick="searchKeyword()">关键字查询列表</button>
<br/>
<br/>
<input type="text" id="searchNameQuery" value="西什库大街31号院23" placeholder="请输入地名查询..."/>
<button id="searchName" onClick="searchName()">地理编码查询</button>
<br/>
<br/>
<input type="text" id="searchCoordinateQuery" value="116.37304,39.92594" placeholder="请输入 x y 查询..."/>
<button id="searchCoordinate" onClick="searchCoordinate()">地理逆编码查询</button>
<br/>
<br/>
<input type="text" id="searchGovernmentQuery" value="北京市" placeholder="请输入城市名称..."/>
<button id="searchGovernment" onClick="searchGovernment()">行政区别</button>
<br/>
<br/>
<input type="text" id="searchRouteQuery1" value="116.38301126947785,39.91934326306291" placeholder="请输入出发地..."/>
<input type="text" id="searchRouteQuery2" value="116.2813877343216,39.99109771862933" placeholder="请输入目的地..."/>
<button id="searchRoute" onClick="searchRoute()">路径规划</button>
</body>
</html>

在线示例

Openlayers 天地图Web服务：Openlayers-tianditu-web

Openlayers 地名搜索、坐标搜索、行政区划等服务-基于天地图Web服务相关推荐

java web服务_将Java服务公开为Web服务
java web服务本教程解决了开发人员面临的最实际的情况. 大多数时候,我们可能需要将某些现有服务公开为Web服务. 在项目生命周期的不同阶段可能会遇到这种情况. 如果这是初始阶段,那么您几乎是安 ...
将Java服务公开为Web服务
本教程解决了开发人员面临的最实际的情况. 大多数时候,我们可能需要将某些现有服务公开为Web服务. 在项目生命周期的不同阶段可能会遇到这种情况. 如果这是初始阶段,那么您几乎是安全的,您可以为此做好充 ...
[服务计算] 简单 web 服务与客户端开发实战
GitHub: 项目文档: https://github.com/fentender/book-blog-doc 客户端: https://github.com/fentender/book-blog ...
服务计算--简单 web 服务与客户端开发实战
一.概述利用 web 客户端调用远端服务是服务开发本实验的重要内容.其中,要点建立 API First 的开发理念,实现前后端分离,使得团队协作变得更有效率. 任务目标选择合适的 API 风格,实 ...
python 服务框架_Python Web服务高并发框架【1】（Tornado）
本节学习目标: (1)了解Tornado的特点 (2)了解Tornado工作流程 (3)掌握Tornado在Window及Linux中的安装 (4)理解同步.异步 (5)协程基础编程本节课程内容: ...
python web服务框架-Python Web服务高并发框架【1】（Tornado）
本节学习目标: (1)了解Tornado的特点 (2)了解Tornado工作流程 (3)掌握Tornado在Window及Linux中的安装 (4)理解同步.异步 (5)协程基础编程本节课程内容: ...
贵州大学计算机学院杨静,基于遗传算法Web服务组合的一般过程
在以服务为主体的互联网下,单一的服务已经远远不能满足人们的需求.将多个服务组合来满足需求成为研究的重点.文章在研究现有方法的基础上,总结出此类问题的一般思路,并介绍每个环节中的各个方法,而后对各种方法 ...
微信小程序使用高德地图Web服务爬取企业数据
高德地图Api官网:高德开放平台 | 高德地图API 一.高德地图使用说明 "POI2.0" 地点搜索服务2.0是一类Web API接口服务:服务提供多种场景的地点搜索能力,包括关 ...
《国家地理信息公共服务平台“天地图”的关键技术与工程实践》摘
2017年前辈们写的文章,今天读来依然感受颇深,文章介绍了国家天地图的建设背景. 关键技术.建设成果和工作展望,以及国家天地图在维护国家主权.支持政府决策管理和推动地理信息产业发展所做的努力.想想这些 ...

Openlayers 地名搜索、坐标搜索、行政区划等服务-基于天地图Web服务

Openlayers 地名搜索、坐标搜索、行政区划等服务-基于天地图Web服务

OpenLayers 教程

Openlayers 使用天地图Web服务

在线示例

Openlayers 地名搜索、坐标搜索、行政区划等服务-基于天地图Web服务相关推荐

最新文章

热门文章