矢量瓦片

---

import { Viewer, VectorTileImageryProvider } from "joDVF";
import { Cartesian3, Math as CesiumMath, HeadingPitchRoll } from "joCesium";

const { mapContainer } = createContainer();

const viewer = new Viewer(mapContainer);
viewer.camera.flyTo({
  destination: Cartesian3.fromDegrees(102.78118, 29.433389, 1995000),
  orientation: new HeadingPitchRoll(
    CesiumMath.toRadians(0),
    CesiumMath.toRadians(-80),
    0.0
  )
});
const provinceProvider = new VectorTileImageryProvider({
  source: "./assets/json/620403.json",
  defaultStyle: {
    outlineColor: "rgb(255,255,255)",
    lineWidth: 2,
    tileCacheSize: 200,
    fill: true,
    fillColor: "rgba(3,113,45,0.4)"
  },
  maximumLevel: 20,
  minimumLevel: 1,
  simplify: false
});

provinceProvider.readyPromise.then(() => {
  viewer.imageryLayers.addImageryProvider(provinceProvider);
});

const shpProvider = new VectorTileImageryProvider({
  source: "https:" + location.host + "/assets/shp/sichuan/sichuan.shp",
  defaultStyle: {
    outlineColor: "rgb(255,0,0)",
    lineWidth: 1,
    fill: true,
    fillColor: "rgba(3,113,45,0.4)",
    tileCacheSize: 200,
    showMaker: true,
    showCenterLabel: true,
    fontColor: "rgba(255,123,0,1)",
    labelOffsetX: -10,
    labelOffsetY: -5,
    fontSize: 14,
    fontFamily: "黑体",
    centerLabelPropertyName: "name"
  },
  maximumLevel: 20,
  minimumLevel: 1,
  simplify: false
});

shpProvider.readyPromise.then(function () {
  viewer.imageryLayers.addImageryProvider(shpProvider);
});

function createContainer() {
  const container = document.createElement("div");
  container.style.width = "100%";
  container.style.height = "100%";

  const uiContainer = document.createElement("div");
  uiContainer.style.position = "fixed";
  uiContainer.style.top = "5px";
  uiContainer.style.left = "5px";
  document.body.appendChild(container);
  document.body.appendChild(uiContainer);

  return {
    mapContainer: container,
    uiContainer
  };
}