基于mapbox-gl 开发类似于高德地图的经纬度拾取器

2021/6/6 18:52:39

编程Tag： 高德 import Map MapBox gl mapboxgl geocoder

本文主要是介绍基于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;
}

这篇关于基于mapbox-gl 开发类似于高德地图的经纬度拾取器的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

基于mapbox-gl 开发类似于高德地图的经纬度拾取器

相关编程文章