|
|
@@ -1,939 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="zrkj-container">
|
|
|
- <div class="header"></div>
|
|
|
- <div class="map-panel">
|
|
|
- <div
|
|
|
- class="left"
|
|
|
- :style="{
|
|
|
- width: fullScreenFlag ? '50px' : '300px',
|
|
|
- }"
|
|
|
- >
|
|
|
- <div class="right-tool">
|
|
|
- <div
|
|
|
- class="layer-container"
|
|
|
- @click="showLayerControl = !showLayerControl"
|
|
|
- >
|
|
|
- <div class="layer-panel">
|
|
|
- <img src="~@/assets/image/map/icon_layer.png" class="img" />
|
|
|
- </div>
|
|
|
- <div class="layer-content-border" v-if="showLayerControl">
|
|
|
- <div class="layer-content">
|
|
|
- <div
|
|
|
- class="item"
|
|
|
- v-for="(item, index) in layers"
|
|
|
- :key="index + '-13'"
|
|
|
- >
|
|
|
- <div style="color: #ffffff; font-size: 16px">
|
|
|
- {{ item.name }}
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="item"
|
|
|
- v-for="(_item, _index) in item.layers"
|
|
|
- :key="_index + '-14'"
|
|
|
- style="margin: 5px 0"
|
|
|
- >
|
|
|
- <Checkbox
|
|
|
- v-model="_item.checked"
|
|
|
- class="checkbox"
|
|
|
- @click.native.stop=""
|
|
|
- @on-change="switchMapLayer(_item)"
|
|
|
- >{{ _item.name }}
|
|
|
- </Checkbox>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="icon" @click="fullScreen">
|
|
|
- <img
|
|
|
- v-if="!fullScreenFlag"
|
|
|
- src="~@/assets/image/map/fullscreen.png"
|
|
|
- class="img"
|
|
|
- />
|
|
|
- <img
|
|
|
- v-if="fullScreenFlag"
|
|
|
- src="~@/assets/image/map/nofullscreen.png"
|
|
|
- class="img"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <Tooltip content="全图" placement="left">
|
|
|
- <div class="icon" @click="fullQuTu()">
|
|
|
- <img src="~@/assets/image/map/diqiu.png" class="img" />
|
|
|
- </div>
|
|
|
- </Tooltip>
|
|
|
- <Tooltip content="对比" placement="left">
|
|
|
- <div class="icon">
|
|
|
- <i
|
|
|
- class="iconfont icon-shuangpingduibi"
|
|
|
- style="font-size: 24px"
|
|
|
- ></i>
|
|
|
- </div>
|
|
|
- </Tooltip>
|
|
|
- <Tooltip content="卷帘" placement="left">
|
|
|
- <div class="icon">
|
|
|
- <i class="iconfont icon-juanlian" style="font-size: 24px"></i>
|
|
|
- </div>
|
|
|
- </Tooltip>
|
|
|
- <Tooltip content="筛选" placement="left">
|
|
|
- <div class="icon">
|
|
|
- <i class="iconfont icon-shaixuan" style="font-size: 24px"></i>
|
|
|
- </div>
|
|
|
- </Tooltip>
|
|
|
- <Tooltip content="分析" placement="left">
|
|
|
- <div class="icon">
|
|
|
- <i class="iconfont icon-weibiaoti1" style="font-size: 24px"></i>
|
|
|
- </div>
|
|
|
- </Tooltip>
|
|
|
- <Tooltip content="查询" placement="left">
|
|
|
- <div
|
|
|
- class="icon"
|
|
|
- @click="showTipView()"
|
|
|
- :class="{ checked: showTip }"
|
|
|
- >
|
|
|
- <i class="iconfont icon-chakan" style="font-size: 24px"></i>
|
|
|
- </div>
|
|
|
- </Tooltip>
|
|
|
- <Tooltip content="模拟" placement="left">
|
|
|
- <div class="icon">
|
|
|
- <i class="iconfont icon-shijian" style="font-size: 24px"></i>
|
|
|
- </div>
|
|
|
- </Tooltip>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="right"
|
|
|
- :style="{
|
|
|
- width: fullScreenFlag ? 'calc(100% - 50px)' : 'calc(100% - 300px)',
|
|
|
- }"
|
|
|
- >
|
|
|
- <div :id="id" class="a-map"></div>
|
|
|
- <div class="legend-panel" v-show="hot">
|
|
|
- <div class="name">{{ field }}</div>
|
|
|
- <div class="legend"></div>
|
|
|
- </div>
|
|
|
- <div v-show="detailModal" class="detail-panel">
|
|
|
- <LandDetail :item="land"> </LandDetail>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <ai-assistant
|
|
|
- @init_sp="showSpatialAnalysisMap"
|
|
|
- @init_jht="showJhtMap"
|
|
|
- @init_hot="showHotMap"
|
|
|
- @location="location"
|
|
|
- @reset="reset"
|
|
|
- ref="assis"
|
|
|
- ></ai-assistant>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-<script>
|
|
|
-import L from "leaflet";
|
|
|
-import axios from "axios";
|
|
|
-import HeatmapOverlay from "heatmap.js/plugins/leaflet-heatmap";
|
|
|
-import "leaflet.markercluster";
|
|
|
-import { parse } from "wellknown";
|
|
|
-import * as turf from "@turf/turf";
|
|
|
-import AiAssistant from "@/views/ai/MapAiAssistant.vue";
|
|
|
-import dynamicMapLayer from "esri-leaflet/src/Layers/DynamicMapLayer";
|
|
|
-import polygons from "../../static/json/浙江省.json";
|
|
|
-import LandDetail from "./land/LandDetail.vue";
|
|
|
-import { arcgisToGeoJSON } from "@terraformer/arcgis";
|
|
|
-import loginMethods from "@/api/login";
|
|
|
-export default {
|
|
|
- props: {
|
|
|
- contentHeight: Number,
|
|
|
- contentWidth: Number,
|
|
|
- },
|
|
|
- components: {
|
|
|
- AiAssistant,
|
|
|
- LandDetail,
|
|
|
- },
|
|
|
- name: "onemap",
|
|
|
- created() {
|
|
|
- this.$nextTick(() => {});
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- permission: false,
|
|
|
- latitude: 30.287459,
|
|
|
- longitude: 120.153576,
|
|
|
- zoomLevel: 10,
|
|
|
- map: null,
|
|
|
- field: "",
|
|
|
- hot: false,
|
|
|
- geojsonLayer: null,
|
|
|
- fullScreenFlag: false,
|
|
|
- showLayerControl: true,
|
|
|
- layers: [],
|
|
|
- id: "aiMap" + new Date().getTime(),
|
|
|
- intersectGeo: [],
|
|
|
- points: [{ latitude: 29.952107, longitude: 121.713162, value: 9000 }],
|
|
|
- name: null,
|
|
|
- unit: "公顷",
|
|
|
- keyword: "",
|
|
|
- separatedColors: [],
|
|
|
- minVal: 0,
|
|
|
- maxVal: 0,
|
|
|
- heatmapLayer: null,
|
|
|
- markersLayer: null,
|
|
|
- land: null,
|
|
|
- detailModal: false,
|
|
|
- showTip: false,
|
|
|
- geometries: {
|
|
|
- origin: null,
|
|
|
- inLayer: [],
|
|
|
- },
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.initMap();
|
|
|
- this.checkPermision();
|
|
|
- });
|
|
|
- },
|
|
|
- methods: {
|
|
|
- checkPermision() {
|
|
|
- loginMethods
|
|
|
- .permission()
|
|
|
- .then((res) => {
|
|
|
- if (res && res.code == 200) {
|
|
|
- this.permission = res.data;
|
|
|
- }
|
|
|
- })
|
|
|
- .finally(() => {
|
|
|
- if (!this.permission) {
|
|
|
- this.$Message.error("用户信息验证失败，请重新登录！");
|
|
|
- setTimeout(() => {
|
|
|
- this.logout();
|
|
|
- }, 1000);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- logout() {
|
|
|
- this.$store.dispatch("LogOut").then(() => {
|
|
|
- this.$router.push({ name: "login" });
|
|
|
- });
|
|
|
- },
|
|
|
- close() {
|
|
|
- this.detailModal = false;
|
|
|
- if (this.geojsonLayer) {
|
|
|
- this.map.removeLayer(this.geojsonLayer);
|
|
|
- }
|
|
|
- },
|
|
|
- fullQuTu() {
|
|
|
- this.reset();
|
|
|
- this.location(polygons);
|
|
|
- },
|
|
|
-
|
|
|
- initMap() {
|
|
|
- this.layers = window.ApplicationConfig.layerTreeConfig;
|
|
|
- this.layers.forEach((item, index) => {
|
|
|
- if (index == 0) {
|
|
|
- item.checked = true;
|
|
|
- } else {
|
|
|
- item.checked = false;
|
|
|
- }
|
|
|
- });
|
|
|
- let myCenter = new L.LatLng(this.latitude, this.longitude); // 设置地图中心
|
|
|
- this.map = L.map(this.id, {
|
|
|
- center: myCenter,
|
|
|
- zoom: this.zoomLevel,
|
|
|
- });
|
|
|
- var tk = window.ApplicationConfig.tk;
|
|
|
- // var tk = "6dfd31e3b55a8466f34997aee5551a9c";
|
|
|
- // 添加天地图底图
|
|
|
- //底图
|
|
|
- const image = L.tileLayer(
|
|
|
- "http://t{s}.tianditu.gov.cn/img_w/wmts?tk=" +
|
|
|
- tk +
|
|
|
- "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}",
|
|
|
- {
|
|
|
- subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
|
|
|
- zIndex: 1,
|
|
|
- }
|
|
|
- );
|
|
|
- this.map.addLayer(image);
|
|
|
- //注记
|
|
|
- const cia = L.tileLayer(
|
|
|
- "http://t{s}.tianditu.gov.cn/cia_w/wmts?tk=" +
|
|
|
- tk +
|
|
|
- "&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}",
|
|
|
- {
|
|
|
- subdomains: [0, 1, 2, 3, 4, 5, 6, 7],
|
|
|
- transparent: true,
|
|
|
- zIndex: 3,
|
|
|
- }
|
|
|
- );
|
|
|
- this.map.addLayer(cia);
|
|
|
- //默认加载供地图层
|
|
|
- var gd = this.layers[0].layers[0];
|
|
|
- this.switchMapLayer(gd);
|
|
|
- //定位浙江省
|
|
|
- this.location(polygons);
|
|
|
- },
|
|
|
-
|
|
|
- /*
|
|
|
- * 点单击内容函数
|
|
|
- */
|
|
|
- getProjectPopupContent(item) {
|
|
|
- return `<b>名称:${item.name}</b><br>${this.name}:${item.value}${this.unit}`;
|
|
|
- },
|
|
|
- showHotMap(keyword, values, option, field) {
|
|
|
- this.reset();
|
|
|
- this.hot = true;
|
|
|
- this.field = field;
|
|
|
- this.separatedColors = option.dataRange.color.reverse();
|
|
|
- this.minVal = option.dataRange.min;
|
|
|
- this.maxVal = option.dataRange.max;
|
|
|
- this.initLegend();
|
|
|
- var key = "";
|
|
|
- let that = this;
|
|
|
- if (keyword == "全国") {
|
|
|
- key = "china";
|
|
|
- } else {
|
|
|
- key = keyword;
|
|
|
- }
|
|
|
- var url = "/static/json/" + keyword + ".json";
|
|
|
- axios.get(url).then((result) => {
|
|
|
- if (values) {
|
|
|
- var hotLayer = L.geoJSON(result.data, {
|
|
|
- onEachFeature: function (feature, layer) {
|
|
|
- values.forEach((item) => {
|
|
|
- if (feature.properties.name == item.name) {
|
|
|
- feature.properties.value = item.value;
|
|
|
- feature.properties.color = that.getSeparatedColorByVal(
|
|
|
- feature.properties.value
|
|
|
- );
|
|
|
- layer.setStyle({
|
|
|
- stroke: false, //取消边框
|
|
|
- color: feature.properties.color,
|
|
|
- fillOpacity: 0.6, //默认0.2
|
|
|
- });
|
|
|
- var center = new L.LatLng(
|
|
|
- feature.properties.center[1],
|
|
|
- feature.properties.center[0]
|
|
|
- );
|
|
|
- that.map.createPane("marker");
|
|
|
- that.map.getPane("marker").style.zIndex = 999;
|
|
|
-
|
|
|
- const titleIcon = L.marker(center, {
|
|
|
- icon: L.divIcon({
|
|
|
- html: item.value + "公顷 <br>" + item.name,
|
|
|
- // html: item.name + ":" + item.value + "公顷",
|
|
|
- className: "my-div-icon",
|
|
|
- // iconSize: [50, 20],
|
|
|
- iconSize: [150, 50],
|
|
|
- }),
|
|
|
- })
|
|
|
- .bindPopup(function (layer) {
|
|
|
- return `${item.name}${field}:${item.value}公顷`;
|
|
|
- })
|
|
|
- .addTo(that.map);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- });
|
|
|
-
|
|
|
- that.HeatmapOverlay = hotLayer.addTo(that.map);
|
|
|
- that.map.fitBounds(hotLayer.getBounds());
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- showHotMap1(keyword, values, option) {
|
|
|
- if (this.markersLayer) {
|
|
|
- this.map.removeLayer(this.markersLayer);
|
|
|
- }
|
|
|
- var key = "";
|
|
|
- let that = this;
|
|
|
- if (keyword == "全国") {
|
|
|
- key = "china";
|
|
|
- } else {
|
|
|
- key = keyword;
|
|
|
- }
|
|
|
- var url = "/static/json/" + keyword + ".json";
|
|
|
-
|
|
|
- axios.get(url).then((result) => {
|
|
|
- if (values) {
|
|
|
- values.forEach((value) => {
|
|
|
- result.data.features.forEach((item) => {
|
|
|
- if (item.properties.name == value.name) {
|
|
|
- value.latitude = item.properties.center[1];
|
|
|
- value.longitude = item.properties.center[0];
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- /* 热力图 */
|
|
|
- // 配置
|
|
|
- let cfg = {
|
|
|
- radius: 0.05,
|
|
|
- maxOpacity: 0.8,
|
|
|
- scaleRadius: true,
|
|
|
- useLocalExtrema: true,
|
|
|
- latField: "latitude",
|
|
|
- lngField: "longitude",
|
|
|
- valueField: "value",
|
|
|
- };
|
|
|
- that.heatmapLayer = new HeatmapOverlay(cfg);
|
|
|
- that.heatmapLayer.addTo(that.map);
|
|
|
- let hotData = {
|
|
|
- max: 8,
|
|
|
- data: values,
|
|
|
- };
|
|
|
- that.heatmapLayer.setData(hotData);
|
|
|
- that.location(result.data);
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- showJhtMap(keyword, points, name, unit) {
|
|
|
- this.reset();
|
|
|
- this.keyword = keyword;
|
|
|
- this.points = points;
|
|
|
- this.name = name;
|
|
|
- this.unit = unit;
|
|
|
- var key = "";
|
|
|
- if (this.keyword == "全国") {
|
|
|
- key = "china";
|
|
|
- } else {
|
|
|
- key = this.keyword;
|
|
|
- }
|
|
|
- axios.get("/static/json/china.json").then((result) => {
|
|
|
- if (key == "china") {
|
|
|
- this.location(result.data);
|
|
|
- if (this.points) {
|
|
|
- this.points.forEach((value) => {
|
|
|
- result.data.features.forEach((item) => {
|
|
|
- if (item.properties.name == value.name) {
|
|
|
- value.latitude = item.properties.center[1];
|
|
|
- value.longitude = item.properties.center[0];
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- this.showCluster();
|
|
|
- } else {
|
|
|
- var flag = false;
|
|
|
- result.data.features.forEach((item) => {
|
|
|
- if (item.properties.name == this.keyword) {
|
|
|
- this.latitude = item.properties.center[1];
|
|
|
- this.longitude = item.properties.center[0];
|
|
|
- flag = true;
|
|
|
- }
|
|
|
- });
|
|
|
- this.zoomLevel = 7;
|
|
|
- var url = "/static/json/" + this.keyword + ".json";
|
|
|
- axios.get(url).then((result) => {
|
|
|
- this.location(result.data);
|
|
|
- if (this.points) {
|
|
|
- this.points.forEach((value) => {
|
|
|
- result.data.features.forEach((item) => {
|
|
|
- if (item.properties.name == value.name) {
|
|
|
- value.latitude = item.properties.center[1];
|
|
|
- value.longitude = item.properties.center[0];
|
|
|
- if (!flag) {
|
|
|
- this.latitude = item.properties.center[1];
|
|
|
- this.longitude = item.properties.center[0];
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
- this.showCluster();
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- showCluster() {
|
|
|
- // 创建聚合图层
|
|
|
- this.markersLayer = L.markerClusterGroup();
|
|
|
- // 添加点标记
|
|
|
- for (const point of this.points) {
|
|
|
- if (point.latitude) {
|
|
|
- const marker = L.marker([point.latitude, point.longitude], {
|
|
|
- icon: L.icon({
|
|
|
- iconUrl: "~@/assets/image/staticImage/location.png", // 标点图标地址
|
|
|
- iconSize: [30, 30], // 图标大小
|
|
|
- }),
|
|
|
- properties: { name: point.name, value: point.value },
|
|
|
- });
|
|
|
- this.markersLayer.addLayer(marker);
|
|
|
- }
|
|
|
- }
|
|
|
- // 将聚合图层添加到地图上
|
|
|
- this.map.addLayer(this.markersLayer);
|
|
|
- let that = this;
|
|
|
- this.markersLayer.on("click", function (e) {
|
|
|
- e.layer.unbindPopup();
|
|
|
- const elements = that.getProjectPopupContent(
|
|
|
- e.layer.options.properties
|
|
|
- );
|
|
|
- e.layer.bindPopup(elements).openPopup(e.latlng);
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- showSpatialAnalysisMap(geo) {
|
|
|
- this.geometries = geo;
|
|
|
- this.addSpMap();
|
|
|
- },
|
|
|
- addSpMap() {
|
|
|
- const originGeom = parse(this.geometries.origin);
|
|
|
- const geos = L.geoJSON(originGeom, {
|
|
|
- style: function (feature) {
|
|
|
- return { color: "blue" };
|
|
|
- },
|
|
|
- }).bindPopup(function (layer) {
|
|
|
- return `上传图形面积为：${turf
|
|
|
- .area(turf.getGeom(layer.feature.geometry))
|
|
|
- .toFixed(2)}平方米`;
|
|
|
- });
|
|
|
- const bounds = L.latLngBounds();
|
|
|
- bounds.extend(geos.getBounds());
|
|
|
- const { result = {} } = this.geometries;
|
|
|
- let intersects = result.features || [];
|
|
|
- intersects = intersects.map((v) => {
|
|
|
- const geom = turf.polygon(v.geometry.rings);
|
|
|
- geom.properties.name = v.attributes.dkmc;
|
|
|
- return geom;
|
|
|
- });
|
|
|
-
|
|
|
- intersects.forEach((v) => {
|
|
|
- let t = L.geoJSON(v, {
|
|
|
- style: function (feature) {
|
|
|
- return { color: "yellow" };
|
|
|
- },
|
|
|
- }).bindPopup(function (layer) {
|
|
|
- const { feature } = layer;
|
|
|
- return `地块名称：${
|
|
|
- feature.properties.name
|
|
|
- }\n总面积：${turf.area(turf.getGeom(feature.geometry)).toFixed(2)}平方米`;
|
|
|
- });
|
|
|
- bounds.extend(t.getBounds());
|
|
|
- t.addTo(this.map);
|
|
|
- });
|
|
|
- geos.addTo(this.map);
|
|
|
- this.map.fitBounds(bounds);
|
|
|
-
|
|
|
- // 计算所有的相交部分
|
|
|
- this.intersectGeo = [];
|
|
|
- let that = this;
|
|
|
- var count = 0;
|
|
|
- intersects.forEach((v) => {
|
|
|
- count++;
|
|
|
- let t = turf.intersect(originGeom, v);
|
|
|
- const geom = L.geoJSON(t, {
|
|
|
- style: function (feature) {
|
|
|
- return { color: "red" };
|
|
|
- },
|
|
|
- })
|
|
|
- .bindPopup(function (layer) {
|
|
|
- return `相交部分的面积为：${turf
|
|
|
- .area(turf.getGeom(layer.feature.geometry))
|
|
|
- .toFixed(2)}平方米`;
|
|
|
- })
|
|
|
- .addTo(this.map);
|
|
|
- L.geoJSON(v, {
|
|
|
- style: function (feature) {
|
|
|
- var xjmj =
|
|
|
- turf.area(turf.getGeom(t.geometry)).toFixed(2) + "平方米";
|
|
|
- that.intersectGeo.push({
|
|
|
- dkmc: feature.properties.name,
|
|
|
- area: xjmj,
|
|
|
- geo: t,
|
|
|
- });
|
|
|
- if (count == intersects.length) {
|
|
|
- that.$refs.assis.showTable(that.intersectGeo);
|
|
|
- }
|
|
|
- return { color: "yellow" };
|
|
|
- },
|
|
|
- });
|
|
|
- this.flushPolygon(geom);
|
|
|
- });
|
|
|
- },
|
|
|
- location(geo) {
|
|
|
- let t = L.geoJSON(geo, {
|
|
|
- style: function (feature) {
|
|
|
- return { color: "yellow" };
|
|
|
- },
|
|
|
- });
|
|
|
- this.map.fitBounds(t.getBounds());
|
|
|
- },
|
|
|
- reset() {
|
|
|
- let layers = Object.values(this.map._layers);
|
|
|
- layers.forEach((layer) => {
|
|
|
- var flag = false;
|
|
|
- if (layer instanceof L.TileLayer || layer.service) {
|
|
|
- flag = true;
|
|
|
- }
|
|
|
- if (!flag) {
|
|
|
- this.map.removeLayer(layer);
|
|
|
- }
|
|
|
- });
|
|
|
- this.hot = false;
|
|
|
- },
|
|
|
- showTipView() {
|
|
|
- this.showTip = !this.showTip;
|
|
|
- if (this.showTip) {
|
|
|
- this.map.on("click", this.mapClick);
|
|
|
- } else {
|
|
|
- this.map.off("click", this.mapClick);
|
|
|
- this.close();
|
|
|
- }
|
|
|
- },
|
|
|
- mapClick(e) {
|
|
|
- if (this.geojsonLayer) {
|
|
|
- this.map.removeLayer(this.geojsonLayer);
|
|
|
- }
|
|
|
- // debugger
|
|
|
- let query =
|
|
|
- window.ApplicationConfig.gdUrl +
|
|
|
- "/0/query?where=&text=&objectIds=&time=&geometry=" +
|
|
|
- e.latlng.lng +
|
|
|
- "," +
|
|
|
- e.latlng.lat +
|
|
|
- "&" +
|
|
|
- "geometryType=esriGeometryPoint&inSR=4490&spatialRel=esriSpatialRelIntersects&relationParam=&outFields=*&returnGeometry=true&" +
|
|
|
- "maxAllowableOffset=&geometryPrecision=&outSR=&returnIdsOnly=false&returnCountOnly=false&orderByFields=&groupByFieldsForStatistics=&" +
|
|
|
- "outStatistics=&returnZ=false&returnM=false&gdbVersion=&returnDistinctValues=false&f=json";
|
|
|
- axios.get(query).then((data) => {
|
|
|
- console.log(data);
|
|
|
- if (data.data.features.length < 1) {
|
|
|
- this.$Message.info("未查询到数据");
|
|
|
- return;
|
|
|
- }
|
|
|
- this.land = data.data.features[0].attributes;
|
|
|
- var geojson = arcgisToGeoJSON(data.data.features[0].geometry);
|
|
|
- console.log(turf.getGeom(geojson));
|
|
|
-
|
|
|
- this.land.area = turf.area(turf.getGeom(geojson)).toFixed(2) + "平方米";
|
|
|
- var geos = L.geoJSON(geojson, {
|
|
|
- style: function (feature) {
|
|
|
- return { color: "red" };
|
|
|
- },
|
|
|
- });
|
|
|
- this.geojsonLayer = geos.addTo(this.map);
|
|
|
- this.map.fitBounds(geos.getBounds());
|
|
|
- this.detailModal = true;
|
|
|
- });
|
|
|
- },
|
|
|
- flushPolygon(e) {
|
|
|
- let timer = null;
|
|
|
- let i = 1;
|
|
|
- let j = 0.2; //注意要和线的透明度同步修改，保持开始和结束时间一致
|
|
|
- function updateAnimation() {
|
|
|
- if (i < -1) {
|
|
|
- i = 1;
|
|
|
- }
|
|
|
- i = i - 0.01;
|
|
|
- if (j < -0.2) {
|
|
|
- j = 0.2;
|
|
|
- }
|
|
|
- j = j - 0.002; //注意要和线的透明度同步修改，保持开始和结束时间一致
|
|
|
- if (i < 0) e.setStyle({ opacity: i * -1, fillOpacity: j * -1 });
|
|
|
- else e.setStyle({ opacity: i, fillOpacity: j });
|
|
|
- if (!e._map) return cancelAnimationFrame(timer);
|
|
|
- window.requestAnimationFrame(updateAnimation);
|
|
|
- }
|
|
|
-
|
|
|
- window.requestAnimationFrame(updateAnimation);
|
|
|
- },
|
|
|
- switchMapLayer(item) {
|
|
|
- if (item.checked) {
|
|
|
- if (item.layer === undefined || item.layer == null) {
|
|
|
- if (item.type == "dynamic") {
|
|
|
- item.layer = dynamicMapLayer({
|
|
|
- url: item.url,
|
|
|
- opacity: 0.8,
|
|
|
- f: "json",
|
|
|
- });
|
|
|
- }
|
|
|
- if (item.type == "geoserver") {
|
|
|
- item.layer = L.tileLayer.wms(item.url, {
|
|
|
- // 链接要改对应的
|
|
|
- layers: item.layername,
|
|
|
- format: "image/png",
|
|
|
- layerID: Math.random(),
|
|
|
- transparent: true,
|
|
|
- });
|
|
|
- item.layer.setZIndex(100);
|
|
|
- }
|
|
|
- this.map.addLayer(item.layer);
|
|
|
- } else {
|
|
|
- this.map.addLayer(item.layer);
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (item.layer != undefined || item.layer != null) {
|
|
|
- this.map.removeLayer(item.layer);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- fullScreen() {},
|
|
|
- //初始化图例
|
|
|
- initLegend() {
|
|
|
- let legend = this.getLegend();
|
|
|
- let legendDom = document.getElementsByClassName("legend")[0];
|
|
|
- if (legendDom.childNodes.length > 0) {
|
|
|
- legendDom.removeChild(legendDom.childNodes[0]);
|
|
|
- }
|
|
|
- let insertDom = document.createElement("ul");
|
|
|
- let str = ``;
|
|
|
- for (let i = 0; i < legend.length; i++) {
|
|
|
- str += `<li><i style="background: ${legend[i].color}"></i>${legend[
|
|
|
- i
|
|
|
- ].region.join("-")}</li>`;
|
|
|
- }
|
|
|
- insertDom.innerHTML = str;
|
|
|
- legendDom.appendChild(insertDom);
|
|
|
- },
|
|
|
- //根据离散颜色及数据范围生成对应值的颜色
|
|
|
- getSeparatedColorByVal(val) {
|
|
|
- var minVal = this.minVal;
|
|
|
- var maxVal = this.maxVal;
|
|
|
- var colors = this.separatedColors;
|
|
|
- let length = colors.length;
|
|
|
- let avg = ((maxVal - minVal) / length).toFixed(4);
|
|
|
- //生成等分区间
|
|
|
- let regions = [];
|
|
|
- for (let i = 0; i < length; i++) {
|
|
|
- if (i === length - 1) {
|
|
|
- regions.push([minVal + avg * i, maxVal]);
|
|
|
- } else {
|
|
|
- regions.push([minVal + avg * i, minVal + avg * (i + 1)]);
|
|
|
- }
|
|
|
- }
|
|
|
- //返回对应值颜色
|
|
|
- for (let i = 0; i < regions.length; i++) {
|
|
|
- if (val >= regions[i][0] && val <= regions[i][1]) {
|
|
|
- return colors[i];
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- //生成图例
|
|
|
- getLegend() {
|
|
|
- var minVal = this.minVal;
|
|
|
- var maxVal = this.maxVal;
|
|
|
- var colors = this.separatedColors;
|
|
|
- let length = colors.length;
|
|
|
- let avg = ((maxVal - minVal) / length).toFixed(4);
|
|
|
- //生成等分区间
|
|
|
- let regions = [];
|
|
|
- for (let i = 0; i < length; i++) {
|
|
|
- if (i === length - 1) {
|
|
|
- regions.push([(minVal + avg * i).toFixed(0), maxVal.toFixed(0)]);
|
|
|
- } else {
|
|
|
- regions.push([
|
|
|
- (minVal + avg * i).toFixed(0),
|
|
|
- (minVal + avg * (i + 1)).toFixed(0),
|
|
|
- ]);
|
|
|
- }
|
|
|
- }
|
|
|
- let legend = [];
|
|
|
- for (let i = 0; i < length; i++) {
|
|
|
- legend.push({
|
|
|
- color: colors[i],
|
|
|
- region: regions[i],
|
|
|
- });
|
|
|
- }
|
|
|
- return legend;
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style lang="scss" scoped>
|
|
|
-.zrkj-container {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- background: url("~@/assets/image/map/bg.png") no-repeat center;
|
|
|
- background-size: 100% 100%;
|
|
|
- .header {
|
|
|
- width: 100%;
|
|
|
- height: 100px;
|
|
|
- background: url("~@/assets/image/map/icon_top_bg.png") no-repeat 0px 0px;
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- .map-panel {
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
- height: calc(100% - 100px);
|
|
|
- .left {
|
|
|
- width: 350px;
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- .right-tool {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- position: absolute;
|
|
|
- top: 20px;
|
|
|
- left: 20px;
|
|
|
- z-index: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- .right {
|
|
|
- width: calc(100% - 350px);
|
|
|
- height: 100%;
|
|
|
- position: relative;
|
|
|
- display: flex;
|
|
|
- .a-map {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 0;
|
|
|
- }
|
|
|
- .legend-panel {
|
|
|
- position: absolute;
|
|
|
- left: 20px;
|
|
|
- padding: 20px;
|
|
|
- border-radius: 10px;
|
|
|
- background: white;
|
|
|
- bottom: 20px;
|
|
|
- z-index: 999;
|
|
|
- .name {
|
|
|
- font-family: Alibaba PuHuiTi 2;
|
|
|
- font-weight: 500;
|
|
|
- font-size: 16px;
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- .legend {
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .detail-panel {
|
|
|
- z-index: 99;
|
|
|
- // left: 490px;
|
|
|
- left: 20%;
|
|
|
- padding-bottom: 10px;
|
|
|
- background: linear-gradient(0deg, #003065 0%, #003f86 100%);
|
|
|
- width: 50%;
|
|
|
- // top: 20%;
|
|
|
- // bottom: 20px;
|
|
|
- bottom: 5%;
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .layer-container {
|
|
|
- .layer-panel {
|
|
|
- cursor: pointer;
|
|
|
- width: 35px;
|
|
|
- height: 35px;
|
|
|
- border-radius: 5px;
|
|
|
- border: 1px solid #0c3579;
|
|
|
- background: rgba(2, 42, 77, 0.85);
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .layer-content-border {
|
|
|
- position: absolute;
|
|
|
- left: 35px;
|
|
|
- top: 0px;
|
|
|
- padding: 0px 10px;
|
|
|
- z-index: 99;
|
|
|
-
|
|
|
- .layer-content {
|
|
|
- z-index: 99;
|
|
|
- border: 1px solid #0c3579;
|
|
|
- background: rgba(2, 42, 77, 0.9);
|
|
|
- padding: 10px;
|
|
|
- cursor: pointer;
|
|
|
- width: 235px;
|
|
|
- border-radius: 5px;
|
|
|
- z-index: 1;
|
|
|
-
|
|
|
- .item {
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .checkbox {
|
|
|
- // color:#6dcff6;
|
|
|
- color: #fff;
|
|
|
- font-size: 16px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
-
|
|
|
- .ivu-checkbox-inner {
|
|
|
- margin-right: 8px;
|
|
|
- cursor: pointer;
|
|
|
- background-color: transparent;
|
|
|
- border: 1px solid #6dcff6;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .icon {
|
|
|
- margin-top: 10px;
|
|
|
- z-index: 100;
|
|
|
- cursor: pointer;
|
|
|
- color: white;
|
|
|
- width: 35px;
|
|
|
- height: 35px;
|
|
|
- text-align: center;
|
|
|
- line-height: 35px;
|
|
|
- border-radius: 5px;
|
|
|
- border: 1px solid #0c3579;
|
|
|
- background: rgba(2, 42, 77, 0.85);
|
|
|
-
|
|
|
- .img {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- margin-top: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- .checked {
|
|
|
- border: 2px solid;
|
|
|
- color: #ffbe60;
|
|
|
- border-image: linear-gradient(-9deg, #794f0c, #ffbe60, #794c0c) 1 1;
|
|
|
- box-shadow: 0px 0px 5px 0px rgba(255, 186, 0, 0.54);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
-
|
|
|
-<style>
|
|
|
-@import "~leaflet/dist/leaflet.css";
|
|
|
-@import "~leaflet.markercluster/dist/MarkerCluster.css";
|
|
|
-@import "~leaflet.markercluster/dist/MarkerCluster.Default.css";
|
|
|
-.legend ul li {
|
|
|
- padding: 0;
|
|
|
- margin: 0;
|
|
|
- list-style: none;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 5px;
|
|
|
-}
|
|
|
-.my-div-icon {
|
|
|
- font-size: 15px;
|
|
|
- text-align: center;
|
|
|
- font-weight: 500;
|
|
|
- color: white;
|
|
|
-}
|
|
|
-
|
|
|
-.legend ul li i {
|
|
|
- display: inline-block;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- border-radius: 50%;
|
|
|
- margin-right: 8px;
|
|
|
-}
|
|
|
-.leaflet-control-attribution {
|
|
|
- margin: 10px !important;
|
|
|
- border-radius: 8px;
|
|
|
- height: 30%;
|
|
|
- padding: 5px;
|
|
|
-}
|
|
|
-
|
|
|
-.spatial-analysis-info {
|
|
|
- color: blue;
|
|
|
-}
|
|
|
-</style>
|
|
|
-
|
|
|
-
|
liutao