# 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>