npm
npm i cesium cesium-mvt-imagery-provider
import { Viewer } from "cesium";
import CesiumMVTImageryProvider from "cesium-mvt-imagery-provider";
const imageryProvider = new CesiumMVTImageryProvider({
urlTemplate: "http://localhost:8080/sample_mvt/{z}/{x}/{y}.mvt",
layerName: "layerName", // or "layerName1,layerName2,layerName3"
style: feature => {
return {
strokeStyle: "green",
fillStyle: "green",
lineWidth: 1,
};
},
onSelectFeature: feature => {
console.log("Feature is selected");
},
credit: "cesium.js",
});
const layers = viewer.scene.imageryLayers;
const currentLayer = layers.addImageryProvider(imageryProvider);
currentLayer.alpha = 0.5;
// Call `layers.remove(currentLayer);` when it is unnecessary.
See example directory for more details.
yarn
yarn unlink && yarn build && yarn run link
cd ./example
yarn && yarn dev
- Then example cesium application is started
If you run example, you need to set sample MVT data to ./example/public
.
And you should change layerName
option for MVTImageryProvider
in ./example/src/Imagery.tsx
.