Cesium 融合高德Web API 线路规划与导航

<!--* @Author: 苹果园dog* @Date: 2020-11-13 14:48:40* @LastEditTime: 2020-11-18 10:26:31* @LastEditors: Please set LastEditors* @Description: In User Settings Edit* @FilePath: \web\cesiumS\cesium\cesium\mytest\高德2.html--><!doctype html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"><title>2</title>html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}#container {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}.testtool {position: absolute;top: 75px;left: 100px;background: gray;}</style></head><body><div id="cesiumContainer"></div><div class="info"><div class="input-item"><div class="input-item-prepend"><span class="input-item-text" style="width:8rem;">请输入关键字</span></div><input id='tipinput' type="text"></div><div class="input-item"><div class="input-item-prepend"><span class="input-item-text" style="width:8rem;">请输入关键字</span></div><input id='tipinput2' type="text"></div><button id="btncallapp" onclick="beginGuide()">开始导航</button></div><script type="text/javascript">let isPC = isThePC();//是PC端网页打开let isAndroid = isTheAndroid();//是移动端网页打开var viewer = init3D("cesiumContainer");var scene = viewer.scene;let coord1 = null;//起始坐标let coord2 = null;//终点坐标let input1 = document.getElementById('tipinput');let input2 = document.getElementById('tipinput2');let startPoiName = '';//起始点名称let endPoiName = '';//终点名称AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {//搜索POI地址，和下面的代码可以合并var autoOptions = {input: 'tipinput'}var autoComplete = new AMap.Autocomplete(autoOptions);var placeSearch = new AMap.PlaceSearch({city: '41',pageSize: 1,pageIndex: 1,});placeSearch.search('河南省', function (status, result) {});AMap.event.addListener(autoComplete, "select", function (e) {startPoiName = e.poi.name;placeSearch.search(e.poi.name, function (status, result) {console.log("e.poi.name", e.poi.name);console.log("result", result);let lng = result.poiList.pois[0].location.lng;let lat = result.poiList.pois[0].location.lat;let coord1WGS84 = coordadd.gcj02towgs84(lng, lat);coord1 = [lng, lat];cesiumUtil.removeEntitiesByName('daohangbill1');cesiumUtil.addBillBordAirLive('daohangbill1', coord1WGS84[0], coord1WGS84[1], 0, 1, 0, 'http://ip:8083/cesium148/mytestcesium/billbords/weizhi.png', '起点', null, null, null);doWork();});});});AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {//搜索POI地址，和上面的代码可以合并var autoOptions = {input: 'tipinput2'}var autoComplete = new AMap.Autocomplete(autoOptions);var placeSearch = new AMap.PlaceSearch({city: '41',pageSize: 1,pageIndex: 1,});placeSearch.search('河南省', function (status, result) {});AMap.event.addListener(autoComplete, "select", function (e) {endPoiName = e.poi.name;placeSearch.search(e.poi.name, function (status, result) {console.log("e.poi.name", e.poi.name);console.log("result", result);let lng = result.poiList.pois[0].location.lng;let lat = result.poiList.pois[0].location.lat;let coord2WGS84 = coordadd.gcj02towgs84(lng, lat);coord2 = [lng, lat];cesiumUtil.removeEntitiesByName('daohangbill2');cesiumUtil.addBillBordAirLive('daohangbill2', coord2WGS84[0], coord2WGS84[1], 0, 1, 0, 'http://ip:8083/cesium148/mytestcesium/billbords/weizhi.png', '终点', null, null, null);doWork();});});})function doWork() {//确定起止点后干的事情,划线，导航等。            getRoute(RouteType.driving, (result) => {if (!result) {return;}console.log(result);let paths = result.paths[0].steps;let positions = [];for (let index = 0; index < paths.length; index++) {const path = paths[index];let polyline = path.polyline;let polylinePoints = polyline.split(/[,]|;/);positions = positions.concat(polylinePoints);}positions = positions.map(Number);let positionsWGS84 = [];for (let index = 0; index < positions.length - 1; index += 2) {const pos = positions[index];const pos2 = positions[index + 1];let coordWGS84 = coordadd.gcj02towgs84(pos, pos2);positionsWGS84 = positionsWGS84.concat(coordWGS84);}cesiumUtil.removeEntitiesByName('daohangline');var greenLine = viewer.entities.add({//加载线路到三维球name: "daohangline",polyline: {positions: Cesium.Cartesian3.fromDegreesArray(positionsWGS84),width: 6,material: Cesium.Color.GREEN,clampToGround: true,},});viewer.flyTo(greenLine);});}//调用高德webAPI查询规划线路，这里头有详细信息，界面上后期可以丰富一下，详细行走路径，时间等。function getRoute(type, callback) {if (input1.value && input2.value) {if (!type) {type = '';}let origin = coord1.toString();let destination = coord2.toString();$.ajax({url: 'https://restapi.amap.com/v3/direction/' + type,dataType: "json",async: true,data: {origin: origin,destination: destination,key: 'e71dcsdc024859f4cfb328a60cb75a03b'},success: function (data) {if (data.status < 1) {callback(null);} else {callback(data.route);}},error: function () {callback(null);}});}}

