x

package.json

@@ -11,6 +11,7 @@
     "cesium": "^1.63.1",
     "core-js": "^2.6.5",
     "hammerjs": "^2.0.8",
+    "react-router": "^5.1.2",
     "vue": "^2.6.10"
   },
   "devDependencies": {

public/config.json

@@ -1,10 +1,21 @@
 {
-    "tileset": "http://localhost:4567/wuyidaxue/tileset.json",
+    "tileset": "/data/wuyidaxue/tileset.json",
     "layers": [
         { "name": "house", "text": "建筑", "type": "geodata", "checked": false, "show": true, "url": "house" },
         { "name": "road", "text": "道路", "type": "geodata", "checked": false, "show": true, "url": "road" },
         { "name": "heatmap", "text": "热力图", "type": "heatmap", "checked": false, "show": true, "url": "" },
         { "name": "demtile", "text": "地形", "type": "terrain", "checked": false, "show": true, "url": "demtile" },
-        { "name": "wuyidaxue", "text": "栅格底图", "type": "imagery", "checked": false, "show": true, "url": "imagerys/wuyidaxue" }
+        { "name": "wuyidaxue", "text": "栅格底图", "type": "imagery", "checked": false, "show": true, "url": "imagerys/wuyidaxue" },
+        {
+            "name": "vector_1575278546957",
+            "show": true,
+            "checked": false,
+            "text": "owen2",
+            "type": "geodata",
+            "url": "/data/owen2",
+            "fillColor": "#205bf9",
+            "lineColor": "#ff0000",
+            "lineWidth": 3
+        }
     ]
 }

public/static/js/Sandcastle-client.js

@@ -0,0 +1,170 @@
+(function() {
+    'use strict';
+    window.parent.postMessage('reload', '*');
+
+    function defined(value) {
+        return value !== undefined;
+    }
+
+    function print(value) {
+        if (value === null) {
+            return 'null';
+        } else if (defined(value)) {
+            return value.toString();
+        }
+        return 'undefined';
+    }
+
+    console.originalLog = console.log;
+    console.log = function(d1) {
+        console.originalLog.apply(console, arguments);
+        window.parent.postMessage({
+            'log' : print(d1)
+        }, '*');
+    };
+
+    console.originalWarn = console.warn;
+    console.warn = function(d1) {
+        console.originalWarn.apply(console, arguments);
+        window.parent.postMessage({
+            'warn' : defined(d1) ? d1.toString() : 'undefined'
+        }, '*');
+    };
+
+    console.originalError = console.error;
+    console.error = function(d1) {
+        console.originalError.apply(console, arguments);
+        if (!defined(d1)) {
+            window.parent.postMessage({
+                'error' : 'undefined'
+            }, '*');
+            return;
+        }
+
+        // Look for d1.stack, "bucket.html:line:char"
+        var lineNumber = -1;
+        var errorMsg = d1.toString();
+        if (typeof d1.stack === 'string') {
+            var stack = d1.stack;
+            var pos = stack.indexOf(Sandcastle.bucket);
+            if (pos < 0) {
+                pos = stack.indexOf('<anonymous>');
+            }
+            if (pos >= 0) {
+                var lineStart = stack.indexOf(':', pos);
+                if (lineStart > pos) {
+                    var lineEnd1 = stack.indexOf(':', lineStart + 1);
+                    var lineEnd2 = stack.indexOf('\n', lineStart + 1);
+                    if (lineEnd2 > lineStart && (lineEnd2 < lineEnd1 || lineEnd1 < lineStart)) {
+                        lineEnd1 = lineEnd2;
+                    }
+                    if (lineEnd1 > lineStart) {
+                        /*eslint-disable no-empty*/
+                        try {
+                            lineNumber = parseInt(stack.substring(lineStart + 1, lineEnd1), 10);
+                        } catch (ex) {
+                        }
+                        /*eslint-enable no-empty*/
+                    }
+                }
+            }
+        }
+
+        if (lineNumber >= 0) {
+            window.parent.postMessage({
+                'error' : errorMsg,
+                'lineNumber' : lineNumber
+            }, '*');
+        } else {
+            window.parent.postMessage({
+                'error' : errorMsg
+            }, '*');
+        }
+    };
+
+    window.onerror = function(errorMsg, url, lineNumber) {
+        if (defined(lineNumber)) {
+            if (defined(url) && url.indexOf(Sandcastle.bucket) > -1) {
+                // if the URL is the bucket itself, ignore it
+                url = '';
+            }
+            if (lineNumber < 1) {
+                // Change lineNumber to the local one for highlighting.
+                /*eslint-disable no-empty*/
+                try {
+                    var pos = errorMsg.indexOf(Sandcastle.bucket + ':');
+                    if (pos < 0) {
+                        pos = errorMsg.indexOf('<anonymous>');
+                    }
+                    if (pos >= 0) {
+                        pos += 12;
+                        lineNumber = parseInt(errorMsg.substring(pos), 10);
+                    }
+                } catch (ex) {
+                }
+                /*eslint-enable no-empty*/
+            }
+            window.parent.postMessage({
+                'error' : errorMsg,
+                'url' : url,
+                'lineNumber' : lineNumber
+            }, '*');
+        } else {
+            window.parent.postMessage({
+                'error' : errorMsg,
+                'url' : url
+            }, '*');
+        }
+        console.originalError.apply(console, [errorMsg]);
+        return false;
+    };
+
+    Sandcastle.declare = function(obj) {
+        /*eslint-disable no-empty*/
+        try {
+            //Browsers such as IE don't have a stack property until you actually throw the error.
+            var stack = '';
+            try {
+                throw new Error();
+            } catch (ex) {
+                stack = ex.stack.toString();
+            }
+            var needle = Sandcastle.bucket + ':';   // Firefox
+            var pos = stack.indexOf(needle);
+            if (pos < 0) {
+                needle = ' (<anonymous>:';          // Chrome
+                pos = stack.indexOf(needle);
+            }
+            if (pos < 0) {
+                needle = ' (Unknown script code:';  // IE 11
+                pos = stack.indexOf(needle);
+            }
+            if (pos >= 0) {
+                pos += needle.length;
+                var lineNumber = parseInt(stack.substring(pos), 10);
+                Sandcastle.registered.push({
+                    'obj' : obj,
+                    'lineNumber' : lineNumber
+                });
+            }
+        } catch (ex) {
+        }
+        /*eslint-enable no-empty*/
+    };
+
+    Sandcastle.highlight = function(obj) {
+        if (typeof obj !== 'undefined') {
+            for (var i = 0, len = Sandcastle.registered.length; i < len; ++i) {
+                if (obj === Sandcastle.registered[i].obj || obj.primitive === Sandcastle.registered[i].obj) {
+                    window.parent.postMessage({
+                        'highlight' : Sandcastle.registered[i].lineNumber
+                    }, '*');
+                    return;
+                }
+            }
+        }
+        window.parent.postMessage({
+            'highlight' : 0
+        }, '*');
+    };
+}());

public/static/js/Sandcastle-header.js

@@ -0,0 +1,106 @@
+(function() {
+    'use strict';
+
+    var defaultAction;
+    var bucket = window.location.href;
+    var pos = bucket.lastIndexOf('/');
+    if (pos > 0 && pos < (bucket.length - 1)) {
+        bucket = bucket.substring(pos + 1);
+    }
+
+    window.Sandcastle = {
+        bucket : bucket,
+        declare : function() {
+        },
+        highlight : function() {
+        },
+        registered : [],
+        finishedLoading : function() {
+            window.Sandcastle.reset();
+
+            if(defaultAction) {
+                window.Sandcastle.highlight(defaultAction);
+                defaultAction();
+                defaultAction = undefined;
+            }
+
+            document.body.className = document.body.className.replace(/(?:\s|^)sandcastle-loading(?:\s|$)/, ' ');
+        },
+        addToggleButton : function(text, checked, onchange, toolbarID) {
+            window.Sandcastle.declare(onchange);
+            var input = document.createElement('input');
+            input.checked = checked;
+            input.type = 'checkbox';
+            input.style.pointerEvents = 'none';
+            var label = document.createElement('label');
+            label.appendChild(input);
+            label.appendChild(document.createTextNode(text));
+            label.style.pointerEvents = 'none';
+            var button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'cesium-button';
+            button.appendChild(label);
+
+            button.onclick = function() {
+                window.Sandcastle.reset();
+                window.Sandcastle.highlight(onchange);
+                input.checked = !input.checked;
+                onchange(input.checked);
+            };
+
+            document.getElementById(toolbarID || 'toolbar').appendChild(button);
+        },
+        addToolbarButton : function(text, onclick, toolbarID) {
+            window.Sandcastle.declare(onclick);
+            var button = document.createElement('button');
+            button.type = 'button';
+            button.className = 'cesium-button';
+            button.onclick = function() {
+                window.Sandcastle.reset();
+                window.Sandcastle.highlight(onclick);
+                onclick();
+            };
+            button.textContent = text;
+            document.getElementById(toolbarID || 'toolbar').appendChild(button);
+        },
+        addDefaultToolbarButton : function(text, onclick, toolbarID) {
+            window.Sandcastle.addToolbarButton(text, onclick, toolbarID);
+            defaultAction = onclick;
+        },
+        addDefaultToolbarMenu : function(options, toolbarID) {
+            window.Sandcastle.addToolbarMenu(options, toolbarID);
+            defaultAction = options[0].onselect;
+        },
+        addToolbarMenu : function(options, toolbarID) {
+            var menu = document.createElement('select');
+            menu.className = 'cesium-button';
+            menu.onchange = function() {
+                window.Sandcastle.reset();
+                var item = options[menu.selectedIndex];
+                if (item && typeof item.onselect === 'function') {
+                    item.onselect();
+                }
+            };
+            document.getElementById(toolbarID || 'toolbar').appendChild(menu);
+
+            if (!defaultAction && typeof options[0].onselect === 'function') {
+                defaultAction = options[0].onselect;
+            }
+
+            for (var i = 0, len = options.length; i < len; ++i) {
+                var option = document.createElement('option');
+                option.textContent = options[i].text;
+                option.value = options[i].value;
+                menu.appendChild(option);
+            }
+        },
+        reset : function() {
+        }
+    };
+
+    if (window.location.protocol === 'file:') {
+        if (window.confirm("You must host this app on a web server.\nSee contributor's guide for more info?")) {
+            window.location = 'https://github.com/AnalyticalGraphicsInc/cesium/wiki/Contributor%27s-Guide';
+        }
+    }
+}());

public/static/js/mapbox-streets-v6-style.js

@@ -351,8 +351,10 @@ function createMapboxStreetsV6Style() {
             // stroke.setWidth(1);
             // styles[length++] = text;
             styles[length++] = point
-        }
+        } 
         styles.length = length;
