OpenLayers技术疑问：‘document’元素究竟是什么？

1. 关于document.getElementById('...')中的document是什么 #

别担心，这个概念其实很好理解：

• document是浏览器DOM（文档对象模型）的根对象，它代表当前加载的整个HTML文档。你可以把它想象成整个网页的"总入口"，所有的HTML元素（比如div、button、input）都是它的子节点。
• getElementById()是document对象提供的方法，作用是根据元素的id属性值，在整个文档里找到对应的DOM元素对象。找到之后你就能对这个元素做各种操作，比如修改它的文本内容、样式，或者绑定事件。

举个简单的例子：
假设你的HTML里有这样一段代码：

<div id="user-info">Hello World</div>

那么用document.getElementById('user-info')就能拿到这个div的DOM对象，之后你可以这样修改它的内容：

const userInfoDiv = document.getElementById('user-info');
userInfoDiv.textContent = 'Hello Stack Overflow!';

2. 加载两个不同GeoJSON文件并放置两类标记的解决方案 #

这个需求在地图开发里很常见，核心思路是分别加载两个GeoJSON数据源，为每个数据源的标记设置不同的样式/图标，再分别添加到地图上。下面我用Leaflet（最常用的开源地图库）举个具体的实现例子：

步骤1：准备两个不同的图标样式（区分两类标记） #

// 第一类标记的图标
const markerIcon1 = L.icon({
    iconUrl: 'marker-red.png', // 替换成你的红色图标路径
    iconSize: [32, 32],
    iconAnchor: [16, 32]
});

// 第二类标记的图标
const markerIcon2 = L.icon({
    iconUrl: 'marker-blue.png', // 替换成你的蓝色图标路径
    iconSize: [32, 32],
    iconAnchor: [16, 32]
});

步骤2：分别加载并解析两个GeoJSON文件 #

我们用fetch API来异步加载文件，然后创建GeoJSON图层：

// 加载第一个GeoJSON文件，使用第一类图标
fetch('first-layer.geojson')
    .then(response => response.json())
    .then(data => {
        L.geoJSON(data, {
            // 自定义标记样式
            pointToLayer: function (feature, latlng) {
                return L.marker(latlng, {icon: markerIcon1});
            }
        }).addTo(map); // map是你初始化的地图对象
    })
    .catch(error => console.error('加载第一个GeoJSON失败:', error));

// 加载第二个GeoJSON文件，使用第二类图标
fetch('second-layer.geojson')
    .then(response => response.json())
    .then(data => {
        L.geoJSON(data, {
            pointToLayer: function (feature, latlng) {
                return L.marker(latlng, {icon: markerIcon2});
            }
        }).addTo(map);
    })
    .catch(error => console.error('加载第二个GeoJSON失败:', error));

关键说明 #

• 如果你的GeoJSON里不仅有点标记，还有线或面，也可以通过style属性来设置不同的样式，比如不同颜色的线条或填充色。
• 如果你用的是Mapbox GL JS，思路类似：分别加载两个GeoJSON源，然后创建两个不同的图层，指定不同的icon-image或者样式属性即可。

内容的提问来源于stack exchange，提问作者Adrien