Cesium加载矢量瓦片样式源码

Cesium加载矢量瓦片需求的用户总量并不大，但这又确实是一个行业的小痛点，所以我们决定把阶段性成果低价有偿分享出来。

解决的几个痛点

1. 所有要素贴地
2. 按字段分类设色
3. 图标显示
4. 文字显示
5. 面要素显示
6. 线要素显示
7. 高清不模糊
8. 可视化配图
9. 矢量免切片
10. 图层半透明

遗留的几个问题

1. 图标避让还未实现
2. 性能只勉强能用
3. 不是100%样式还原
4. 不支持复杂表达式语法

效果展示

图标显示

按字段设色

半透明

半透明填充

海量地名地址点

使用方法

1.引入代码包

import ZeroGISVectorTileImageryProvider from '../lib/lib.js'

2.初始化地图

const viewer = new Cesium.Viewer('#map', {  animation: false,  timeline: false,  baseLayerPicker: false,  geocoder: false,  homeButton: false,  sceneModePicker: false,  navigationHelpButton: false,  infoBox: true,  fullscreenButton: false,})

3.加载矢量瓦片

MVTImageryProvider();

async function MVTImageryProvider() {  const data = await fetch('http://localhost:1323/api/vector/getJson/fujianditu.json').then(res => res.json())  const style = data.data;  const center = style.center;  viewer.camera.flyTo({    destination: Cesium.Cartesian3.fromDegrees(center[0], center[1], 30000),  })  viewer.imageryLayers.addImageryProvider(new ZeroGISVectorTileImageryProvider({ maximumLevel: 18, viewer,style }))}

总结

这套方案已经支持了一些关键功能，但还缺少一些场景实践和严格测试，需要后续持续迭代。

有兴趣的朋友可以花200元购买一份去试用或者迭代完善。

目前总代码量只有大概700行，没有什么帧率、渲染管线、着色器的概念，就是纯手工的基础知识，稍微有些经验的程序员朋友应该都能轻松上手。

交付的是源代码，不包升级，价格不高，售出不退。

我们也会持续完善Cesium加载矢量瓦片的功能，随着完成度的提升我们的价格也会逐步提升，用收益促进研发工作，形成良性循环。

如果你没有矢量瓦片服务发布的经验，也许你还需要花39.9元购买一个我们的产品授权。

有需要的可以加我微信：

我们从产品对你有用的话还请多点star多点赞啊，我们的公众号已经淹没在你的公众号列表里无法推送了。