+
+        console.log(styles)
         return styles;
     };
 }

src/App.vue

@@ -11,14 +11,18 @@
                 </li>
             </ul>
         </div>
+        <span class="measure" @click="measure = true">{{measure ? '测量中' : '测量'}}</span>
+        <div id="toolTip" v-show="measure"></div>
     </div>
 </template>
 <script>
 import { start } from "./core/viewer";
+
 export default {
     data() {
         return {
-            layers: null
+            layers: null,
+            measure: false
         };
     },
     created() {
@@ -33,13 +37,18 @@ export default {
             }
         }
     },
+    watch: {
+        measure() {
+            this.measure && this.$bus.$emit('measure')
+        }
+    },
     mounted() {
         start();
+        this.$bus.$on('measureComplete', () => this.measure = false)
     },
     methods: {
         change(item) {
             item.checked = !item.checked;
-
             this.$bus.$emit("setLayer",item);
         }
     }
@@ -62,6 +71,27 @@ img {
     border: 0;
     outline: 0;
 }
+.measure {
+    position: absolute;
+    left: 50%;
+    top: 5px;
+    height: 22px;
+    line-height: 22px;
+    padding: 3px 10px;
+    background: #2c363b;
+    border: solid 1px #b9baba;
+    transform: translateX(-50%);
+    line-height: 22px;
+    font-size: 14px;
+    color: #fff;
+    border: solid 1px #b9baba;
+    border-radius: 6px;
+    cursor: pointer;
+}
+#toolTip {
+    position: absolute;
+    z-index: 2;
+}
 #toolbar {
     cursor: pointer;
     position: absolute;

