Pewae | 破袜子的 RSS 预览

【去过】页面上线

2025-09-12 09:40:36

最终效果见这里。

我这个人既不喜欢旅游，也不喜欢摄影，没出过国也没在国内溜达过几个地方，但这并不妨碍我也有一颗上线足迹地图的心。无奈谷歌地图连不上，百度地图不想连，OSM（OpenStreetMap）既连不上也连不明白，就搁置了。
直到上周，@Dayu上线了他的地图插件，试用之后发现表现形式与期待值有差距，想在帖子下面留言发建议的时候，发现了明明同学的另一份方案。虽然主要是js实现的，只需要知道leaflet这个开源库的名字，我就知道以Wordpress的海量扩展，这回成了！

找到了一个插件和插件的插件，配置之后，算是达到了心目中的效果。
插件使用比较复杂，这里记录一下，给自己个备忘，能帮到人更好。

插件Leaflet Map的配置

插件地址：Leaflet Map。
逐一说明一下后台的配置项：
Default Latitude：
地图默认纬度
Default Longitude：
地图默认经度
Default Zoom：
地图默认缩放比
Default Height：
默认高度
Default Width：
默认宽度
上面五个值可以以短代码参数的形式加到leaflet-map中，如果不加则使用后台的默认参。

Fit Bounds：
是否令地图随标记点的范围进行缩放。如果为true，那么地图会自动计算当前所有Marker的中心位置，以及包括所有Marker点的合适的缩放比。可以用默认值，也可以在map中单独设置。

Show Zoom Controls：
是否显示缩放按钮

Scroll Wheel Zoom：
是否允许滚轮缩放
这项设置之后，在地图上并不是直接用滚轮缩放，而是需要用Ctrl，感觉不便所以我自己没加。

Double Click Zoom：
是否允许双击放大
注意如果不显示缩放按钮的话，放大之后就回不来了。

Default Min/Max Zoom：
最小和最大放大倍数。最终的放大倍数不仅跟这个后台设定项有关，也跟使用的地图瓦片API有关。

Default Tiling Service：
有两个选项，“I will provide my own map tile URL”和MapQuest。MapQuest我考察了一番，感觉太难看，没继续尝试。所以重点说第一个选项，自定义tile URL。
先解释一下什么是tile URL。本插件所依赖的地图服务，叫做Map Tile Server（地图瓦片服务）。它分成Raster、Vector和Static三种形式。本插件使用的是Raster形式，而Dayu和明明同学用的都是Vector形式。Vector的参数更加丰富，Raster配置起来更简便。

※※※Map Tile URL※※※：
重中之重！！因为默认的OSM服务访问不了，所以这里必须填一个自定义的。
明明同学找的cartocdn就挺好用的。他使用的light_nolabels是不带标签的版本，换成light_all就是带标签的版本。至于他为什么用不带标签的，自己悟。
https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png
这里的{z}{x}{y}都不要动，第一个{s}是指地址里的subdomain，也就是接下来的配置项【Map Tile URL Subdomains】。
有的API是需要API Key的。这样的API都有说明文档，把Key按照人家给的例子粘贴进来即可。
cartocdn对我来说有点太素了，于是周末花了一天时间寻找能用的瓦片服务，结果惨不忍睹，汇报一下成果：
maptiler.com：要注册、被墙。
opentopomap.org：免注册、丑。
stadiamaps.com：要注册、比较流畅、免费用户限流严重
tomtom.com：要注册、慢、地图不详细
here.com：要注册、中文地名乱七八糟
geoapify.com：要注册、速度尚可、账号登录验证需要梯子，服务本身不需要。
至于为啥不找国内的地图服务，是我不想吗？本插件所支持的是Raster服务，也叫zxy服务，客户端GET的结果必须是一张PNG/JPG/WEBP图片。国产的高德和天地图我也试了，根本不是一样的格式。甚至有种说法，说国内不允许提供这种服务。
然后呢，这服务也可以自己搭建，数据和教程也都有，但总觉得这种行为像为了吃顿酱肘子先花一年时间晒酱油，没必要。
兜兜转转一圈，还是要回到cartocdn。什么功不唐捐，屁咧！

Map Tile URL Subdomains：
具体填什么要看API的文档说明，像openstreetmap和cartocdn都是abcde或a,b,c,d,e。有的API前面没有前缀那就不填。

Detect Retina：
是否检测高清设备。如果上面的瓦片服务中支持@2x，那么选中这项以后，如果leaflet发现使用者用的是高清屏幕，就会自动使用高清地图。窃以为意义不大。

Tile Size：
一般情况下服务本身已经设好了，留空即可。

