基于mapbox-gl 开发类似于高德地图的经纬度拾取器
作者：互联网
1.index.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>坐标拾取器</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div id="map"></div>
<div id="geocoder" class="geocoder"></div>
<div id="myPageTop" style="display: block; width: 100%; height: 120px; background: #797373;">
<table id="myLngLat" style="display: block; position: absolute; margin-left: 900px;; top: 10px ;">
<tbody >
<tr>
<td >
<label id="copyLngLatTips" style="color :#f55159;font-size: 16px; ">点击地图，拾取经纬度</label>
</td>
</tr>
<tr>
<td>
<input type="text" id="txtCoordinate" style="font-size: 24px; width:500px; height: 60px;" readonly>
<button type="button" id="copyLngLat" style="font-size: 20px; height: 60px; width: 100px; margin-left: 20px; background-color: #5068f0; color: #fdfdfd; border-width: 0px ;" >复制</button>
</td>
</tr>
</tbody>
</table>
</div>
<!--右下角地图样式切换-->
<div id="style-switcher"></div>
<!--左下鼠标经纬度信息-->
<pre id="mouseCoordinates"></pre>
<!--左下角可移动marker信息-->
<pre id="markerCoordinates" class="markerCoordinates"></pre>
<!--左下角draw的信息-->
<pre id="drawCalculated" class="drawCalculated">
<div id="calculated-area"></div>
</pre>
</body>
</html>2.index.js
import $ from "jquery";
import { basic,basic2,dark,liberty,liberty3d, asia, raster_asia, raster_basic, raster_basic2,raster_liberty, gzimg,gdimg,ygaimg } from './styles.js';
import mapboxgl from 'mapbox-gl';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import { esGeocoder } from './myGeocoder.js';
import * as MapboxFPS from './MapboxFPS.min.js';
import { MapboxStyleSwitcherControl } from "mapbox-gl-style-switcher";
import RulerControl from 'mapbox-gl-controls/lib/ruler';
import * as turf from '@turf/turf';
import * as d3 from 'd3';
import 'mapbox-gl/dist/mapbox-gl.css';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
// import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
// import '../../node_modules/bootstrap/dist/js/bootstrap.min.js';
import '../css/myTheme.css';
var isSupported = require('@mapbox/mapbox-gl-supported')();
mapboxgl.accessToken = 'pk.eyJQ.mMpV7HEFSLA';
if (isSupported){
var map = new mapboxgl.Map({
container: 'map',
style: basic,
center: [113.354, 23.3478], // starting position [lng, lat]
zoom: 9,
maxZoom:22,
antialias:true, //抗锯齿，消耗性能
keyboard:false, // 关闭键盘快捷键
crossSourceCollisions:true, //是否进行跨图层符号的碰撞检测。
hash:true, //显示url的锚
attributionControl:true,
localFontFamily: true // 让中文字体里面的数字和中文对齐 V2.1.1增加的选项
});
} else {
alert("你的浏览器不支持webGL!");
console.log("你的浏览器不支持webGL!");
};
// FPS控件 帧率监控控件
var fpsControl = new MapboxFPS.FPSControl();
map.addControl(fpsControl,'top-right');
// 添加相关的地图控件
map.addControl(new mapboxgl.FullscreenControl(),'top-right');
map.addControl(new mapboxgl.NavigationControl());
const scale = new mapboxgl.ScaleControl({
maxWidth: 80,
unit: 'imperial'
});
map.addControl(scale);
scale.setUnit('metric');
map.addControl(new mapboxgl.AttributionControl({
customAttribution:'@2021 '
}));
// geocoder
const geocoder = new MapboxGeocoder(
{
accessToken: mapboxgl.accessToken ,
minLength:2,
limit:12,
types:'address',
zoom:19,
//localGeocoderOnly:true,
localGeocoder: esGeocoder,
//externalGeocoder: esGeocoder,
collapsed:false,
enableEventLogging:false,
placeholder:'输入关键字 or 经纬度 如 113.258 23.456',
mapboxgl: mapboxgl
}
);
// geocoder.addTo('#geocoder');
// map.addControl(geocoder,'top-left');
// 坐标拾取器专用
document.getElementById('geocoder').appendChild(geocoder.onAdd(map));
// 显示鼠标移动的经纬度
map.on('mousemove', function(e) {
document.getElementById('mouseCoordinates').innerHTML =
// e.point is the x, y coordinates of the mousemove event relative
// JSON.stringify(data) 是将对象转换为JSON字符串，JSON.parse()是把JSON字符串转换一个对象。
JSON.stringify(e.point) +
'<br />' +
// e.lngLat is the longitude, latitude geographical position of the event
JSON.stringify(e.lngLat.wrap());
});
var marker = new mapboxgl.Marker({}).setLngLat([0,0]).addTo(map);
map.on('click',function(e){
console.log('click event has occured at ' + e.lngLat);
marker.setLngLat(e.lngLat);
let x = e.lngLat.lng;
let y = e.lngLat.lat;
document.getElementById('txtCoordinate').value = x + ','+y ;
document.getElementById('copyLngLatTips').innerHTML = '经纬度获取结果：';
document.getElementById('copyLngLatTips').style.color ='#3710c5';
});
$('#copyLngLat').click(function(){
var ccc = document.getElementById('txtCoordinate').select();
document.execCommand("COPY");
document.getElementById('copyLngLatTips').innerHTML = '经纬度复制成功！';
document.getElementById('copyLngLatTips').style.color ='#58ec65';
})
// When a click event occurs on a feature in the places layer, open a popup at the
// location of the feature, with description HTML from its properties.
map.on('click', 'mlp_circle', function(e) {
let coordinates = e.features[0].geometry.coordinates.slice();
let description = '<h1 style="text-align: center">'+'<strong>'+'详情'+'</strong>'+'</h1>' +'<br/>'
+'<h2>'+'<strong>'+'全称：'+'</strong>'+e.features[0].properties.DZQC +'</h2>'
+'<h2>'+'<strong>'+'代码：'+'</strong>'
+'<strong>'+e.features[0].properties.DZDM+'</strong>'+'</h2>'+'<br/>';
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup({maxWidth:'900px'})
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
// Change the cursor to a pointer when the mouse is over the places layer.
map.on('mouseenter', 'mlp_circle', function() {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'mlp_circle', function() {
map.getCanvas().style.cursor = '';
});
3.css样式
body { margin: 0; padding: 0; }
#header {position: absolute;top: 0; width: 100%; height: 0px; background: #666699 }
#map { position: absolute; top: 0px; bottom: 0; width: 100%; }
/***
坐标拾取器专用
***/
.geocoder {
position: absolute;
z-index: 1 ;
width: 30%;
margin-left: 30px;
top: 40px;
}
.mapboxgl-ctrl-geocoder {
min-width: 100%;
}
#map {
margin-top: 120px;
}
标签：map,geocoder,mapbox,mapboxgl,import,gl,高德 来源： https://blog.csdn.net/aganliang/article/details/117633522