地图相关:MAPBOX+GOOGLEMAP+高德MAP
文章平均质量分 55
地图相关操作
汪 同 学 丶
这个作者很懒,什么都没留下…
展开
-
记录:谷歌地图google map 层行列号和坐标间的转换
1、左上角为原点 /** * 谷歌下转换经纬度对应的层行列 * @param lon 经度 * @param lat 维度 * @param zoom 在第zoom层进行转换 * @return */ public static int[] GoogleLonLatToXYZ(double lon, double lat, int zoom) { double n = Math.pow(2, zoom);原创 2020-05-26 16:33:12 · 903 阅读 · 1 评论 -
记录:GoogleMap 谷歌地图经纬度转屏幕坐标z,y,偏移量
谷歌地图经纬度转坐标1、函数:LatLng2Pixel (latLng) { // 经纬度转屏幕坐标xy let scale = Math.pow(2, this.maps.getZoom()) let proj = this.maps.getProjection() let bounds = this.maps.getBounds() let nw = proj.fro...原创 2019-04-26 19:10:28 · 1943 阅读 · 0 评论 -
记录:google map叠加自定义地图类型(wms\wmts服务)
谷歌地图加载服务1、const wmsMapType = new window.google.maps.ImageMapType({ maxZoom: 18, minZoom: 7, name: 'TianDiTu', tileSize: new window.google.maps.Size(256, 256), isPng: true, get...原创 2019-07-10 10:44:34 · 1937 阅读 · 0 评论 -
记录:谷歌地图api缩放去掉ctrl+滚轮缩放,直接鼠标缩放
问题:地图所在的页面有滚动条,然后在地图上缩放的时候会默认触发CTRL+解决:初始化地图加上配置:gestureHandling: 'greedy'备注:转载其他作者转载 2019-07-26 14:38:42 · 776 阅读 · 0 评论 -
记录:google map谷歌地图自定义叠加层overlay流程
Google Map自定义叠加层的实现1、触发:// 返回结果的数组,拿到有效的值存进数组let newArr = res.filter((item) => { return item.list.length !== 0})/*[{ id: 110 latitude: 32.838939245 list: Array(1) longitude: 108.6443634...原创 2019-04-25 19:08:17 · 3097 阅读 · 3 评论 -
记录:谷歌地图api v3 marker使用gif 动态icon不变化的问题
let icon = { url: 'http://www.dabaoku.com/gif/170/gif001.gif', // 20px x 20px icon anchor: new window.google.maps.Point(20, 20) // anchor is in the center at 10px x 10px}let marker = new window.go...原创 2019-09-06 19:22:54 · 667 阅读 · 0 评论 -
记录:谷歌地图google map api实现基本测距功能
测距demo-代码<!DOCTYPE html><eteral:html> <head> <meta name="viewport" content="initial-scale=1.0"> <meta charset="utf-8"> <title></title> &...原创 2019-08-30 11:07:03 · 3062 阅读 · 0 评论 -
记录:百度地图API BMap实现fitBounds的效果
基于百度API:1、getViewport:根据提供的地理区域或坐标获得最佳的地图视野,返回的对象中包含center和zoom属性,分别表示地图的中心点和级别。此方法仅返回视野信息,不会将新的中心点和级别做用到当前地图上2、centerAndZoom:设初始化地图。 如果center类型为Point时,zoom必须赋值,范围3-19级,若调用高清底图(针对移动端开发)时,zoom可赋值范围...原创 2020-04-16 12:28:59 · 1052 阅读 · 0 评论 -
记录:mapboxgljs 绘制风圈半径
概述由于工作需要使用mapboxgl实现绘制风圈半径,所以在csdn找了下该实现该功能的逻辑代码,当前文章只做备份记录工后续翻阅。效果实现1、前置引入1、引入mapboxgljs:https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.js2、涌入mapboxglcss:https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css3、引入proj4js(用于坐标转换)原创 2021-10-08 16:00:20 · 412 阅读 · 0 评论 -
记录:使用echarts压缩geojson的方式压缩Polygon、MultiPolygon、MultiLineString三种格式的geojson数据
注意:以下提供的压缩、下载、解码、使用的方式只支持 Polygon、MultiPolygon、MultiLineString三种geojson格式的数据一、压缩geojson数据并将压缩后的数据下载到本地步骤一:压缩创建encodeGeojson.js(压缩geojson数据的逻辑代码)// geojson格式数据export function convert2Echarts (json) { let results = '' json.UTF8Encoding = true le.原创 2021-05-25 14:09:22 · 2459 阅读 · 5 评论 -
记录:mapbox小工具(wrap、renderWorldCopies、setMaxBounds)
wrap经纬度转换工具说明:将不在-180到180范围内的经纬度转换成这个范围内的经纬度的工具使用:const ll = new mapboxgl.LngLat(801.32673070615658, 25.306316157548977);const wrapped = ll.wrap();console.log(wrapped.lng)来源:中文官网renderWorldCopies说明:当map.options.renderWorldCopies设置为true时,展示多屏地图原创 2021-03-05 16:49:42 · 697 阅读 · 0 评论 -
记录:基于mapbox自定义canvas实现canvas叠加图片icon实现icon动画旋转(gif效果)
const gifImage= { width: 40, height: 40, data: new Uint8Array(size * size * 4), onAdd: function () { const canvas = document.createElement('canvas') canvas.width = this.width ...原创 2020-03-19 22:05:03 · 2795 阅读 · 3 评论