大矢量数据加载插件

大矢量数据插件的引用

<!--2).引用插件javascript文件 -->
<script type="text/javascript" src="Plugins/VectorTileProvider.js"></script>

加载矢量代码如下：

try {
    const oShpImageLayer = new LSGlobe.VectorTileProvider.fromUrl(jsonPath, {
         viewer: viewer
     });
     //设置矢量样式
     var oStyle = {
         styletyle: "default",
         color: "rgba(187, 187, 187,1)",//矢量的颜色
         lineType: LSGlobe.VectorTileLineType.SOLID,//边框类型
         lineWidth: 2,//边框宽度
         outline: false,//是否显示边框
         outlineColor: "#2196F3",//边框
         icon: "images/GEMarker/red-circle.png",//如果是矢量点，则用该图标路径
         textField: "NAME",//参照字段
         font: 'bold 14px sans-serif'//字体相关
     };
     var styles = new LSGlobe.VectorTileStyleCollection([new LSGlobe.VectorTileStyle(oStyle)]);

     /*
     var style = new LSGlobe.VectorTileStyle({
             color: LSGlobe.Color.fromRandom().toCssColorString(),
             classificationField: 'height',//参照字段
             classificationFieldValue: [301, 400]//对应字段的数值区间
         });
     */
     //正常显示样式
     oShpImageLayer.styles = styles;
     //选种样式
     oShpImageLayer.selectedStyles = styles;//最好和正常样式有区别这样才能体现选中效果

     viewer.imageryLayers.addImageryProvider(oShpImageLayer);
     oShpImageLayer.maximumLevel=30;
     var rect = oShpImageLayer._rectangle;
     viewer.camera.flyTo({
         destination: rect
     });
 } catch (error) {
     console.log(`Error loading vector tiles: ${error}`);
 }

在线示例

在线示例