由GeoJson格式渲染地图

最新推荐文章于 2024-03-18 08:08:50 发布

VIP文章骑码找马

最新推荐文章于 2024-03-18 08:08:50 发布

阅读量1.5k

点赞数

文章标签：由GeoJson格式渲染地图

本文链接：https://blog.csdn.net/weixin_42034217/article/details/97272273

版权

<!DOCTYPE html>
<html>

<head>

	<title>Quick Start - Leaflet</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

	<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
		integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
		crossorigin="" />
	<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
		integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
		crossorigin=""></script>

	<link rel="stylesheet" href="css/MarkerCluster.css" />
	<link rel="stylesheet" href="css/MarkerCluster.Default.css" />
	<script src="js/leaflet.markercluster.js"></script>
	<script src="js/turf.min.js"></script>

</head>

<body>



	<div id="mapid" style="width: 1200px; height: 600px;"></div>
	<script>

		var mymap = L.map('mapid').setView([39.74621,-104.98404], 12);

		L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
			maxZoom: 18,
			attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
				'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
				'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
			id: 'mapbox.streets'
		}).addTo(mymap);

		//设置样式
		 var myStyle = {
					"color": "#00f",
					"weight": 3,
					"opacity": 0.5,

		 };

	     //geojson数据
				var someFeatures = [ 
				
		{
			"type": "Feature",
			"properties": {
				"

最低0.47元/天解锁文章

骑码找马

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
由GeoJson格式渲染地图

<!DOCTYPE html><html><head> <title>Quick Start - Leaflet</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-sca...
复制链接

扫一扫