# PlotLink
该功能没有组件,是以纯js的方式实现 点此跳转到示例
# 缩略图
# 示例
<template>
<div class="mapgis-link-test">
//二维地图文档
<div class="mapbox-item top-left">
<mapgis-web-map crs="EPSG:3857" @load="handle2dLoad">
<mapgis-rastertile-layer :url="url" layerId="raster_tdt" />
</mapgis-web-map>
</div>
//三维地图文档
<div class="cesium-item top-right">
<mapgis-web-scene @load="handle3dLoad">
<mapgis-3d-raster-layer :url="url"> </mapgis-3d-raster-layer>
<mapgis-3d-link :enable="link"></mapgis-3d-link>
</mapgis-web-scene>
</div>
//中间的绿色链接按钮
<div :class="{'control-2d-3d': true, 'link-active': link}" v-on:click="changeMode"></div>
</div>
</template>
<script>
import Mapgis3dLink from "../../cesium/src/components/UI/Controls/Link/Link.vue";
import "../style/link.css";
import {SymbolManager,PlotLayer3D,PlotLayer3DGroup,PlotLayer2D,PlotLayer2DGroup,DrawTool,LinkTool} from "@mapgis/webclient-es6-service";
import { FabricLayer } from "@mapgis/webclient-es6-mapboxgl";
export default {
data() {
return {
//是否默认联动
link: true,
//地图文档的url
url: "https://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
//联动对象
rect: {}
};
},
mounted() {
//轮训,确保二三维地图文档对象全部获取
let interval = setInterval(function () {
if(window.canvas && window.cesium){
clearInterval(interval);
//初始化一个符号管理器
window.manager = new SymbolManager(`http://${window.webclient.ip}:${window.webclient.port}/标绘/symbols.json`);
//获取符号信息
window.manager.getSymbols().then(function () {
//获取你的标绘数据,也可为空
let layerJSON = {
"type": "FeatureCollection",
"features": []
}
//创建一个二维或三维图层
// window.layer1 = new PlotLayer3D(Cesium, viewer);
// window.layer1.fromJSON(ttt);
window.layer1 = new PlotLayer2D(fabricCanvas);
//导入图层数据
window.layer1.fromJSON(layerJSON);
//如果是二维,则必须加入fabricCanvas中
let fabricCanvas = window.canvas.getFabricCanvas();
fabricCanvas.addLayer(window.layer1);
//初始化二三维联动工具即可
window.linkTool = new LinkTool(window.layer1,[window.viewer,window.canvas]);
})
}
},100);
},
methods: {
//是否联动
changeMode() {
this.link = !this.link;
},
//获取到cesium对象
handle3dLoad(e) {
window.cesium = e.Cesium;
window.viewer = e.component.viewer;
},
//获取到mapbox对象
handle2dLoad(e) {
window.map = this.map = e.map;
//新建一个fabric对象并保存
const canvas = new FabricLayer(window.map, PlotLayer2DGroup);
const fabricCanvas = canvas.getFabricCanvas();
window.canvas = canvas;
},
}
};
</script>
<style lang="css"></style>