Tile Id：
Access Token：
用Mapbox的服务才有用。但是我的Mapbox没配明白，只有一个默认的卫星地图能用，这两项也没用上。

Zoom Offset：
好像是在zoom的时候自动加减一下这个值，没理解意义。

No Wrap (tiles)：
地图是否与经线对齐。（这有啥用？）

JavaScript URL、CSS URL：
css和js的位置，默认即可。

Default Attribution：
地图做成后，右下角的一串版权信息。尊重服务商要求即可。

再往后没用上。
插件装好后，其实已经可以编辑地图了。但因为还有个插件的插件，所以怎么用放后面再说。

插件Extensions for Leaflet Map的配置

插件地址：Extensions for Leaflet Map。
跟主插件正相反，这个插件的后台，大多数时间在说怎么用。

Marker Clustering–When you mouse over a cluster it shows the bounds of its markers.
聚合显示时，默认会将聚合的标记点连接起来形成一个多边形。我嫌不好看，勾掉了。

When you click a cluster we zoom to its bounds.
点击聚合点时，直接缩放到所有聚合点的范围。

增加一个leaflet map

语法和关键字很多，但能用上的不多。通常只需要地图、标记点、地形json文件。

leaflet-map：
主插件的主函数，用于插入一张leaflet-map。参数就是配置页面的那些，没什么特别的。

leaflet-marker：
标记一个地点。参数比较多，挑有用的说。
– lat,lng / address：用于定位标记的位置。lat是纬度，lng是经度。经纬度可以从OpenStreetMap.org上查。国产地图查到的经纬度与OSM查到的有一些偏差，注意要保持一致。而address的数据库偏差非常大，不建议。
– iconUrl：标记用图标。可以是网址，也可以是相对路径，甚至base64代码。如果不设，使用默认的蓝色pin图标。
– title：鼠标移动到标记点上时显示的提示信息。这个与点击标记后显示的内容是两码事。
– iconanchor：图标的锚点偏移。这个参数有点意思，它表示的是你图标的“尖”所在的位置。以默认图标为例，规格是19*25，“尖”在最下方，所以iconanchor就应该是宽的一半和全部的高，也就是10,25。这个参默认项是0,0。每个标记都要自己手动加，相当烦。不过也能够理解，一旦有人用的是左箭头呢？
– opacity：图标的透明度。
– 【leaflet-marker】【/leaflet-marker】之间，放置弹出的html内容。放啥都行，也可以定义css。
另外还有一些参数，我都没用上官网说明文档里都有。

leaflet-geojson：
地理信息的json文件。中国的地理信息文件可以在阿里云下载，或者直接引用。建议下载后到mapshaper进行优化后上传，在本地使用。这里非常感谢明明桑，一个优化工具解决了困扰我许久的问题。
– src：地理信息源文件的路径，可以是相对路径或网址。
– color：leaflet提供的属性，边框颜色。
– weight；leaflet提供的属性，边框宽度。
– opacity：leaflet提供的属性，边框透明度。默认的3px蓝色实在是有点虎。缺点是每个marker都需要单独设置。
– fill：leaflet提供的属性，布尔型，是否填充。默认true
– fillColor：leaflet提供的属性，填充颜色，不设则默认使用color
– fillOpacity：leaflet提供的属性，填充颜色的透明度，默认0.2
想一个省一个省点亮的，就下载省级json，想像我这样一个市一个市点亮的，就下载市级json，一次勾一个边即可。话说，我一直认为用省划分习俗非常不科学，甚至用市来划分都不科学。毕竟有粤南粤北、胶东鲁西南，还有江苏十三太保这样的众所周知的文化差异。我甚至觉得应该精确到县。毕竟我们旁边就有一个散装的地级市，我认识一堆人，他们分别来自鲅鱼圈、熊岳、盖州、老边、大石桥，就没有一个称自己是营口人的。但是真正实装以后才发现，县级太困难了，我甚至都没在普兰店歇过脚，自己家都没搞定。

markerclustergroup：聚合分组方法，这是“扩展的扩展”的功能，也是安装它的主要目地。cluster是指将临近的点进行聚合，group是通过关键字对追加的点进行分组。只聚合可以用cluster，只分组可以用leaflet-optiongroup。
– feat：适配项目。可以是【leaflet-marker】中的title或者iconUrl中的一个。参数以部分匹配的方式，对title或者iconUrl形成过滤，然后在右上角形成组别。
– strings：分组过滤用的字符串，用半角逗号间隔。
– groups：分组后显示的字符串。
– position ：分组显示位置
– collapsed ：分组是否折叠

多说无益，直接举例

