地图
关注
分享
扫一扫
文章平均质量分 51
lihefei_coder
这个作者很懒，什么都没留下…
展开
-
自定义地图底图制作思路
第一步：准备业务底图（一般是客户提供的航拍图、CAD图纸、其他平面图）第二步：将业务底图对应区域的地图底图（如百度、天地图路图）截图（地图放大层级根据业务底图的分辨率判断，找最接近的层级截图），然后用PS拼接好。拼接好的地图底图：第三步：将地图底图和业务底图放在PS同一个画布，然后处理业务底图，使大小、方向、线路与地图底图对齐吻合调整原始图与地图底图齐（可用画笔画一些红色参考线，方便参考对齐）调整完成后的图第四步：百度坐标切图示例：BaiduMapTileCutter切百度地图瓦片W原创 2022-02-22 12:33:33 · 1536 阅读 · 0 评论 -
BaiduMapTileCutter切百度地图瓦片
准备工作1.安装好MapTiler Desktop切图工具2.准备好要切的图片3.获取图片中心点在地图上对应的经度和纬度值获取方式：先将百度地图底图与业务底图放在PS同一个画布，然后拉参考线标出中心点再将业务底图隐藏，可以看到标记的点在地图的位置然后打开百度地图拾取坐标系统在地图上找到标记的位置，点击获取经纬度（例子：116.403263,39.92455）设置切图参数1.打开BaiduMapTileCutter软件，选择业务底图文件，然后跟着下一步操作2.将之前复制的经纬度原创 2022-02-22 12:31:24 · 2716 阅读 · 1 评论 -
Leaflet地图标记旋转角度、线条方向箭头示例
标记旋转角度<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />原创 2021-11-03 11:12:37 · 2556 阅读 · 0 评论 -
MapTiler Desktop切leaflet地图瓦片
准备工作1.安装好MapTiler Desktop切图工具2.准备好要切的图片3.获取图片三个角（左上角、右上角、右下角）在地图上对应的经度和纬度共六个值，记录备用格式：左上角经度 左上角纬度 右上角经度 右上角纬度 右下角经度 右下角纬度例子：116.385340 39.921487 116.396348 39.921487 116.396348 39.911299注：获取方式可自行百度，如通过在线地图坐标拾取系统获取、地图工具获取等设置切图参数1.打开MapTiler Deskto原创 2021-08-17 17:49:31 · 2724 阅读 · 1 评论 -
Leaflet地图加载百度底图
源代码<!DOCTYPE html><html style="padding:0;margin:0;"><head><meta charset="utf-8"/><title></title><link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css"><script src="http.原创 2021-08-11 16:33:18 · 919 阅读 · 0 评论 -
Leaflet地图基础示例
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <.原创 2021-08-11 15:59:22 · 1858 阅读 · 0 评论 -
计算两个经纬度坐标点之间的距离
/** * 计算两个经纬度坐标点之间的距离 * @param {object} lnglatA 起点坐标点 * @param {object} lnglatB 终点坐标点 * @return {number} 计算后得出两点之间的距离 */function getDistance(lnglatA, lnglatB) { var radLat1 = getRad(lnglatA.lat); var radLat2 = getRad(lnglatB.lat); var a原创 2021-06-07 18:07:32 · 1023 阅读 · 0 评论 -
两个经纬度之间补点
先调用百度的API计算2个点之间的距离,再根据拆分后每个点的距离(如20),计算这2个点之间有多少个点,设为n,再后一个点减去前一个点计算2个点的经纬度差,再用经度和纬度去除以n计算出每段经度和纬度的数据,然后就根据n进行循环,在第一个点的基础上加上经纬度差*n,大概就这样...原创 2021-06-07 17:54:55 · 3094 阅读 · 2 评论 -
经纬度坐标小数位与精度的对应关系
小数点后位数 精度(约等于) 第1位 10000米 第2位 1000米 第3位 100米 第4位 ...原创 2021-05-31 16:20:59 · 38087 阅读 · 1 评论 -
地图坐标系
坐标系代号 中文名称 地图引擎 WGS-84 地心坐标系，GPS原始坐标体系 谷歌地图、微软bing地图、leaflet(可转) GCJ-02 国测局坐标，火星坐标系 高德地...原创 2021-05-27 12:28:57 · 242 阅读 · 0 评论 -
Leaflet使用Nginx代理，实现内网访问外网百度地图瓦片
解决思路：1.在瓦片地址前加上内网ip和端口2.在可同时访问内网和外网的机器上部署nginx3.通过nginx监听内网端口，把瓦片的请求转发到外网地图页面<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Leaflet使用Nginx代理实现内网访问百度地图瓦片</title><link rel="stylesheet" href="js/leaf原创 2021-04-01 15:10:56 · 1235 阅读 · 0 评论 -
地图瓦片服务地址
高德http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}Leaflethttp://{s}.tile.osm.org/{z}/{x}/{y}.png百度http://online{s}.map.bdimg.com/onlinelabel/?qt=tile&x={x}&y={y}&z={z原创 2021-03-30 14:17:17 · 2279 阅读 · 2 评论 -
百度地图缩放或拖拽时多边形覆盖物消失问题
问题产生的原因使用的point点不是通过使用new BMap.point()实例化出来的，所以会导致覆盖物忽隐忽现的情况产生测试代码提示：示例里需要加上自己的百度地图key才能正常显示<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="v原创 2020-08-05 17:12:27 · 1981 阅读 · 0 评论 -
百度地图自定义地图类型瓦片底图
提示：请使用自己申请的《百度地图key》替换代码中的《此处使用你自己的key》<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>自定义地图类型瓦片</title> <style> html, body { heig.原创 2020-07-16 16:53:40 · 3676 阅读 · 1 评论 -
百度地图突破19级缩放限制解决方案
百度地图默认最大缩放级别为19级，但在某些场景中需要结合自定义贴图实现更高级别的视图通过下面这种方式就能自定义最大最小缩放层级提示：请使用自己申请的《百度地图key》替换代码中的《此处使用你自己的key》<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>百度地图突破19级缩放限制</title> <原创 2020-07-16 15:49:41 · 6336 阅读 · 10 评论 -
获取一组坐标的中心点
/** * 获取一组坐标的中心点 * @param {Array} points 坐标集合 * @returns {Object} 中心点 */function getCenter(points = []) { let point = { lat: 0, lng: 0 }; if (points.length) { ...原创 2020-03-20 20:16:08 · 4530 阅读 · 2 评论 -
通过角度计算方向
/** * 通过角度计算方向 * @param {Number} angle 角度(0~359) * @returns {String} 方向 */function angle2direction(angle) { let str = ''; if (!Number.isNaN(angle)) { angle = angle < 0 ? 0 : a...原创 2019-12-09 09:40:51 · 4138 阅读 · 0 评论 -
计算两个经纬度坐标点之间的角度
/** * 计算两个坐标点的角度 * @param {Object} firstPoint 第一个经纬度坐标点 * @param {Object} nextPoint 下一个经纬度坐标点 * @returns {Number} 角度值 */function getAngle(firstPoint, nextPoint) { if (!(firstPoint &&...原创 2019-12-06 17:57:55 · 7566 阅读 · 0 评论 -
百度地图级别与比例尺对照表
级别 比例尺 23级 1m 22级 2m 21级 5m 20级 10m 19级 20m 18级 50m 17级 100m 16级 200m 15级 500m 14级 1km 13级 2km 12级 5km 11级 10km...原创 2019-12-04 14:26:53 · 12498 阅读 · 0 评论 -
百度地图常用API
<style>body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}</style><div id="map"></div><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的原创 2017-01-13 10:36:59 · 1144 阅读 · 0 评论 -
谷歌地图常用API
style>body, html,#map {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}style>div id="map">div>script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥原创 2017-02-09 13:37:09 · 4625 阅读 · 2 评论 -
百度地图创建自定义覆盖物
<!doctype html><html><head><meta charset="utf-8"><title>百度地图自定义覆盖物</title><style type="text/css" media="screen">body,html,#mapContainer{ width: 100%; height: 100%; overflow: hidden;原创 2017-08-02 22:13:22 · 2375 阅读 · 0 评论 -
百度地图可视区域随标记点位置自动切换
注：为保证demo正常运行，需要在下面代码这一行&amp;amp;lt;script src=”http://api.map.baidu.com/api?v=2.0&amp;amp;amp;ak=你的key“&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt;填写有效的key&amp;amp;lt;!doctype html&amp;amp;gt;&am原创 2018-04-17 13:56:01 · 2400 阅读 · 4 评论 -
vue百度地图自定义标记图标
由于vue的路由机制，导致通过传参写的相对位置的图片资源时并不能被正常获取，需要通过import的方式导入资源import iconCar from '../assets/images/deviceIcon/car.png'; //以import的方式导入图片文件const map = new BMap.Map("Map");const point = new BMap.Point...原创 2018-09-04 09:47:25 · 12943 阅读 · 1 评论 -
百度地图 多个标记点设置最佳视角
const points = [point1, point2, point3, point4, point5]; //一组坐标点const view = map.getViewport(points); //获取最佳视角const zoom = view.zoom; //获取最佳视角的缩放层级const centerPoint = view.center; //获取最佳视角的中心点...原创 2018-09-10 12:59:07 · 2322 阅读 · 0 评论 -
GPS、谷歌、百度坐标系互相转换
var GPS = { PI : 3.14159265358979324, x_pi : 3.14159265358979324 * 3000.0 / 180.0, delta : function (lat, lng) { // Krasovsky 1940 // // a = 6378245.0, 1/f = 298.3...转载 2018-09-25 11:27:42 · 11069 阅读 · 0 评论 -
H5调用百度、高德导航
拾取百度坐标点http://api.map.baidu.com/lbsapi/getpoint/index.html调用高德导航链接<a href="https://uri.amap.com/marker?position=经度,纬度&name=所在的位置名称">高德地图</a>调用百度导航链接<a href="http://api.map.bai...原创 2018-11-29 20:41:35 · 4065 阅读 · 0 评论 -
经纬度
经度取值：-180°~180°0°~180°（东经 标注E）-180°~0°（西经 标注W）纬度取值：-90°~90°0°~90°（北纬 标注N）-90°~0°（南纬 标注S）原创 2019-02-14 18:52:21 · 5408 阅读 · 0 评论 -
计算地图经纬点之间的距离
&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;计算经纬点之间的距离&lt;/title&gt; &lt;st原创 2019-02-13 18:13:55 · 1846 阅读 · 0 评论 -
禁用地图默认点击弹框
百度地图var map = new BMap.Map(“allmap”, { enableMapClick: false //取消默认窗口});高德地图dialog = new AMap.InfoWindow({ content : content, isCustom: true, //使用自定义窗体 offset : offset});...原创 2019-05-07 13:34:46 · 2057 阅读 · 0 评论 -
百度地图设置圆形覆盖物最佳视角
在百度地图中可以根据一组坐标点设置地图的最佳视角，但是针对只有一个中心点坐标的圆形覆盖物却没有提供设置最佳视角的API方法，只能自己另外实现，实现思路是根据圆形遮盖物的直径算出对应的地图缩放层级。下面的表格是每个层级对应的距离比例，从最高层往下推可以得出的规律是每下一级对应的比列大约是上一级的两倍，例：18级≈19级x217级=18级x216级=17级x215级≈16级x214级=15...原创 2019-09-19 09:58:59 · 1192 阅读 · 0 评论 -
Google Map Event 谷歌地图事件
var map = new google.maps.Map(document.getElementById("map"), { center: new google.maps.LatLng(39.915, 116.404), zoom: 10});//地图绑定事件示例google.maps.event.addListener(map,"click",function(even原创 2017-06-28 11:06:29 · 7878 阅读 · 0 评论