openlayer 高德地图实时路况

编程入门 行业动态 更新时间:2024-10-08 13:28:36

openlayer 高德地图实时<a href=https://www.elefans.com/category/jswz/34/1757634.html style=路况"/>

openlayer 高德地图实时路况

使用openlayer加载高德地图实时路况

 

效果

 完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>openlayer加载天地图个种地图</title><style>.map {width: 100%;height: 500px;}a.skiplink {position: absolute;clip: rect(1px, 1px, 1px, 1px);padding: 0;border: 0;height: 1px;width: 1px;overflow: hidden;}a.skiplink:focus {clip: auto;height: auto;width: auto;background-color: #fff;padding: 0.3em;}#map:focus {outline: #4A74A8 solid 0.15em;}</style><link rel="stylesheet" href="../../../lib/openlayerv6.4.3/css/ol.css"><script src="../../../lib/openlayerv6.4.3/build/ol.js"></script></head>
<script>var map;function init() {var center = ol.proj.transform([112.73, 23.42], "EPSG:4326", "EPSG:3857");var gaodeLayer = new ol.layer.Tile({source: new ol.source.XYZ({//url: 'https://wprd0{1-4}.is.autonavi/appmaptile?x={x}&y={y}&z={z}&size=1&scl=1&style=8&ltype=11'url: 'https://webst0{1-4}.is.autonavi/appmaptile?style=6&x={x}&y={y}&z={z}'//url: '=6a3b921d2d6ef609207d5f8679153b71&x={x}&y={y}&z={z}'})});var view = new ol.View({//center: [113, 23],//设置地图默认中心点center: center,//projection: 'EPSG:3857',//坐标系zoom: 10//默认缩放级别});map = new ol.Map({layers: [gaodeLayer],target: 'map',view: view});}function addlayer() {var url = "=1.0&t=1&zoom=4&x=6672&y=3554"//url = "=1.0&t=1&zoom={z}&x={x}&y={y}"var gaodeLayer = new ol.layer.Tile({source: new ol.source.XYZ({//url: 'https://webst0{1-4}.is.autonavi/appmaptile?style=6&x={x}&y={y}&z={z}'//url: urltileUrlFunction: function(coordinate) {var x=coordinate[1];var y=coordinate[2];var z=coordinate[0];var url = "=1.0&t=1&zoom=4&x=6672&y=3554"var a = '=1.0&t=1&zoom=' + (17 - z) + '&x=' + x + '&y=' + y;return a;}})});map.addLayer(gaodeLayer);}</script>
<body οnlοad="init()">
<div id="map" class="map"></div>
<button οnclick="addlayer()">高德地图</button>
</body>
</html>

更多推荐

openlayer 高德地图实时路况

本文发布于:2024-02-13 08:33:57,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1757461.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:路况   实时   地图   openlayer

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!