网站是用什么程序做的dedecms两网站共享用户名

网站是用什么程序做的,dedecms两网站共享用户名,做网站爬闪,网站制作 公开课第14章#xff1a;WebGIS前端基础 14.1 学习目标 掌握常见 WebGIS 前端库#xff08;Leaflet/Mapbox GL JS#xff09;的地图初始化、图层与样式管理。能实现基本交互#xff08;缩放、图层切换、弹窗、事件响应#xff09;与数据加载#xff08;GeoJSON/MVT/瓦片…第14章WebGIS前端基础14.1 学习目标掌握常见 WebGIS 前端库Leaflet/Mapbox GL JS的地图初始化、图层与样式管理。能实现基本交互缩放、图层切换、弹窗、事件响应与数据加载GeoJSON/MVT/瓦片。理解三维可视化Cesium入门能力建立从二维到三维的迁移思维。形成可复用的前端地图项目骨架具备端到端演示与部署能力。14.2 先修要求基础 Web 前端知识HTML/CSS/JavaScript。了解 GeoJSON/MVT 与常见坐标系Web Mercator,EPSG:3857。具备基本数据准备能力示例 GeoJSON、在线底图 token 等。14.3 核心知识点前端库Leaflet、Mapbox GL JS、Cesium3D。图层与样式底图、叠加层、样式表达、符号化与事件样式。交互与事件缩放、点击、高亮与弹窗、图层开关、鼠标悬停。数据加载GeoJSON 矢量、MVT 矢量切片、Raster 瓦片XYZ/WMTS。三维扩展Cesium地形、建筑与相机控制坐标与时间视角。14.4 内容提纲14.4.1 地图初始化Leaflet / Mapbox GL JS示例Leaflet 地图初始化与底图加载。!doctypehtmlhtmllangzhheadmetacharsetutf-8/metanameviewportcontentwidthdevice-width, initial-scale1/titleLeaflet WebGIS 示例/titlelinkrelstylesheethrefhttps://unpkg.com/leaflet1.9.4/dist/leaflet.css/style#map{height:600px;}/style/headbodydividmap/divscriptsrchttps://unpkg.com/leaflet1.9.4/dist/leaflet.js/scriptscriptconstmapL.map(map).setView([39.9,116.4],11);constosmL.tileLayer(https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png,{maxZoom:19,attribution:copy; OpenStreetMap contributors}).addTo(map);/script/body/html示例Mapbox GL JS 初始化需替换为你自己的accessToken。scriptsrchttps://api.mapbox.com/mapbox-gl-js/v2.16.1/mapbox-gl.js/scriptlinkhrefhttps://api.mapbox.com/mapbox-gl-js/v2.16.1/mapbox-gl.cssrelstylesheet/dividglmapstyleheight:600px/divscriptmapboxgl.accessTokenYOUR_MAPBOX_ACCESS_TOKEN;constglmapnewmapboxgl.Map({container:glmap,style:mapbox://styles/mapbox/streets-v11,center:[116.4,39.9],zoom:11});/script14.4.2 图层与样式管理示例在 Leaflet 中加载GeoJSON并应用样式与图层控制。script// 叠加矢量层示例数据需放置在 data/features.geojsonfetch(data/features.geojson).then(resres.json()).then(geojson{conststyle{color:#2F5597,weight:1,fillColor:#4F81BD,fillOpacity:0.4};constoverlayL.geoJSON(geojson,{style}).addTo(map);constbaseLayers{OSM:osm};constoverlays{要素图层:overlay};L.control.layers(baseLayers,overlays,{collapsed:false}).addTo(map);});/script14.4.3 交互事件与弹窗示例点击高亮与弹窗鼠标悬停改变样式。scriptfunctiononEachFeature(feature,layer){layer.on({click:(e){constpropsfeature.properties||{};constcontentb名称/b:${props.name||N/A}br/bID/b:${props.id||N/A};layer.bindPopup(content).openPopup();layer.setStyle({color:#D35400,weight:2});},mouseover:()layer.setStyle({weight:3}),mouseout:()layer.setStyle({weight:1})});}// 加载时添加交互fetch(data/features.geojson).then(rr.json()).then(gj{L.geoJSON(gj,{onEachFeature}).addTo(map);});/script14.4.4 数据加载GeoJSON/MVT/瓦片矢量GeoJSON通过fetch L.geoJSON或map.addSourceMapbox GL。矢量切片MVTMapbox Vector Tile前端通过样式控制符号化适合大规模矢量显示。栅格XYZ/WMTS 底图瓦片或自建切片服务参见第15章。14.4.5 三维扩展Cesium示例Cesium 基本初始化。linkhrefhttps://cdnjs.cloudflare.com/ajax/libs/cesium/1.115/Widgets/widgets.cssrelstylesheet/scriptsrchttps://cdnjs.cloudflare.com/ajax/libs/cesium/1.115/Cesium.js/scriptdividcesiumContainerstyleheight:600px/divscriptconstviewernewCesium.Viewer(cesiumContainer,{terrainProvider:Cesium.createWorldTerrain()});viewer.camera.flyTo({destination:Cesium.Cartesian3.fromDegrees(116.4,39.9,10000)});/script14.4.6 交互与事件流程图以下流程图概述 WebGIS 前端交互的主要步骤初始化 → 图层加载 → 事件绑定 → 弹窗与样式响应 → 产出与排障。坐标与投影资源路径与跨域样式/事件冲突页面加载与依赖初始化地图初始化: Leaflet/MapboxGL/Cesium底图与叠加层加载事件绑定: click/hover/context弹窗/高亮/样式更新导出与演示: 页面/截图排障回环14.4.7 前端数据流图矢量/栅格/切片区分前端从数据源到图层渲染的主要链路辅助理解性能与样式控制位置。栅格链路矢量链路TileLayer/栅格源XYZ/WMTS 瓦片服务栅格渲染fetch/map.addSourceGeoJSON/MVT 服务样式表达: fill/line/circle交互事件: click/hover前端呈现: Canvas/WebGL导出: 演示/截图/记录14.5 实践任务与步骤任务构建一个 Leaflet 前端应用加载底图与GeoJSON实现缩放、图层切换与弹窗信息。步骤创建index.html按 14.4.1/14.4.2 加载底图与GeoJSON。添加图层控制与样式实现点击弹窗与高亮悬停加粗。可选使用 Mapbox GL JS 实现同样功能比较样式控制与性能差异。可选加入 Cesium 容器展示三维视角。14.6 产出与评估标准产出前端应用源码index.html/assets/、示例数据data/features.geojson、演示截图或预览链接。评估交互完整性40%缩放、图层切换、弹窗与样式响应。样式与表达30%配色、符号化、易读性。代码规范30%结构清晰、依赖说明、资源组织。14.7 扩展示例高级Mapbox GL Style Spec自定义多图层样式、过滤与表达式。矢量聚合与热力图点聚合cluster、密度heatmap。三维建筑与地形3D building、terrain、相机路径与视角切换。性能与优化切片策略、资源压缩、事件节流与去抖、懒加载。14.8 常见错误与排障Troubleshooting坐标系与数据不匹配WGS84 与 Web Mercator 混用导致偏移统一为EPSG:3857或在后端进行重投影。资源路径与跨域静态资源相对路径错误跨域需启用 CORS 或本地开发服务器。事件与样式冲突重复绑定或层级遮挡使用图层顺序与条件判断控制。Token 与配额Mapbox 等平台的accessToken过期或配额限制导致加载失败。14.9 延伸阅读与资源Leaflet 官方文档https://leafletjs.com/Mapbox GL JS 文档https://docs.mapbox.com/mapbox-gl-js/Cesium 文档https://cesium.com/docs/GeoJSON 规范https://geojson.org/14.10 本章总结本章完成 WebGIS 前端基础能力的搭建地图初始化、图层与样式、交互事件与数据加载并触达三维扩展入门。通过流程图与数据流图明确了前端工作流的关键节点便于后续与第15章后端与服务发布打通实现端到端的 WebGIS 开发与部署。14.X 扩展版工程化实践14.X.1 学习目标工程化以可复用的前端项目骨架组织示例工程形成统一的目录、资源与配置约定。建立数据源抽象底图/专题/服务 API支持环境变量切换与降级方案。统一本地预览与联调流程确保gis_examples/ch14可一键运行与演示。14.X.2 数据与目录约定统一到gis_examples/ch14目录结构gis_examples/ch14/index.html前端演示页面gis_examples/ch14/assets/本地样式与脚本gis_examples/ch14/data/features.geojson示例专题数据gis_examples/ch14/serve.py本地预览与静态资源服务环境变量可选TILE_URL指定底图如https://tile.openstreetmap.org/{z}/{x}/{y}.pngMVT_URL指定矢量切片服务若集成后端参考第15章14.X.3 工程化脚本与流程资源加载策略优先本地data/*.geojson不可用时展示提示并降级到空图层。对网络底图失败ERR_CONNECTION_REFUSED时自动切换到备用源TILE_URL_FALLBACK。统一错误提示在地图页面顶部显示加载状态与错误信息便于联调。资源路径约定所有静态资源使用相对路径相对于index.html避免跨目录引用。示例伪代码前端初始化与降级consttileUrlwindow.TILE_URL||https://tile.openstreetmap.org/{z}/{x}/{y}.png;constfallbackhttps://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png;constlayerL.tileLayer(tileUrl);layer.on(tileerror,(){if(!layer._usedFallback){layer._usedFallbacktrue;layer.setUrl(fallback);console.warn(底图切换到备用源);}});layer.addTo(map);14.X.4 前端预览与可视化统一启动路径进入gis_examples/ch14目录执行python3 serve.py打开浏览器访问http://localhost:port/进行预览端口由脚本输出确认。可视化建议图层控制与样式面板展示不同符号与表达交互提示与状态栏加载中/失败信息截图或导出简单报告PNG/HTML。14.X.5 评估指标与验收功能完整性底图加载、专题渲染、交互弹窗/高亮正常。工程规范目录与路径约定一致、环境变量可用、错误提示清晰。复现性在新环境可按文档 1 次成功运行与预览。14.X.6 常见错误与排障工程化底图加载失败网络限制/配额切换备用源或改为本地缓存瓦片。相对路径错误index.html与data/不同层级统一为相对路径并在本地服务下测试。跨域问题第三方服务需启用 CORS本地开发代理或改为后端代理第15章。14.X.7 与其他章节联动第15章将前端专题图层接入自建 WMTS/MVT 服务验证跨域与样式联调。第16章集成地理编码与等时圈接口演示地址搜索与可达性范围叠加。第18/23章对接设施选址与公平性评估结果形成端到端展示页面。14.X.8 实践任务将示例index.html拓展为可配置演示支持底图切换、专题过滤、错误提示与降级。在gis_examples/ch14下完成预览演示并提交截图与简要说明。14.X.9 示例命令cd gis_examples/ch14 python3 serve.py # 浏览器访问 http://localhost:port/ 并检查交互与降级策略