src/core/grentStyle.js

@@ -0,0 +1,18 @@
+
+export default ({ fillColor, lineWidth, lineColor }) => {
+  const style = new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: fillColor,
+      // stroke:"green"
+    }),
+    stroke: new ol.style.Stroke({
+      color: lineColor,
+      width: lineWidth,
+      lineCap: "round",
+    }),
+  });
+
+  return () => () => {
+    return [style]
+  }
+}

src/core/listen.js

@@ -0,0 +1,31 @@
+import bus from '../utils/bus'
+import { addMakers } from './maker'
+import measure from './measure'
+
+bus.$on('addMaker', async () => {
+  let pois = await addMakers([
+    {
+      text: '市政府',
+      point: [113.070677, 22.5621420]
+    },
+    {
+      text: '市政府',
+      point: [113.086677, 22.591142, 50]
+    },
+    {
+      text: '五邑大学',
+      point: [113.076779, 22.592248, 50]
+    },
+    {
+      text: '市政府',
+      point: [113.076677, 22.592142, 50],
+      size: 68
+    }
+  ])
+})
+
+bus.$on('measure', () => {
+  measure(() => {
+    bus.$emit('measureComplete')
+  })
+})

src/core/maker.js

@@ -0,0 +1,71 @@
+import {
+  PinBuilder,
+  Color,
+  buildModuleUrl,
+  Cartesian3,
+  VerticalOrigin,
+  when
+} from 'cesium/Cesium'
+
+const pinBuilder = new PinBuilder()
+
+
+export const addMaker = async({ href, color = Color.ROYALBLUE, size = 48, point, icon, text, name }) => {
+  const loadPin = p => new Promise(resolve => when(p, canvas => resolve(canvas)))
+  let image
+  
+  if (href) {
+    image = await loadPin(
+      pinBuilder.fromUrl(buildModuleUrl(href), color, size)
+    )
+  } else if (icon) {
+    image = await loadPin(
+      pinBuilder.fromMakiIconId(icon, color, size)
+    )
+  } else if (text){
+    image = pinBuilder.fromText(text, color, size)
+  } else {
+    image = pinBuilder.fromColor(color, size)
+  }
+
+  return viewer.entities.add({
+    position: Cartesian3.fromDegrees(...point),
+    billboard: {
+      image: image.toDataURL(),
+      verticalOrigin: VerticalOrigin.BOTTOM
+    }
+  })
+}
+
+
+/**
+ * 添加Marker
+ * @param {*} args Array<Marker> | Marker
+ * interface Marker {
+ *  name: string,
+ *  color: Color,
+ *  size: number,
+ *  point: Array<number>,
+ *  text?: string,
+ *  href?: string,
+ *  icon?: string
+ * }
+ * @returns Array<entity> | entity
+ */
+export const addMakers = async (args) => {
+  let isArray = true
+  if (!Array.isArray(args)) {
+    args = [args]
+    isArray = false
+  }
+
+  let pins = await Promise.all(
+    args.map(arg => addMaker(arg))
+  )
+  
+  return isArray ? pins : pins[0]
+}
+
+
+export const removeMaker = entity => viewer.entities.remove(entity)
+export const removeMakers = entitys => entitys.map(entity => viewer.entities.remove(entity))

