supermap-webgl-vue

安装教程

npm i @gisershare/supermap-webgl-vue

使用教程

1. 在public文件夹下存放supermap webgl最新安装包
2. 在index.html中引入相关js库和css库
    <link href="./examples/webgl/css/pretty.css" rel="stylesheet">
    <link href="./Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <script src="./examples/webgl/js/tooltip.js"></script>
    <script src="./examples/webgl/js/Convert.js"></script>
    <script src="./examples/webgl/js/dat.gui.min.js"></script>	
    <script type="text/javascript" src="./examples/webgl/js/supermap/SuperMap.Include.js"></script>	
    <script src="./examples/webgl/js/jquery.min.js"></script>
    <script src="./Build/Cesium/Cesium.js"></script>
   在main.js中引入安装的包
    import VueiClientWebgl from '@gisershare/supermap-webgl-vue'
    import '@gisershare/supermap-webgl-vue1/lib/supermap-webgl-vue.css'
    Vue.use(VueiClientWebgl);
3. 使用方法
   ①三维场景viewer
   <sm-viewer ref="viewer" s3mUrl="http://192.168.80.24:8090/iserver/services/3D-QingXieSheYingMoXing/rest/realspace"></sm-viewer>
   在vue单页面中，可以通过this.$refs.viewer.viewer获取场景的viewer;
   目前支持传入一个s3m缓存地址
   ②可视域分析
   <sm-3dViewshed :visibility.sync="visibility"></sm-3dViewshed>
   ③剖面分析
   <sm-3dProfile :visibility.sync="visibility"></sm-3dProfile>
   ④天际线分析
   <sm-3dSightline :visibility.sync="visibility"></sm-3dSightline>
   ⑤二三维测量
   <sm-3dMeasure :visibility.sync="visibility"></sm-3dMeasure>
   ⑥卷帘分析
   <sm-3dRollBlind :layerObjs="layerObjs" :visibility.sync="visibility"></sm-3dRollBlind>
   ⑦天际线分析
   <sm-3dSkyline :visibility.sync="visibility"></sm-3dSkyline>
   ⑧阴影率分析
   <sm-3dShadowquery :visibility.sync="visibility"></sm-3dShadowquery>
   ⑨多类型裁剪
   <sm-3dClipPanel :visibility.sync="visibility"></sm-3dClipPanel>
   ⑩光源及天气模拟
   <sm-sceneEffectPanel :visibility.sync="visibility"></sm-sceneEffectPanel>
   ⑪飞行漫游
   <sm-FlyRoam :visibility.sync="visibility"></sm-FlyRoam>
   注释：visibility: Boolen 控制面板显隐
   4. 源码详情
   关注微信公众号：gisshare 和作者取得联系