两栏式设计网站,wordpress content.php,巢湖有没有专门做网站的公司,吉林集安市建设局网站近期工作中准备把Mapbox用起来#xff0c;准备发几个教程#xff0c;把Mapbox再熟悉熟悉。工作中也用过不少的Web GIS组件#xff0c;在这里说一下我对这些WebGIS组件的印象。 Leaflet 代码简洁#xff0c;插件丰富#xff0c;相比于其大小#xff0c;功能也挺强大#… 近期工作中准备把Mapbox用起来准备发几个教程把Mapbox再熟悉熟悉。工作中也用过不少的Web GIS组件在这里说一下我对这些WebGIS组件的印象。 Leaflet 代码简洁插件丰富相比于其大小功能也挺强大之前工作中基于Leaflet封装了一版SDK推广了很多项目组一用用了好多年。 Openlayers 虽然也是开源但是源码没有Leaflet的清晰代码没有看下去。而且印象其核心也是基于Canvas技术。与Leaflet相比并没有特别明显的优势。 MapTalks 主要是对标Leaflet虽然是一个二三维框架但是其核心还是基于Canvas进行渲染的。数据量大了一样的性能拉跨。 ArcGIS for JavaScript 不习惯dojo代码。 Cesium 采用WebGL技术适合于构建三维大场景。像超图等很多大厂都有基于Cesium构建的三维大场景引擎。 Mapbox 采用WebGL技术性能比Leaflet、Openlayers、MapTalks强很多。Mapbox MVT的渲染效果和体验比OGC的WMS、WMTS也强很多。在二维视图层面Mapbox做的比Cesium要好之前尝试渲染过单线图数据Cesium会出现一些线颜色改变、消失等显示问题而Mapbox显示的就很精细。对于Mapbox MVT格式的切片很多人也尝试用Cesium进行加载但是测试了一些网上的开源方案效果差强人意并且在这方面Cesium也没有更好的替代方案。在三维视图方面Cesium尤其是大厂加持之后的Cesium对倾斜摄影、点云、大批量的精模数据支持都很好不知道Mapbox在这方面的表现如何。另外在三维展示方面对于影像数据感觉上Cesium的渲染效果也没有Mapbox效果好不过这个没有经过详细论证。 下面上代码展示一个基本上最简单的MapboxDemo。
!DOCTYPE html
html langenheadmeta charsetutf-8 /titleMapbox Demo/titlemeta nameviewport contentwidthdevice-width, initial-scale1 /script srchttp://code.jquery.com/jquery-latest.js/scriptscript srchttps://api.tiles.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js/scriptlink hrefhttps://api.tiles.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css relstylesheet /stylebody {margin: 0;padding: 0;} #map {position: absolute;top: 0;bottom: 0;width: 100%;}/style/headbodydiv idmap/divdiv idhidElement styledisplay: none;div idpopupTitle styledisplay: none;p{TITLE}/p /div/divscript// 指定accessToken这个请自行从Mapbox官网申请mapboxgl.accessToken pk.eyJ1IjoibW9yZ2Vua2FmZmVlIiwiYSI6ImNpeHJmNXNmZTAwNHIycXBid2NqdTJibjMifQ.Dv1-GDpTWi0NP6xW9Fct1w;// 创建Mapbox 指定所在div、样式、中心点、初始缩放级别const map new mapboxgl.Map({container: map,style: mapbox://styles/examples/clg45vm7400c501pfubolb0xz,center: [-87.661557, 41.893748],zoom: 10.7});// 创建一个弹窗 offset的y坐标向上偏移15像素避免遮挡chicago-park的图标const popup new mapboxgl.Popup({offset: [0, -15]});// 监听地图click事件map.on(click, (event) {// 根据鼠标点查询 chicago-parks 图层const features map.queryRenderedFeatures(event.point, {layers: [chicago-parks]});if(!features.length) {return;}// 取第一条查询结果const feature features[0];// 设置弹窗位置及内容显示查询结果的名称popup.setLngLat(feature.geometry.coordinates).setHTML($(#popupTitle).html().replaceAll({TITLE},feature.properties.title)).addTo(map);});/script/body
/html 上述代码效果图如下展示一张在线的地图点击chicago-parks气泡图层添加一个弹窗显示公园名称。 通过缩放可以看到Mapbox默认是三维球体模式。 通过鼠标右键可以调整视角。下图调整为我的家乡济南。 教程完毕大家快自己试试看吧。