【leaflet-map fitbounds】//用fitbounds，就不用关心点的位置和缩放了
【fullscreen】//增加一个全屏按钮
【leaflet-marker lat=38.87430121 lng=121.55204380 iconUrl="/path_to/marker-blue.png" iconanchor="15,40" 】<b>辽师附中</b><i>2012 /04 /<a href="/2012/04/ancient-school-motto.html" target="_blank" rel="noopener">沙河口黑石礁尖山街</a> /街拍 </i><img src="/path_to/imag0114.jpg" alt="imag0114" />【/leaflet-marker】
【leaflet-marker lat=38.88611421 lng=121.63731716 iconUrl="/path_to/marker-blue.png" iconanchor="15,40"  opacity=0.5】<b>西岗中学</b><i>2003 /05 /<a href="/2023/06/post-truth-and-something-before-my-graduation.html" target="_blank" rel="noopener">西岗八一三环街</a> /其他 </i><img src="/path_to/vlcsnap-2023-05-21-17h15m27s675.jpg" alt="vlcsnap-2023-05-21-17h15m27s675" />【/leaflet-marker】
【leaflet-marker lat=38.88890 lng=121.70665 iconUrl="/path_to/marker-yellow.png" iconanchor="15,40"  】<b>棒棰岛</b><i>1993 /08 /中山老虎滩迎宾路 /海滩 </i>【/leaflet-marker】
【leaflet-marker lat=38.93471 lng=121.19765 iconUrl="/path_to/marker-yellow.png" iconanchor="15,40" 】<b>北海王家村</b><i>2018 /08 /旅顺北海王家村 /海滩 </i>【/leaflet-marker】
【leaflet-marker lat=38.98562089 lng=121.65895298 iconUrl="/path_to/marker-yellow.png" iconanchor="15,40"  】<b>蟹子湾</b><i>2015 /04 /<a href="/2015/04/chemical-factories-stories.html" target="_blank" rel="noopener">甘井子甘井子海茂路</a> /海滩 </i><img src="/path_to/BF59AEE251904BC4.jpg" alt="BF59AEE251904BC4" />【/leaflet-marker】
【markerclustergroup feat="iconUrl" strings="blue, yellow" groups="学校, 海滩" collapsed=true】
【leaflet-geojson src="/path_to/dalian.json" color="#FF8888" weight=2 fillOpacity=0.3】//加入大连地图
【zoomhomemap】//调整缩放比

[fullscreen ] [markerclustergroup feat=iconUrl strings=blue, yellow groups=学校, 浴场 collapsed=true ] [zoomhomemap ]

就到这。总之有现成儿的我才不会亲自动手呢。

《【去过】页面上线》采用署名-非商业性使用-禁止演绎许可协议进行许可。『破袜子』期待与您交流。

第一步，在OnInitDialog()中，增加垂直滚动条

如需要增加则对垂直滚动条进行初始化。初始化时，不使用简化版的SetScrollRange()，而改用SetScrollInfo()。利用结构体SCROLLINFO的nPage和nMax配合实现大滑块。这里的逻辑是：nPage与nMax的比值也就是滑块占总高度的比值，比值越接近一，滑块越大。nPage和nMax都是相对值，只要二者单位统一即可。方便起见直接使用真实值。
一个很坑的点是nMax不能用窗口Rect的高，而要取最下边控件的下沿，原因未知。
下面是代码：

BOOL CMFCAppDemoDlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

        //取窗口位置
	CRect rcThis;
	GetWindowRect(&rcThis);

        //取最下面控件的位置，如果有动态创建的控件，可以遍历取得。
	CRect rcLastButton;
	GetDlgItem(IDCANCEL)->GetWindowRect(rcLastButton);

        //取放大倍数，96.0是100%时候的DPI
	float fScale = static_cast<float>(GetDpiForWindow(m_hWnd)) / 96.0;
        
        //取桌面工作区大小
	CRect rcScreen;
	::SystemParametersInfo(SPI_GETWORKAREA, 0, &rcScreen, 0);

        //对话框的工作区域理想高度:比最后一个控件多一丢丢。
	int nHeightImage = rcLastButton.bottom + rcLastButton.Height() * fScale;

        //如果想象高度比工作区域高，那么将窗口高度设为与工作区等高。
	if (nHeightImage > rcScreen.Height())
	{
		m_blHasVScrollBar = true; //成员变量，用于标记是否有滚动条
		rcThis.bottom = rcThis.top + rcScreen.Height();
		this->MoveWindow(&rcThis, TRUE); //修改Dialog自身高度
		SCROLLINFO si{};
		si.cbSize = sizeof SCROLLINFO;
		si.fMask = SIF_RANGE | SIF_PAGE | SIF_PAGE;
		si.nPage = rcScreen.Height(); //Windows桌面可利用高度作为Page高
		si.nMax = nHeightImage; //窗口高度最大值。
		SetScrollInfo(SB_VERT, &si, TRUE); //激活滚动条
	}
        //否则没用滚动条
	else
	{
		SetScrollRange(SB_VERT, 0, 0, FALSE);
	}

	return TRUE; 
}

