gis格网索引示例的html代码
时间: 2023-12-29 15:05:13 浏览: 25
以下是一个简单的 GIS 格网索引示例的 HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>GIS Grid Index Example</title>
<style type="text/css">
#map {
height: 500px;
width: 100%;
}
.grid {
stroke: black;
fill: none;
stroke-width: 1px;
}
.grid-label {
font-family: Arial;
font-size: 12px;
fill: black;
}
</style>
</head>
<body>
<h1>GIS Grid Index Example</h1>
<div id="map"></div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
// Define map size and margin
var margin = {top: 50, right: 50, bottom: 50, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// Define grid properties
var gridWidth = 100,
gridHeight = 100;
// Define projection
var projection = d3.geoMercator()
.center([0, 0])
.scale(100)
.translate([width / 2, height / 2]);
// Define path generator
var path = d3.geoPath()
.projection(projection);
// Create SVG element
var svg = d3.select("#map")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Create grid lines
var gridLines = svg.selectAll(".grid")
.data(d3.range(-180, 180, gridWidth))
.enter()
.append("path")
.attr("class", "grid")
.attr("d", function(d) {
return "M" + projection([d, -90])[0] + "," + projection([d, -90])[1] +
"L" + projection([d, 90])[0] + "," + projection([d, 90])[1];
});
gridLines = svg.selectAll(".grid")
.data(d3.range(-90, 90, gridHeight))
.enter()
.append("path")
.attr("class", "grid")
.attr("d", function(d) {
return "M" + projection([-180, d])[0] + "," + projection([-180, d])[1] +
"L" + projection([180, d])[0] + "," + projection([180, d])[1];
});
// Create grid labels
var gridLabels = svg.selectAll(".grid-label")
.data(d3.range(-180, 180, gridWidth))
.enter()
.append("text")
.attr("class", "grid-label")
.attr("x", function(d) { return projection([d, 0])[0]; })
.attr("y", function(d) { return projection([0, -90])[1]; })
.text(function(d) { return d + "°"; });
gridLabels = svg.selectAll(".grid-label")
.data(d3.range(-90, 90, gridHeight))
.enter()
.append("text")
.attr("class", "grid-label")
.attr("x", function(d) { return projection([-180, d])[0]; })
.attr("y", function(d) { return projection([0, d])[1]; })
.text(function(d) { return d + "°"; });
</script>
</body>
</html>
```
这个示例使用 D3.js 库来生成地图和格网索引。它创建了一个 SVG 元素,并在其中绘制了水平和垂直的网格线,以及相应的标签。请注意,这只是一个示例,实际的 GIS 格网索引可能需要更复杂的设计和功能。