Openlayers_地名搜索、坐标搜索、行政区划等服务!寻图标网破解

抖店动销抖店体验分提升抖店任何业务可添加微信:ad07668

Openlayers教程天地图作为广大GISer使用频繁的服务之一,除了应用众多的底图服务(影像、地形、矢量),还有很多Web服务接口。比如:地名搜索、地理编码查询、地理逆编码查询、行政区划、路径公交规划等,可以根据项目的实际需求调用接口。本文介绍在前端使用ajax发起请求,获取天地图服务数据,并且在地图渲染。包括:地名搜索(获取列表)、地理编码查询(地名查询坐标)、地理逆编码查询(坐标查询

Openlayers 教程

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

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

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

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

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

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

Openlayers_地名搜索、坐标搜索、行政区划等服务!寻图标网破解


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