抖店动销,抖店体验分提升。抖店任何业务可添加微信:ad07668
Openlayers教程天地图作为广大GISer使用频繁的服务之一,除了应用众多的底图服务(影像、地形、矢量),还有很多Web服务接口。比如:地名搜索、地理编码查询、地理逆编码查询、行政区划、路径公交规划等,可以根据项目的实际需求调用接口。本文介绍在前端使用ajax发起请求,获取天地图服务数据,并且在地图渲染。包括:地名搜索(获取列表)、地理编码查询(地名查询坐标)、地理逆编码查询(坐标查询
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', //图标的url src: "http://api.tianditu.gov.cn/v4.0/image/marker-icon.png", //图标比例, 0.5 大概是25*34 scale: 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 example
抖店动销,抖店体验分提升。抖店任何业务可添加微信:ad07668
本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 sumchina520@foxmail.com 举报,一经查实,本站将立刻删除。
如若转载,请注明出处:https://www.zg8899.cn/26409.html
如若转载,请注明出处:https://www.zg8899.cn/26409.html