|
@@ -1,26 +1,25 @@
|
|
|
-import {LineLayer, PointLayer, PolygonLayer, Popup, RasterLayer, Scene} from "@antv/l7";
|
|
|
-import type {ICameraOptions, ISourceCFG, Point} from "@antv/l7-core";
|
|
|
-import {Map as AntvMap} from "@antv/l7-maps";
|
|
|
-import {formatStringByTemplate} from "@/utils/string";
|
|
|
-import bus from "@/utils/bus";
|
|
|
+import { LineLayer, PointLayer, PolygonLayer, Popup, RasterLayer, Scene } from '@antv/l7'
|
|
|
+import type { ICameraOptions, ISourceCFG, Point } from '@antv/l7-core'
|
|
|
+import { Mapbox } from '@antv/l7-maps'
|
|
|
+import { formatStringByTemplate } from '@/utils/string'
|
|
|
+import bus from '@/utils/bus'
|
|
|
import boundary from '@/assets/json/zmw.json'
|
|
|
import boundaryTri from '@/assets/json/tri.json'
|
|
|
-import thData from '@/assets/json/th.json'
|
|
|
-import thRiverData from '@/assets/json/thly2.json'
|
|
|
-// import river2Data from '@/assets/json/river2.json'
|
|
|
-// import river4Data from '@/assets/json/river4.json'
|
|
|
-// import river5Data from '@/assets/json/river5.json'
|
|
|
+import thData from '@/assets/json/thly-all.json'
|
|
|
+import lakeData from '@/assets/json/lake.json'
|
|
|
+import thly from '@/assets/images/thly-all.png'
|
|
|
|
|
|
-export let scene: Scene;
|
|
|
+
|
|
|
+export let scene: Scene
|
|
|
// 加载状态
|
|
|
-export let loadedStatus = false;
|
|
|
+export let loadedStatus = false
|
|
|
export let imageMap = new Map()
|
|
|
|
|
|
function loadImage(images: any[]) {
|
|
|
images.forEach((item: any) => {
|
|
|
if (!imageMap.has(item.name)) {
|
|
|
- imageMap.set(item.name, item.src);
|
|
|
- scene.addImage(item.name, item.src);
|
|
|
+ imageMap.set(item.name, item.src)
|
|
|
+ scene.addImage(item.name, item.src)
|
|
|
}
|
|
|
})
|
|
|
}
|
|
@@ -29,106 +28,102 @@ function loadImage(images: any[]) {
|
|
|
* 初始化地图
|
|
|
*/
|
|
|
export function init(config: any) {
|
|
|
- loadedStatus = false;
|
|
|
- imageMap = new Map();
|
|
|
+ loadedStatus = false
|
|
|
+ imageMap = new Map()
|
|
|
scene = new Scene({
|
|
|
id: 'mapDiv',
|
|
|
- map: new AntvMap({
|
|
|
- center: [120.69349862882711, 30.929366187471757],
|
|
|
- zoom: 5
|
|
|
- }),
|
|
|
- });
|
|
|
+ map: new Mapbox({
|
|
|
+ center: [118.83, 28.85],
|
|
|
+ zoom: 4,
|
|
|
+ maxZoom: 9,
|
|
|
+ minZoom: 4,
|
|
|
+ pitch: 40, // 地图倾斜度
|
|
|
+ style: 'blank'
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ // //添加太湖流域地图
|
|
|
+ const thMap = new PolygonLayer({})
|
|
|
+ .source(thData) //使用的数据为下载到本地的json数据
|
|
|
+ .shape('extrude') //用于绘制几何体
|
|
|
+ .size(30000)
|
|
|
+ .active({
|
|
|
+ color: 'rgba(0, 0, 0, .1)'
|
|
|
+ })
|
|
|
+ .style({
|
|
|
+ mapTexture: thly,
|
|
|
+ heightfixed: true, //抬升高度是否随 zoom 变化
|
|
|
+ raisingHeight: 1000, //抬升高度
|
|
|
+ sourceColor: '#67bdec', //抬高高度的颜色
|
|
|
+ targetColor: '#67bdec',
|
|
|
+ opacity: 0.5
|
|
|
+ })
|
|
|
+
|
|
|
+ const triLayer = new LineLayer({ zIndex: 2 })
|
|
|
+ .source(boundaryTri)
|
|
|
+ .color('rgb(241,152,49)')
|
|
|
+ .size(2)
|
|
|
+ .style({
|
|
|
+ raisingHeight: 50000
|
|
|
+ })
|
|
|
+
|
|
|
+ scene.addLayer(triLayer)
|
|
|
+
|
|
|
+ const layerBoundary = new LineLayer({ zIndex: 2 })
|
|
|
+ .source(boundary)
|
|
|
+ .size(50)
|
|
|
+ .shape('wall')
|
|
|
+ .style({
|
|
|
+ opacity: 1,
|
|
|
+ sourceColor: '#0DCCFF',
|
|
|
+ targetColor: 'rbga(255,255,255, 0)',
|
|
|
+ raisingHeight: 50000
|
|
|
+ })
|
|
|
+ scene.addLayer(layerBoundary)
|
|
|
+
|
|
|
+ scene.addLayer(thMap)
|
|
|
|
|
|
scene.on('loaded', () => {
|
|
|
loadedStatus = true
|
|
|
loadBaseLayer()
|
|
|
-
|
|
|
// 加载图片
|
|
|
if (config && config.images && config.images.length > 0) {
|
|
|
loadImage(config.images)
|
|
|
}
|
|
|
setTimeout(function() {
|
|
|
- scene.setZoom(6);
|
|
|
- setTimeout(function() {
|
|
|
- scene.setZoom(7);
|
|
|
- setTimeout(function() {
|
|
|
- scene.setZoom(8);
|
|
|
- setTimeout(function() {
|
|
|
- scene.setZoom(9.806292879449915);
|
|
|
-
|
|
|
- }, 200);
|
|
|
- }, 200);
|
|
|
- }, 200);
|
|
|
- }, 200);
|
|
|
- });
|
|
|
+
|
|
|
+ const map = scene.map
|
|
|
+ const startZoom = 4
|
|
|
+ const endZoom = 9
|
|
|
+ const duration = 5000 // 动画持续时间,单位毫秒
|
|
|
+ const interval = 80 // 每次更新间隔,单位毫秒
|
|
|
+ const step = (endZoom - startZoom) * (interval / duration)
|
|
|
+ scene.setCenter([120.83, 31.05])
|
|
|
+ const zoomAnimation = setInterval(() => {
|
|
|
+ const currentZoom = map.getZoom()
|
|
|
+ if (currentZoom >= endZoom) {
|
|
|
+ clearInterval(zoomAnimation)
|
|
|
+ map.setZoom(endZoom)
|
|
|
+ } else {
|
|
|
+ const newZoom = currentZoom + step
|
|
|
+ map.setZoom(newZoom)
|
|
|
+ }
|
|
|
+ }, interval)
|
|
|
+ }, 8000)
|
|
|
+
|
|
|
+ })
|
|
|
|
|
|
// 地图平移时触发事件
|
|
|
scene.on('mapmove', () => {
|
|
|
console.log('中心点:', scene.getCenter().lng, scene.getCenter().lat, scene.getZoom(), scene.getPitch())
|
|
|
- });
|
|
|
-
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
* 加载底图
|
|
|
*/
|
|
|
function loadBaseLayer() {
|
|
|
- // 底图服务
|
|
|
- const url1 = 'https://t0.tianditu.gov.cn/img_w/wmts?tk=a4eab5a1b0d94268669e192b8799f626&';
|
|
|
- const layer1 = new RasterLayer().source(url1, {
|
|
|
- parser: {
|
|
|
- type: 'rasterTile',
|
|
|
- tileSize: 256,
|
|
|
- wmtsOptions: {
|
|
|
- layer: 'img',
|
|
|
- tileMatrixset: 'w',
|
|
|
- format: 'tiles',
|
|
|
- },
|
|
|
- },
|
|
|
- });
|
|
|
- scene.addLayer(layer1);
|
|
|
- loadBoundaryLayer()
|
|
|
- loadBoundaryTriLayer()
|
|
|
- loadRiverLayer()
|
|
|
- // const baseLayer = new RasterLayer().source(
|
|
|
- // `https://t1.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=a4eab5a1b0d94268669e192b8799f626}`,
|
|
|
- // {
|
|
|
- // parser: {
|
|
|
- // type: 'rasterTile',
|
|
|
- // tileSize: 256,
|
|
|
- // }
|
|
|
- // }
|
|
|
- // );
|
|
|
- // scene.addLayer(baseLayer);
|
|
|
-}
|
|
|
-
|
|
|
-// 加载行政区划边界线
|
|
|
-function loadBoundaryLayer() {
|
|
|
- const boundaryLayer = new PolygonLayer().source(boundary).shape('line').size(3).color('#dff619')
|
|
|
- scene.addLayer(boundaryLayer);
|
|
|
- const thLayer = new PolygonLayer().source(thData).shape('line').size(3).color('#dff619')
|
|
|
- scene.addLayer(thLayer);
|
|
|
-}
|
|
|
-
|
|
|
-// 加载长三角示范区边界线
|
|
|
-function loadBoundaryTriLayer() {
|
|
|
- const boundaryLayer = new PolygonLayer().source(boundaryTri).shape('fill').size(3).color('#213cef').style({
|
|
|
- opacity: 0.6,
|
|
|
- })
|
|
|
- scene.addLayer(boundaryLayer);
|
|
|
-}
|
|
|
-
|
|
|
-// 添加河网数据
|
|
|
-function loadRiverLayer() {
|
|
|
- // const river2Layer=new PolygonLayer().source(river2Data).shape('line').size(1.5).color('#4b59b4')
|
|
|
- // scene.addLayer(river2Layer);
|
|
|
- // const river4Layer=new PolygonLayer().source(river4Data).shape('line').size(1).color('#808a93')
|
|
|
- // scene.addLayer(river4Layer);
|
|
|
- // const river5Layer=new PolygonLayer().source(river5Data).shape('line').size(0.5).color('#aed5f3')
|
|
|
- // scene.addLayer(river5Layer);
|
|
|
- const thRiverLayer = new PolygonLayer().source(thRiverData).shape('line').size(0.8).color('#08DAF1')
|
|
|
- scene.addLayer(thRiverLayer);
|
|
|
-
|
|
|
+ setMark(lakeData)
|
|
|
}
|
|
|
|
|
|
/**
|
|
@@ -140,13 +135,13 @@ function loadRiverLayer() {
|
|
|
*/
|
|
|
export function setCenter(center: Point, zoom: number, pitch = 0, padding = {}) {
|
|
|
if (center && zoom) {
|
|
|
- scene.setZoomAndCenter(zoom, center);
|
|
|
+ scene.setZoomAndCenter(zoom, center)
|
|
|
} else if (center) {
|
|
|
- scene.setCenter(center, padding as ICameraOptions);
|
|
|
+ scene.setCenter(center, padding as ICameraOptions)
|
|
|
} else if (zoom) {
|
|
|
- scene.setZoom(zoom);
|
|
|
+ scene.setZoom(zoom)
|
|
|
}
|
|
|
- scene.setPitch(pitch);
|
|
|
+ scene.setPitch(pitch)
|
|
|
}
|
|
|
|
|
|
export function loadMap(option: any) {
|
|
@@ -156,7 +151,7 @@ export function loadMap(option: any) {
|
|
|
}
|
|
|
if (option.layers) {
|
|
|
// 清空图层
|
|
|
- scene.removeAllLayer();
|
|
|
+ scene.removeAllLayer()
|
|
|
// 加载地图
|
|
|
loadBaseLayer()
|
|
|
|
|
@@ -195,24 +190,43 @@ function createPointByCongfig(config: any) {
|
|
|
const layer = new PointLayer({})
|
|
|
.source(config.data, config.dataOptions)
|
|
|
.size(config.size)
|
|
|
- .active(config.emphasis.show);
|
|
|
- setLayerShape(layer, config.shape);
|
|
|
+ .active(config.emphasis.show)
|
|
|
+ setLayerShape(layer, config.shape)
|
|
|
// 颜色配置
|
|
|
// setLayerColor(layer, config.color);
|
|
|
- scene.addLayer(layer);
|
|
|
- setMark(config);
|
|
|
+ scene.addLayer(layer)
|
|
|
+ setMark(config)
|
|
|
// setPopup(layer, config);
|
|
|
|
|
|
// 点击事件
|
|
|
layer.on('click', (e: any) => {
|
|
|
let row = e.feature.properties || e.feature
|
|
|
- bus.emit('point_click', {data: row, e})
|
|
|
- });
|
|
|
+ bus.emit('point_click', { data: row, e })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+function createLakePoint(config: any) {
|
|
|
+ const layer = new PointLayer({})
|
|
|
+ .source(config.data, config.dataOptions)
|
|
|
+ .size(config.size)
|
|
|
+ .active(config.emphasis.show)
|
|
|
+ setLayerShape(layer, config.shape)
|
|
|
+ // 颜色配置
|
|
|
+ // setLayerColor(layer, config.color);
|
|
|
+ scene.addLayer(layer)
|
|
|
+ setMark(config)
|
|
|
+ // setPopup(layer, config);
|
|
|
+
|
|
|
+ // 点击事件
|
|
|
+ layer.on('click', (e: any) => {
|
|
|
+ let row = e.feature.properties || e.feature
|
|
|
+ bus.emit('point_click', { data: row, e })
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
|
|
|
function getValueByConditions(data: any, conditions: any, field: any) {
|
|
|
- let condition;
|
|
|
+ let condition
|
|
|
for (const item of conditions) {
|
|
|
if (compareByConditions(data, item)) {
|
|
|
condition = item
|
|
@@ -221,7 +235,7 @@ function getValueByConditions(data: any, conditions: any, field: any) {
|
|
|
}
|
|
|
|
|
|
if (!condition) {
|
|
|
- return null;
|
|
|
+ return null
|
|
|
}
|
|
|
|
|
|
if (field === 'color') {
|
|
@@ -236,7 +250,7 @@ function getValueByConditions(data: any, conditions: any, field: any) {
|
|
|
return condition.imageName
|
|
|
}
|
|
|
|
|
|
- return null;
|
|
|
+ return null
|
|
|
}
|
|
|
|
|
|
function compareByConditions(data: any, condition: any) {
|
|
@@ -272,7 +286,7 @@ function compareByConditions(data: any, condition: any) {
|
|
|
}
|
|
|
break
|
|
|
}
|
|
|
- return false;
|
|
|
+ return false
|
|
|
}
|
|
|
|
|
|
/**
|
|
@@ -283,14 +297,14 @@ function compareByConditions(data: any, condition: any) {
|
|
|
function getSourceOptions(dataType: any) {
|
|
|
switch (dataType) {
|
|
|
case 'geojson':
|
|
|
- return null;
|
|
|
+ return null
|
|
|
case 'list':
|
|
|
return {
|
|
|
parser: {
|
|
|
type: 'json',
|
|
|
x: '经度',
|
|
|
- y: '纬度',
|
|
|
- },
|
|
|
+ y: '纬度'
|
|
|
+ }
|
|
|
}
|
|
|
default:
|
|
|
}
|
|
@@ -322,8 +336,8 @@ function setLayerColor(layer: any, config: any) {
|
|
|
const field = config.field
|
|
|
const conditions = config.conditions
|
|
|
layer.color(field, (field: any) => {
|
|
|
- return getValueByConditions(field, conditions, 'color');
|
|
|
- });
|
|
|
+ return getValueByConditions(field, conditions, 'color')
|
|
|
+ })
|
|
|
}
|
|
|
}
|
|
|
|
|
@@ -336,17 +350,17 @@ export function setMark(config: any) {
|
|
|
.source(config.data, config.dataOptions)
|
|
|
.shape(config.label.field, 'text')
|
|
|
.size(16)
|
|
|
- .color('#000')
|
|
|
+ .color(config.label.color || '#000')
|
|
|
.style({
|
|
|
textAnchor: config.label.position || 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
|
|
|
textOffset: [0, 40], // 文本相对锚点的偏移量 [水平, 垂直]
|
|
|
spacing: 2, // 字符间距
|
|
|
padding: [1, 1], // 文本包围盒 padding [水平,垂直],影响碰撞检测结果,避免相邻文本靠的太近
|
|
|
- stroke: '#ffffff', // 描边颜色
|
|
|
+ stroke: config.label.stroke || '#ffffff', // 描边颜色
|
|
|
strokeWidth: 2, // 描边宽度
|
|
|
- strokeOpacity: 1.0,
|
|
|
- });
|
|
|
- scene.addLayer(markLayer);
|
|
|
+ strokeOpacity: 1.0
|
|
|
+ })
|
|
|
+ scene.addLayer(markLayer)
|
|
|
}
|
|
|
|
|
|
function setPopup(layer: any, config: any) {
|
|
@@ -360,9 +374,9 @@ function setPopup(layer: any, config: any) {
|
|
|
// offsets: [0, 0], closeButton: false,
|
|
|
const popup = new Popup({})
|
|
|
.setLnglat(e.lngLat)
|
|
|
- .setHTML(content);
|
|
|
- scene.addPopup(popup);
|
|
|
- });
|
|
|
+ .setHTML(content)
|
|
|
+ scene.addPopup(popup)
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
|
|
@@ -379,12 +393,12 @@ function createLineByCongfig(config: any, dataType: any, mapData: any) {
|
|
|
.size(1)
|
|
|
.style({
|
|
|
lineType: 'dash',
|
|
|
- dashArray: [2, 2],
|
|
|
+ dashArray: [2, 2]
|
|
|
})
|
|
|
- .active(config.active);
|
|
|
- scene.addLayer(layer);
|
|
|
- setMark(config);
|
|
|
- setPopup(layer, config.popup);
|
|
|
+ .active(config.active)
|
|
|
+ scene.addLayer(layer)
|
|
|
+ setMark(config)
|
|
|
+ setPopup(layer, config.popup)
|
|
|
}
|
|
|
|
|
|
/**
|
|
@@ -398,12 +412,12 @@ function createPolygonByCongfig(config: any, dataType: any, mapData: any) {
|
|
|
const layer = new PolygonLayer({})
|
|
|
.source(mapData, sourceOptions)
|
|
|
.shape('fill')
|
|
|
- .active(config.active);
|
|
|
+ .active(config.active)
|
|
|
// 颜色配置
|
|
|
- setLayerColor(layer, config.color);
|
|
|
- scene.addLayer(layer);
|
|
|
- setMark(config);
|
|
|
- setPopup(layer, config.popup);
|
|
|
+ setLayerColor(layer, config.color)
|
|
|
+ scene.addLayer(layer)
|
|
|
+ setMark(config)
|
|
|
+ setPopup(layer, config.popup)
|
|
|
}
|
|
|
|
|
|
export function getLegendData(config: any) {
|
|
@@ -411,11 +425,11 @@ export function getLegendData(config: any) {
|
|
|
|
|
|
const layerLegend = layers.reduce((acc: any, item: any) => {
|
|
|
if (item.legend && item.legend.data) {
|
|
|
- return acc.concat(item.legend.data);
|
|
|
+ return acc.concat(item.legend.data)
|
|
|
} else {
|
|
|
- return acc;
|
|
|
+ return acc
|
|
|
}
|
|
|
- }, []);
|
|
|
+ }, [])
|
|
|
|
|
|
// return layerLegend.map((item: any) => {
|
|
|
// const data = {label: item.text}
|