第二步，重写WM_VSCROLL的消息响应函数OnVScroll()

没有难点。只要每个消息处理时，nPage与nMax的比例关系一致即可。

BEGIN_MESSAGE_MAP(CMFCAppDemoDlg, CDialogEx)
	ON_WM_VSCROLL()
END_MESSAGE_MAP()

void CMFCAppDemoDlg::OnVScroll(UINT nSBCode, UINT nPos, CScrollBar* pScrollBar)
{
	CDialogEx::OnVScroll(nSBCode, nPos, pScrollBar);
        //取之前的滚动条信息
	SCROLLINFO si{};
	GetScrollInfo(SB_VERT, &si, SIF_ALL);

        //滚动条上一次的位置
	int nCurPos = si.nPos;
	const int FACTOR(100);
	switch (nSBCode)
	{
	case SB_LINEUP:          //Scroll one line up
		nCurPos -= (si.nPage / 50); //点击一次箭头，或者按一次↑，移动页面的1/50，注意方向
		break;
	case SB_LINEDOWN:           //Scroll one line down
		nCurPos += (si.nPage / 50); //注意方向
		break;
	case SB_PAGEUP:            //Scroll one page up
		nCurPos -= (si.nPage / 50* 20); //PgUp键的处理。所有的响应要统一单位标准即可。注意方向
		break;
	case SB_PAGEDOWN:        //Scroll one page down        
		nCurPos += (si.nPage / 50* 20); //注意方向
		break;
	case SB_THUMBPOSITION:  //Scroll to the absolute position. The current position is provided in nPos
		nCurPos = nPos; //从缩略图直接确认位置
		break;
	case SB_THUMBTRACK:     //Drag scroll box to specified position. The current position is provided in nPos
		nCurPos = nPos; //从滚动条直接确认位置
		break;
	case SB_ENDSCROLL:
		break;
	default:
		break;
	}
        //确认没有超出最小值和最大值范围。最小值一般是0，最大值是nMax - nPage。
	nCurPos = max(si.nMin, min(nCurPos, si.nMax - static_cast<int>(si.nPage)));
        //当位置移动时，滚动窗口内容
	if (nCurPos != si.nPos)
	{
		int nDelta = si.nPos - nCurPos; //注意方向，原始值减目标值
		si.nPos = nCurPos;
		si.fMask = SIF_POS;
		SetScrollInfo(SB_VERT, &si, TRUE); //设滚动条
		ScrollWindow(0, nDelta); //滚动窗口
		UpdateWindow();
	}
}

第三步，重写WM_MOUSEWHEEL的消息响应函数OnMouseWheel()

同样没有难点，只是鼠标滚动一下会转化成多次向上或向下的消息。

BEGIN_MESSAGE_MAP(CMFCAppDemoDlg, CDialogEx)
	ON_WM_MOUSEWHEEL()
END_MESSAGE_MAP()
BOOL CMFCAppDemoDlg::OnMouseWheel(UINT nFlags, short zDelta, CPoint pt)
{
        //确认滚动条有效
	if (!m_blHasVScrollBar) {
		return CDialogEx::OnMouseWheel(nFlags, zDelta, pt);
	}
	CONST INT WHEEL_SCROLL_LINES(3);
	UINT8 ucDirection(SB_LINEUP);
        //根据zDelta方向确定消息重量
	if (zDelta < 0) {
		ucDirection = SB_LINEDOWN;
	}
        //把鼠标滚动值换算成N个箭头消息并发送。次数是没有方向的。
	UINT unLines = (abs(zDelta) * WHEEL_SCROLL_LINES) / WHEEL_DELTA;
	while (unLines--)
	{
		SendMessage(WM_VSCROLL, MAKEWPARAM(ucDirection, 0), 0);
	}
	return TRUE;
}

总之，最难的其实还是开头。nPage与nMax虽然设什么数都可以，但只有用真实值才是最符合拖动规律的。

《如何让MFC的Dialog类型窗口在高度超出屏幕高度时出现比例合适的垂直滚动条》采用署名-非商业性使用-禁止演绎许可协议进行许可。『破袜子』期待与您交流。