123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864 |
- <template>
- <div style="width:100%;height:100%">
- <div style="width:100%;height:100%">
- <div id="map" ref="rootmap"><div id="popup"></div></div>
- <!-- <div id="textInfo" style="display:none">我是text文本信息</div> -->
- </div>
- <div class="iconSelect" v-if="iconSelect == 1">
- <el-checkbox-group v-model="checkList" @change="handleChange" >
- <el-checkbox v-for="item in dict.type.tl_static_type" :label="item.value" :key="item.value" style="margin-top:1rem">
- <!-- <img class="tipicon" src="../../assets/images/icons/video.png" /> -->
- <img class="tipicon" :src="imageMap[item.value]" />
- <span style="color:white">{{item.label}}</span>
- </el-checkbox>
- </el-checkbox-group>
- </div>
- <div class="iconSelect" v-if="iconSelect == 2">
- <el-checkbox-group v-model="checkList" @change="handleChange" >
- <el-checkbox v-for="item in dict.type.tl_dt_type" :label="item.raw.cssClass" :key="item.value" style="margin-top:1rem">
- <!-- <img class="tipicon" src="../../assets/images/icons/video.png" /> -->
- <img class="tipicon" :src="imageMap[item.raw.cssClass]" />
- <span style="color:white">{{item.label}}</span>
- </el-checkbox>
- </el-checkbox-group>
- </div>
- <div class="iconSelect" v-if="iconSelect == 3">
- <el-checkbox-group v-model="checkList" @change="handleChange" >
- <el-checkbox v-for="item in dict.type.tl_area_type" :label="item.raw.cssClass" :key="item.value" style="margin-top:1rem">
- <!-- <img class="tipicon" src="../../assets/images/icons/video.png" /> -->
- <img class="tipicon" :src="imageMap[item.raw.cssClass]" />
- <span style="color:white">{{item.label}}</span>
- </el-checkbox>
- </el-checkbox-group>
- </div>
- <el-dialog
- title="视频播放"
- :visible.sync="dialogVisible"
- v-if="dialogVisible"
- width="50%"
- :before-close="handleClose"
- >
- <div style="width:100%;height:60rem;position:relative">
- <videodiv :cameracode="ccode" style="width:100%;height:100%;position:absolute;top:0;left:0"></videodiv>
- </div>
- <span slot="footer" class="dialog-footer">
- <el-button @click="handleClose()">关闭</el-button>
- <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
- </span>
- </el-dialog>
- <el-dialog
- title="视频播放ckplayer"
- :visible.sync="dialogVisibleCk"
- v-if="dialogVisibleCk"
- width="50%"
- :before-close="handleCloseCk"
- >
- <div style="width:100%;height:60rem;position:relative">
- <div class="video" id="video" style="width:100%;height:100%;position:absolute;top:0;left:0"></div>
- <!-- <videodiv :cameracode="ccode" style="width:100%;height:100%;position:absolute;top:0;left:0"></videodiv> -->
- </div>
- <span slot="footer" class="dialog-footer">
- <el-button @click="handleCloseCk()">关闭</el-button>
- <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
- </span>
- </el-dialog>
- </div>
- </template>
- <script>
- import "ol/ol.css";
- import Map from "ol/Map";
- // import TileLayer from "ol/layer/Tile";
- // import ImageLayer from "ol/layer/Image";
- import View from "ol/View";
- // import ol from "ol";
- // import {getTopLeft, getWidth} from "ol/extent";
- // import ImageWMS from "ol/source/ImageWMS";
- // import WMTS from "ol/source/WMTS";
- // import TileWMS from "ol/source/TileWMS";
- // import WMTSTileGrid from "ol/tilegrid/WMTS";
- // ol.source.TileImage
- // ol.layer.Tile
- import {get as getProjection, transform} from "ol/proj";
- import {TileGrid} from "ol/tilegrid/TileGrid";
- import {TileImage} from "ol/source/TileImage";
- import {XYZ, Vector as SourceVec} from "ol/source";
- import {Tile,Vector as LayerVec} from "ol/layer";
- import { Polygon } from "ol/geom"
- import Overlay from 'ol/Overlay';
- import {Circle as CircleStyle, Fill, Stroke, Style, Icon, Text } from 'ol/style';
- import {Draw, Modify, Snap} from 'ol/interaction';
- // import {OSM, Vector as SourceVec} from 'ol/source';
- // import {Tile as TileLayer, Vector as LayerVec} from 'ol/layer';
- import {get,fromLonLat } from 'ol/proj';
- import { Feature } from "ol";
- // import {Vector as SourceVec} from "ol/source";
- // import {Feature} from "ol";
- import videodiv from "@/components/Videoplayer/index.vue"
- import { getResource } from "@/api/qdtl/data";
- import {LineString, Point} from "ol/geom";
- import { scale } from 'ol/coordinate';
- import { getLineData } from "@/api/qdtl/data";
- import {toStringHDMS} from 'ol/coordinate';
- // import {Icon, Stroke, Style} from "ol/style";
- // import {Vector as LayerVec} from "ol/layer";
- export default {
- props: {
- pointObj:{type:Object},
- isEdit:false,
- isLine:false,
- lineLocations:{type:Array,default:[]},
- },
- dicts: ['tl_static_type','tl_area_type','tl_dt_type'],
- data() {
- return {
- iconSelectArea:true,
- iconSelect:0,
- checkList:[],
- map: null,
- typeSelect:'Point',
- source:null,
- draw:null,
- snap:null,
- locations:[],
- vector:null,
- pointArry:{},
- mapHashMap:{},
- deviceList:[],
- areaList:[],
- dialogVisible:false,
- ccode:'',
- dialogVisibleCk:false,
- imgBg:require('../../assets/images/imgBg.jpg'),
- imgSrc:'require(../../assets/images/icons/',
- imgtype:'.png)',
- imageMap:{
- video:require('../../assets/images/icons/video.png'),
- location:require('../../assets/images/icons/location.png'),
- stop:require('../../assets/images/icons/stop.png'),
- work:require('../../assets/images/icons/work.png'),
- area:require('../../assets/images/icons/area.png'),
- bridge:require('../../assets/images/icons/bridge.png'),
- train:require('../../assets/images/icons/train.png'),
- rail:require('../../assets/images/icons/rail.png'),
- yjdw:require('../../assets/images/icons/yjdw.png'),
- device:require('../../assets/images/icons/device.png'),
- police:require('../../assets/images/icons/police.png'),
- wrj:require('../../assets/images/icons/wrj.png'),
- yxjl:require('../../assets/images/icons/yxjl.png'),
- },
- popup:null,
- element:null
- };
- },
- components:{
- videodiv
- },
- watch:{
- iconSelect(val, oldVal){//普通的watch监听
- this.checkList = [];
- for(var key in this.mapHashMap){
- this.mapHashMap[key].setVisible(false)
- }
- for(var index in this.deviceList){
- this.deviceList[index].setVisible(false)
- }
- for(var index in this.areaList){
- this.areaList[index].setVisible(false)
- }
- },
- },
- mounted() {
- this.initdev();
- this.initPoint();
- // this.getTrain(),
- this.getLineList();
- window.videosize = "1x1";
- // this.addpoint(point);
- var that = this
- if(this.isLine){
- this.getResource();
- }
- this.map.on("click", function (e) {
- // that.addMarker(e.coordinate,'专家站点.png',0.2);
- var pixel = that.map.getEventPixel(e.originalEvent);
- var feature = that.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
- return feature;
- });
- if (feature) { //这里说明我们点击的是点标记,
- let tadata = feature.get("tadata"); //我们可以通过给点标记传不同的值,来判断点击不同的点标记触发的事件。
- if (tadata) {
- if (tadata.sectionId == "line") {
- // alert("我是线:" + tadata.towerNumber)
- }
- if (tadata.sectionId == "point") {
- if(tadata.type == 'video'){
- that.ccode = tadata.data.cameraIndexCode
- window.cameraid = that.ccode;
- that.dialogVisible = true
- setTimeout(() => {
- that.handleOpen()
- }, 1000);
- }
- if(tadata.type == 'wrj'){
- // that.ccode = tadata.data.cameraIndexCode
- // window.cameraid = that.ccode;
- that.dialogVisibleCk = true
- setTimeout(() => {
- that.loadCkplayer()
- }, 1000);
- }
- if(that.isLine){
- if(tadata.type == 'selected'){
- var style = new Style({
- image: new Icon({
- color: "#eee",
- crossOrigin: "anonymous",
- src: require("../../assets/images/icons/location.png"), //本地的样式
- scale:0.6
-
- })
- })
- tadata.type = 'location'
- feature.setStyle(style);
- that.locationDelete(tadata.data);
- }else{
- var style = new Style({
- image: new Icon({
- color: "#eee",
- crossOrigin: "anonymous",
- src: require("../../assets/images/icons/location2.png"), //本地的样式
- scale:0.6
-
- })
- })
- tadata.data.sortNo = that.lineLocations.length + 1
- tadata.data.locationId = tadata.data.id
- that.lineLocations.push(tadata.data);
- tadata.type = 'selected'
- feature.setStyle(style);
- }
- }
- }
- //含有lnglat 参数的点标记触发事件
- }
- }
- });
- var view = this.map.getView();
- view.on('change:resolution', function (e) {
- });
- view.on('change:center', function (e) {
- });
- this.map.on('moveend', function (e) {
- });
- this.map.on('pointermove', function (evt) {
- if (evt.dragging) {
- return;
- }
- const pixel = that.map.getEventPixel(evt.originalEvent);
- var feature = that.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
- return feature;
- });
- if (feature) { //这里说明我们点击的是点标记,
- let tadata = feature.get("tadata"); //我们可以通过给点标记传不同的值,来判断点击不同的点标记触发的事件。
- if (tadata) {
- if (tadata.sectionId == "line") {
- // alert("我是线:" + tadata.towerNumber)
- }
- if (tadata.sectionId == "point") {
- // that.addText(evt.coordinate);
- // console.log(tadata);
- $(that.element).popover('dispose');
- that.popup.setPosition(evt.coordinate);
- if(tadata.data.pic){
- // var src = 'http://58.221.168.61:9000/api/common/download/resource?resource=/profile/bx/1.jpg'
- var src = 'http://58.221.168.61:9000/api'+tadata.data.pic
- $(that.element).popover({
- placement: 'top',
- html: true,
- content: '<div><div class="imgClass" style="width:10rem;height:10rem"><img style="width:10rem;height:10rem" src="'+src+'" class="imgClass"/></div><br/><span style="text-align:center">'+tadata.data.name+'</span></div>',
- });
- }else{
- $(that.element).popover({
- placement: 'top',
- html: true,
- content: '<div><img src="'+that.imgBg+'" style="width:5rem;height:5rem"/><br/><span style="text-align:center">'+tadata.data.name+'</span></div>',
- });
- }
- $(that.element).popover('show');
- // } else {
- // $(element).popover('dispose');
- // }
- // popup = new OpenLayers.Popup.FramedCloud("Popup",
- // new OpenLayers.LonLat(5.6, 50.6),
- // null,
- // '<div>Hello World! Put your html here</div>',
- // null,
- // false);
- // this.map.addPopup(popup);
- }else{
- // console.log(1111111);
- $(that.element).popover('dispose');
- }
- //含有lnglat 参数的点标记触发事件
- }
- }
-
- })
- },
- methods: {
- locationDelete(data){
- for(var index in this.lineLocations){
- if(this.lineLocations[index].locationId == data.locationId){
- this.lineLocations.splice(index,1);
- }else if(this.lineLocations[index].sortNo > data.sortNo){
- this.lineLocations[index].sortNo = this.lineLocations[index].sortNo-1
- }
- }
- },
- loadCkplayer(){
- // var videoObject = {
- // container: '.video', //“#”代表容器的ID,“.”或“”代表容器的class
- // variable: 'player', //播放函数名称,该属性必需设置,值等于下面的new ckplayer()的对象
- // autoplay:true,
- // live:true,
- // overspread:true,//是否让视频铺满播放器
- // plug:'flv.js',//m3u8-hls形式播放视频
- // // video: 'rtmp://58.200.131.2:1935/livetv/cctv1'//视频地址
- // video:'rtmp://39.104.22.45:30498/rtp/34020001001320000001_34020001001320000001'//视频地址
- // // video:'http://39.104.22.45:8089/rtp/34020001001320000001_34020001001320000001/hls.m3u8'
- // };
- var videoObject = {
- container: '.video', //容器的ID或className
- variable: 'player', //播放函数名称,该属性必需设置,值等于下面的new ckplayer()的对象
- autoplay:true,
- live:true,
- plug:'flv.js',//设置使用hls插件
- video:'rtmp://39.104.22.45:30498/rtp/34020001001320000001_34020001001320000001'
- };
- window.player = new ckplayer(videoObject);
- },
- getResource(){
- getResource({date:'2022-03-12'}).then(response =>{
- var selectLocation = [];
- var stationLocation = [];
- if(this.lineLocations != null){
- for(var index in this.lineLocations){
- var obj = this.lineLocations[index]
- obj.fence = obj.lnglat
- obj.name = obj.locationName
- selectLocation.push(obj)
- }
- }
- for(var i in response.data.staticLocation){
- var obj = response.data.staticLocation[i]
- obj.fence = obj.lnglat
- obj.name = obj.locationName
- obj.locationId = obj.id
- var isSelected = 0;
- for(var j in selectLocation){
- if(obj.id == selectLocation[j].locationId){
- isSelected = 1
- }
- }
- if(isSelected == 0){
- stationLocation.push(obj)
- }
- }
- this.addPoints(stationLocation,'location.png',0.6,'location');
- this.addPoints(selectLocation,'location2.png',0.6,'selected');
- })
- },
- addText(location) {
- var textInfo = new Overlay({
- position: fromLonLat(location),
- offset: [20, -20],
- element: document.getElementById("textInfo")
- });
- this.map.addOverlay(textInfo);
- },
- getTrain(){
- var trainArry = [[121.645366,31.856052],[121.636002,32.02354],[121.530258,32.086391]];
- for(var index in trainArry){
- this.addMarker(trainArry[index],'train.png',0.6,'marker');
- }
- },
- getLineList(){
- getLineData().then(data =>{
- for(var index in data.data){
- var obj = data.data[index]
- if(obj.configKey.indexOf('lined') > -1){
- var lineLocations ="["+obj.configValue+"]"
- var json = JSON.parse(lineLocations);
- this.addline(json,1);
- }else if(obj.configKey.indexOf('lineun') > -1){
- var lineLocations ="["+obj.configValue+"]"
- var json = JSON.parse(lineLocations);
- this.addline(json,2);
- }
- }
- })
- },
- initdev: function () {
- var projection = getProjection("EPSG:3857");
- const satellite = new Tile({ // 卫星地图
- visible: false, // 显示或隐藏(用于切换地图图层(卫星切换街道))
- source: new XYZ({
- attributions: '',
- url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}&scl=1<ype=10'
- })
- })
- const street = new Tile({ // 街道地图
- visible: true, // 显示或隐藏(用于切换地图图层(卫星切换街道))
- source: new XYZ({
- attributions: '',
- url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
- })
- })
- this.source = new SourceVec();
- const vector = new LayerVec({
- source: this.source,
- style: new Style({
- fill: new Fill({
- color: 'rgba(255, 255, 255, 0.2)',
- }),
- stroke: new Stroke({
- color: '#ffcc33',
- width: 2,
- }),
- image: new CircleStyle({
- radius: 7,
- fill: new Fill({
- color: '#ffcc33',
- }),
- }),
- }),
- });
- this.vector = vector;
- // 创建地图
- const map = new Map({
- target: 'map',
- layers: [ // 图层放置(类似有卫星图层,街道图层等)
- satellite,
- street,
- vector
- ],
- view: new View({
- zoom: 11, // 当前缩放
- maxZoom: 16, // 最大缩放
- minZoom: 8, // 最小缩放
- projection: 'EPSG:4326',
- center: [121.65523,31.892831], // 中心坐标
- })
- })
- street.setVisible(false)
- satellite.setVisible(true)
- const modify = new Modify({source: this.source});
- map.addInteraction(modify);
- this.map = map;
- if(this.isEdit){
- this.addInteractions();
- }
- var that = this;
- this.element = document.getElementById('popup');
- this.popup = new Overlay({
- element: this.element,
- positioning: 'bottom-center',
- stopEvent: false,
- });
- this.map.addOverlay(this.popup);
- },
- addInteractions() {
- var that = this
- let draw = new Draw({
- source: this.source,
- type: this.typeSelect,
- });
- draw.on('drawend',that.getLocation,this);
- draw.on('drawstar',that.removeDraw,this);
- // draw.on('drawstart',that.removeDraw,this);
- this.draw = draw;
- this.map.addInteraction(draw);
- let snap = new Snap({source: this.source});
- this.snap = snap;
- this.map.addInteraction(snap);
- },
- getLocation(evt){
- var feature = evt.feature;
- var geo = feature.getGeometry();
- var cor = geo.getCoordinates();
- this.locations = cor;
- },
- changeAddInteractions(evt) {
- this.map.removeInteraction(this.draw);
- this.map.removeInteraction(this.snap);
- this.addInteractions();
- },
- removeDraw(evt){
- if(this.locations.length > 0){
- this.vector.getSource().clear()
- }
- },
- removeLayer(id){
- var layers = this.pointArry[id];
- this.map.removeLayer(layers);
- },
- addMarker(lnglats,icon,size,id,data,type) {
- let tamarker = new Feature({
- tadata: {
- sectionId: "point",
- towerNumber: 22,
- data: data,
- type: type
- }, //这里是用来传值用的,在接下来的一章里(事件)中我会讲到。
- geometry: new Point(lnglats) //这里是点坐标的位置,这里要注意fromLonLat
- });
- tamarker.setStyle(
- new Style({
- image: new Icon({
- color: "#eee",
- crossOrigin: "anonymous",
- src: require("../../assets/images/icons/" + icon), //本地的样式
- scale:size
- }),
- },)
- ); //这里是样式
- var markerta = new LayerVec({
- source: new SourceVec({
- features: [tamarker] //这里放的就是之前的那个点,如果要放置多个点直接push到这里面就行了
- }),
- zIndex:30
- });
- this.pointArry[id]=markerta;
- this.map.addLayer(markerta); //这里是执行,执行之后点就出来了
- },
- addPoints(data,icon,size,type){
- var tamarkerArry =[]
- let tamarker = null
- for(var index in data){
- if(type === 'video'){
- tamarker = new Feature({
- tadata: {
- sectionId: "point",
- towerNumber: 22,
- data:data[index],
- type:type
- }, //这里是用来传值用的,在接下来的一章里(事件)中我会讲到。
- geometry: new Point([data[index].longitude, data[index].latitude]) //这里是点坐标的位置,这里要注意fromLonLat
- });
- }else {
- tamarker = new Feature({
- tadata: {
- sectionId: "point",
- towerNumber: 22,
- data:data[index],
- type:type
- }, //这里是用来传值用的,在接下来的一章里(事件)中我会讲到。
- geometry: new Point(data[index].fence.split(',')) //这里是点坐标的位置,这里要注意fromLonLat
- });
- }
- tamarker.setStyle(
- new Style({
- image: new Icon({
- color: "#eee",
- crossOrigin: "anonymous",
- src: require("../../assets/images/icons/" + icon), //本地的样式
- scale:size,
- anchor: [0.5, 60], //锚点
- anchorOrigin:'top-right', //锚点源
- anchorXUnits: 'fraction', //锚点X值单位
- anchorYUnits: 'pixels', //锚点Y值单位
- offsetOrigin: 'top-right', //偏移原点
- }),
- },)
- ); //这里是样式
- tamarkerArry.push(tamarker);
- }
- var markerta = new LayerVec({
- source: new SourceVec({
- features: tamarkerArry //这里放的就是之前的那个点,如果要放置多个点直接push到这里面就行了
- }),
- zIndex:30
- });
- // markerta.on('mouseover', markerta, function(evt) {
- // console.log(evt);
- // popup = new OpenLayers.Popup.FramedCloud("Popup",
- // new OpenLayers.LonLat(5.6, 50.6),
- // null,
- // '<div>Hello World! Put your html here</div>',
- // null,
- // false);
- // this.map.addPopup(popup);
- // });
- // //here add mouseout event
- // markerta.on('mouseout', markerta, function(evt) {popup.hide();});
- // this.pointArry.set(id,markerta);
- this.map.addLayer(markerta); //这里是执行,执行之后点就出来了
- markerta.setVisible(false);
- if(type == 'device'){
- this.deviceList.push(markerta);
- }else{
- this.mapHashMap[type]=markerta;
- }
- if(this.isLine){
- markerta.setVisible(true);
- }
- // markerta.setVisible(true)
- },
- addline: function(lnglats,type) {
- let line = new Feature({
- tadata: {
- sectionId: "line",
- towerNumber: 22
- },
- geometry: new LineString(lnglats)
- }); //这里要注意写fromLonLat,很重要
-
- var style =this.getStyle(type);
- line.setStyle(style);
- var linevectorLayer = new LayerVec({
- source: new SourceVec({
- features: [line] //要绘制多段线,直接push到这里面就行了
- })
- });
- if(type == 'device'){
- this.deviceList.push(linevectorLayer);
- linevectorLayer.setVisible(false)
- }
- this.map.addLayer(linevectorLayer); //这里是执行,执行之后点就出来了
- },
- addPolygon(item) {
- var polygon = new Feature({
- geometry: new Polygon(item),
- type: "polygon",
- });
- let style = [
- new Style({
- fill: new Fill({
- color: "rgba(5,96,187,0.2)",
- }),
- // 描边
- stroke: new Stroke({
- color:"#0560BB",
- width:3,
- lineDash:[10,20],
- lineCap:"butt"
- }),
- zIndex: 10,
- }),
- ];
- polygon.setStyle(style);
- var polygonLayer = new LayerVec({
- source: new SourceVec({
- features: [polygon]
- })
- });
- this.map.addLayer(polygonLayer);
- this.areaList.push(polygonLayer);
- polygonLayer.setVisible(false)
- },
- initPoint(){
- var pointObj = this.pointObj;
- if(pointObj){
- if(pointObj.type == 2){
- this.addMarker(pointObj.locations.split(','),'左侧-车站-高亮.png',0.2,'marker');
- }
- if(pointObj.type == 5){
- this.addMarker(pointObj.locations.split(','),'专家站点.png',0.2,'marker');
- }
- }
- },
- transpoints: function(points, type) {
- if (false) {
- return points;
- } else {
- if (type == 1) {
- var pp = [];
- points.forEach(point => {
- pp.push(transform(point, "EPSG:3857", "EPSG:4326"));
- });
- return pp;
- } else {
- var pp = [];
- points.forEach(point => {
- pp.push(transform(point, "EPSG:4326", "EPSG:3857"));
- });
- return pp;
- }
- }
- },
- handleClose(){
- closevideo();
- this.dialogVisible = false
- },
- handleCloseCk(){
- this.dialogVisibleCk = false
- },
- handleOpen(){
- window.cameraid = this.ccode;
- startPreview(window.cameraid,-1);
- },
- handleChange(value){
- for(var key in this.mapHashMap){
- this.mapHashMap[key].setVisible(false)
- }
- for(var index in this.deviceList){
- this.deviceList[index].setVisible(false)
- }
- for(var index in this.areaList){
- this.areaList[index].setVisible(false)
- }
- for(var index in value){
- if(value[index] == 'device'){
- for(var index in this.deviceList){
- this.deviceList[index].setVisible(true)
- }
- }else if(value[index] == 'area'){
- for(var index in this.areaList){
- this.areaList[index].setVisible(true)
- }
- }else{
- var mapkey = value[index]
- if(this.mapHashMap[mapkey]){
- this.mapHashMap[mapkey].setVisible(true)
- }
- }
- }
- },
- getStyle(type){
- var style = new Style({
- stroke: new Stroke({
- width: 3,
- color: "#008000"
- })
- })
- if(type == 1){
- style =[
- new Style({
- stroke: new Stroke({
- color:"#000000",
- width:6,
- lineCap:"butt"
- }),
- zIndex:20
- }),
- new Style({
- stroke: new Stroke({
- color:"#ffffff",
- width:6,
- lineDash:[15,15],
- lineCap:"butt"
- }),
- zIndex:21
- })
- ]
- }else if(type == 2){
- style =[
- new Style({
- stroke: new Stroke({
- color:"#000000",
- width:6,
- lineDash:[15,45],
- lineCap:"butt"
- }),
- zIndex:20
- }),
- new Style({
- stroke: new Stroke({
- color:"#ffffff",
- width:6,
- lineDash:[15,45],
- lineDashOffset:30,
- lineCap:"butt"
- }),
- zIndex:21
- })
- ]
- }else if(type == 'device'){
- style =new Style({
- stroke: new Stroke({
- color:"#07DBFF",
- width:6,
- lineDash:[15,45],
- lineCap:"butt"
- }),
- zIndex:20
- })
- }
- return style;
- }
- }
- };
- </script>
- <style scoped>
- #map {
- height: 100%;
- }
- .iconSelect{
- position: absolute;
- top: 10rem;
- right: 5rem;
- width: 16rem;
- min-height: 30rem;
- background-color: transparent ;
- padding-left:1rem
- }
- .tipicon{
- width:3rem;
- height:3rem;
- vertical-align: middle;
- }
- img{
- width:10rem;
- height:10rem
- }
- .popover-body{
- width:100px;
- height:100px;
- }
- .imgClass{
- width:10rem;
- height:10rem
- }
- </style>
|