src/core/measure.js

@@ -0,0 +1,150 @@
+import {
+  Entity,
+  Ellipsoid,
+  Cartesian3,
+  PolylineOutlineMaterialProperty,
+  Color,
+  ScreenSpaceEventType,
+  HeightReference,
+  Cartesian2,
+  LabelStyle,
+  VerticalOrigin,
+  ScreenSpaceEventHandler,
+  handler,
+  defined,
+  CallbackProperty,
+  Cartographic,
+  EllipsoidGeodesic
+} from 'cesium/Cesium'
+
+/******************************************* */
+//测量空间直线距离 
+/******************************************* */
+
+var measureLineSpace = function (cb) {
+  var handler = new ScreenSpaceEventHandler(viewer.scene._imageryLayerCollection);
+  var positions = [];
+  var poly = null;
+  var tooltip = document.getElementById("toolTip");
+  var distance = 0;
+  var cartesian = null;
+  var floatingPoint;
+
+  handler.setInputAction(function (movement) {
+    tooltip.style.left = movement.endPosition.x + 3 + "px";
+    tooltip.style.top = movement.endPosition.y - 25 + "px";
+    tooltip.innerHTML = '<p>单击开始，双击结束</p>';
+
+    ///////=================================
+
+    cartesian = viewer.scene.pickPosition(movement.endPosition);
+
+    /////==================================
+    //cartesian = viewer.scene.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid);
+    if (positions.length >= 2) {
+      if (!defined(poly)) {
+        poly = new PolyLinePrimitive(positions);
+      } else {
+        positions.pop();
+        // cartesian.y += (1 + Math.random());
+        positions.push(cartesian);
+      }
+      distance = getSpaceDistance(positions);
+      // console.log("distance: " + distance);
+      // tooltip.innerHTML='<p>'+distance+'米</p>';
+    }
+  }, ScreenSpaceEventType.MOUSE_MOVE);
+
+  handler.setInputAction(function (movement) {
+    // cartesian = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
+    cartesian = viewer.scene.pickPosition(movement.position);
+    if (positions.length == 0) {
+      positions.push(cartesian.clone());
+    }
+    positions.push(cartesian);
+    //在三维场景中添加Label
+    // var cartographic = Cartographic.fromCartesian(cartesian);
+    var textDisance = distance + "米";
+    // console.log(textDisance + ",lng:" + cartographic.longitude/Math.PI*180.0);
+    floatingPoint = viewer.entities.add({
+      name: '空间直线距离',
+      // position: Cartesian3.fromDegrees(cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180,cartographic.height),
+      position: positions[positions.length - 1],
+      point: {
+        pixelSize: 5,
+        color: Color.RED,
+        outlineColor: Color.WHITE,
+        outlineWidth: 2,
+        heightReference: HeightReference.NONE
+      },
+      label: {
+        text: textDisance,
+        font: '18px sans-serif',
+        fillColor: Color.GOLD,
+        style: LabelStyle.FILL_AND_OUTLINE,
+        outlineWidth: 2,
+        verticalOrigin: VerticalOrigin.BOTTOM,
+        pixelOffset: new Cartesian2(20, -20),
+        heightReference: HeightReference.NONE
+      }
+    });
+  }, ScreenSpaceEventType.LEFT_CLICK);
+
+  handler.setInputAction(function (movement) {
+    handler.destroy();//关闭事件句柄
+    positions.pop();//最后一个点无效
+    viewer.entities.remove(floatingPoint);
+    cb()
+  }, ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+
+  var PolyLinePrimitive = (function () {
+    function _(positions) {
+      this.options = {
+        name: '直线',
+        polyline: {
+          show: true,
+          positions: [],
+          material: Color.CHARTREUSE,
+          width: 2
+
+
+        }
+      };
+      this.positions = positions;
+      this._init();
+    }
+
+    _.prototype._init = function () {
+      var _self = this;
+      var _update = function () {
+        return _self.positions;
+      };
+      //实时更新polyline.positions
+      this.options.polyline.positions = new CallbackProperty(_update, false);
+      viewer.entities.add(this.options);
+    };
+
+    return _;
+  })();
+
+};
+
+//空间两点距离计算函数
+function getSpaceDistance(positions) {
+  var distance = 0;
+  for (var i = 0; i < positions.length - 1; i++) {
+
+    var point1cartographic = Cartographic.fromCartesian(positions[i]);
+    var point2cartographic = Cartographic.fromCartesian(positions[i + 1]);
+    /**根据经纬度计算出距离**/
+    var geodesic = new EllipsoidGeodesic();
+    geodesic.setEndPoints(point1cartographic, point2cartographic);
+    var s = geodesic.surfaceDistance;
+    //console.log(Math.sqrt(Math.pow(distance, 2) + Math.pow(endheight, 2)));
+    //返回两点之间的距离
+    s = Math.sqrt(Math.pow(s, 2) + Math.pow(point2cartographic.height - point1cartographic.height, 2));
+    distance = distance + s;
+  }
+  return distance.toFixed(2);
+}
+export default measureLineSpace

src/core/plugins/mvt.js

@@ -196,6 +196,7 @@ export function renderStyle(ol, createMapboxStreetsV6Style, options) {
                 var vectorContext = canvas.getContext('2d');
                 var features = that._mvtParser.readFeatures(arrayBuffer);
                 var styleFun = that._styleFun();
+
                 var extent = [0, 0, 4096, 4096];
                 var _replayGroup = new ol.render.canvas.ReplayGroup(0, extent,
                     8, true, 100);
@@ -207,10 +208,8 @@ export function renderStyle(ol, createMapboxStreetsV6Style, options) {
                     //     feature.properties_.class = 'path'
                     // }
                     var styles = styleFun(features[i], that._resolutions[level]);
-
                     for (var j = 0; j < styles.length; j++)
                     {
-                        // console.log( styles[j])
                         ol.renderer.vector.renderFeature_(_replayGroup, feature, styles[j], 16);
                     }
                 }

src/core/viewer.js

@@ -11,13 +11,36 @@ import {
     formatError,
     Cartesian3,
     Resource,
-    EllipsoidTerrainProvider
+    EllipsoidTerrainProvider,
+    ClockViewModel,
+    Clock,
+    JulianDate,
+    ClockRange,
+    ClockStep
 } from "cesium/Cesium";
 import CesiumNavigation from "./plugins/cesium-navigation-es6";
 import HeatmapImageryProvider from './plugins/HeatmapImageryProvider'
 import { renderStyle } from './plugins/mvt'
 import { points2 } from './heatmap'
 import bus from '../utils/bus'
+import grentStyle from './grentStyle'
+import './listen.js'
+
+function getClockViewModel() {
+    // Create a clock that loops on Christmas day 2013 and runs in 4000x real time.
+    var clock = new Clock({
+        startTime: JulianDate.fromIso8601('2013-12-25'),
+        currentTime: JulianDate.fromIso8601('2013-12-25'),
+        stopTime: JulianDate.fromIso8601('2013-12-26'),
+        clockRange: ClockRange.LOOP_STOP, // loop when we hit the end time
+        clockStep: ClockStep.SYSTEM_CLOCK_MULTIPLIER,
+        multiplier: 16000, // how much time to advance each tick
+        shouldAnimate: true // Animation on by default
+    });
+
+    return new ClockViewModel(clock)
+}
+
 
 async function main() {
 
@@ -53,7 +76,7 @@ async function main() {
             animation: false, //动画控制不显示     
             baseLayerPicker: false,
             fullscreenButton: false, //全屏按钮,默认显示true
-            geocoder: false, //地名查找,默认true
+            geocoder: true, //地名查找,默认true
             timeline: false, //时间线,默认true
             vrButton: false, //双屏模式,默认不显示false
             homeButton: false, //主页按钮，默认true 
@@ -61,12 +84,14 @@ async function main() {
             selectionIndicator: false, //选中元素显示,默认true
             sceneModePicker: false, //是否显示投影方式控件
             navigationHelpButton: false, //是否显示帮助信息控件
-            maximumRenderTimeChange: Infinity,
+            // maximumRenderTimeChange: Infinity,
             requestRenderMode: true,
             scene3DOnly: true,
             imageryProvider: tdtImagerLayerProvider,
+            clockViewModel: getClockViewModel()  //白天黑夜光源控制
         });
 
+
         CesiumNavigation(viewer, {
             // defaultResetView : Rectangle.fromDegrees(80, 22, 130, 50),
             enableCompass: true,
@@ -76,9 +101,9 @@ async function main() {
         });
 
         //使用太阳作为光源，可以照亮地球。
-        viewer.scene.globe.enableLighting = false;
+        viewer.scene.globe.enableLighting = true;
         //关闭地面大气效果，（默认为开启状态）
-        viewer.scene.globe.showGroundAtmosphere = false;
+        // viewer.scene.globe.showGroundAtmosphere = true;
         //FPS 帧率显示
         //viewer.scene.debugShowFramesPerSecond = true;
 
@@ -101,7 +126,7 @@ async function main() {
             }
         })
 
-        var resource = Resource.createIfNeeded('config.json?_'+Date.now());
+        var resource = Resource.createIfNeeded('/config.json?_'+Date.now());
         var config = await resource.fetchJson()
 
         bus.$emit('config', config)
@@ -168,7 +193,9 @@ async function main() {
                 } else {
                     var addLayer;
                     if(layer.type === 'geodata' && layer.url){
-                        addLayer = renderStyle(ol, createMapboxStreetsV6Style, {
+                        let style = layer.fillColor ? grentStyle(layer) : createMapboxStreetsV6Style
+                        
+                        addLayer = renderStyle(ol, style, {
                             url: layer.url+'/{z}/{x}/{y}.pbf',
                             key: "pk.eyJ1IjoibXV5YW8xOTg3IiwiYSI6ImNpcm9ueHd6cjAwNzZoa20xazY1aWlubjIifQ.5tLtC5j1rh8Eqjlyrq3OaA"
                         });
@@ -211,7 +238,6 @@ async function main() {
     } catch (exception) {
         $loadingIndicator.style.display = 'none';
         var message = formatError(exception);
-        console.error(message);
         if (!document.querySelector('.cesium-widget-errorPanel')) {
             window.alert(message); //eslint-disable-line no-alert
         }
@@ -223,4 +249,5 @@ async function main() {
 
 export function start() {
     main()
+    bus.$emit('addMaker')
 }

vue.config.js

@@ -50,9 +50,16 @@ module.exports = {
         }
     },
     devServer: {
-        proxy: 'http://192.168.0.248:8082',
+        proxy: {
+            '/data': {
+                target: 'http://39.108.123.31'
+            },
+            '/': {
+                target: 'http://39.108.123.31'
+            }
+        }
     },
     chainWebpack: config => {
         
     }
-}
+}