Cesium 融合高德Web API 线路规划与导航相关推荐

Android开发之高德API篇：2、高德API线路规划
TIME:2020年7月6日 2.高德API线路规划----步行线路规划前言: step1 工程配置 step2 整体实现过程 step3 具体实现过程总结附上源码前言: 该篇博客主要是介绍高 ...
Android 高德地图自定义线路规划选择方案之后按照方案进行导航
Android 高德地图自定义线路规划选择方案之后按照方案进行导航因为我这边导航需求的问题,导致我这边不能使用高德地图官方的线路规划和导航.所以我这边线路规划和导航界面都是根据高德地图那边给的api ...
高德地图API路径规划结果清除
关于高德地图API之路径规划结果的清除(js API) 偶然用到高德地图API做路径规划,在做的过程中发现连续进行不同的路径规划产生的结果是叠加的.如何清除上一次的路径规划呢?开发手册上有一个 cle ...
高德地图API路线规划
高德地图API基础使用高德地图API体验申请Key 初体验添加插件点击事件返回地址值两点之间获取驾车导航路线高德地图API体验申请Key 申请高德地图账号登录后,应用管理下创建自己的应 ...
JSAPI 高德地图应用--线路规划、多条线路同时展示
在地图应用中,常见的应用之一应该就有查询两个地方的线路规划吧,高德地图提供了驾车路线规划.货车路线规划.公车换乘服务.步行导航服务.骑行路径规划服务等,这里我用的是驾车路线规划做一个列子. 驾车路线规 ...
基于Leaflet和高德Web API扩展地理编码服务
需求背景: 需求很简单就是想调用高德地图的地理编码服务,单独扩展一个类出来. 参考地址: Leaflet类扩展:https://leafletjs.com/examples/extending/ext ...
基于高德地图api,vue实现步行导航
vue代码 <template><div><van-nav-bartitle="导航"left-text="返回"left-arr ...
android高德地图设置经纬度,安卓高德地图开发自定义线路规划(按着自己定义的经纬度规划线路)...
[实例简介] 自定义地图的线路规划问题,代码可以直接的借用,方便大家学习 [实例截图] [核心代码] (YN)安卓高德地图自定义线路规划(按着指定的经纬度规划线路) └── YnGaoDeThreeM ...
通过高德地图API获得某条道路上的所有坐标用于描绘道路
产品提出的一个需求是, 通过道路名字, 把道路描绘出来. 这功能在各大地图上都是可以看到的, 所以他们觉得做出来也很简单. 但是百度地图本身是没有任何接口可以查询这个信息. 网上能找到的方法, 无非都 ...

Cesium 融合高德Web API 线路规划与导航

Cesium 融合高德Web API 线路规划与导航相关推荐

最新文章

热门文章