渐变还有些问题需要晚上
引入
import sxs from "@/views/json/sx.json";
import sx from "@/views/json/sx1.json";
import GeoJSON from "ol/format/GeoJSON";
import Polygon, { fromExtent } from "ol/geom/Polygon";
import LinearRing from 'ol/geom/LinearRing';
这块有两个部分的json数据 一个是全陕西省不包括市区的 一个是包括市区的
代码如下
<template><div class="container"><div id="vue-openlayers" class="map-x"></div><divid="info-box"class="info-box"style="width: 100px; height: 100px"></div><div id="canv" style="width: 100px; height: 100px"></div></div>
</template>
<script>
import "ol/ol.css";
import { Map, View, style, Feature, geom, Overlay } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import { Vector as VectorSource } from "ol/source";
import VectorLayer from "ol/layer/Vector";
import { Point, LineString } from "ol/geom";
import { Style, Icon, Stroke, Text, Fill } from "ol/style";
import logo from "@/assets/logo.png";
import * as ol from "ol";
import "ol-ext/dist/ol-ext.css";import sxs from "@/views/json/sx.json";
import sx from "@/views/json/sx1.json";
import GeoJSON from "ol/format/GeoJSON";
import Polygon, { fromExtent } from "ol/geom/Polygon";
import LinearRing from 'ol/geom/LinearRing';export default {name: "FirstMap",data() {return {map: null,draw: null,maskLayer: null,logo,layers: [],polygonFeatureList: [],};},methods: {initMap() {let that = this;// 将图标样式应用到点要素const features = [];const point = new Point([108.56, 34.15]); // 修改坐标格式const feature = new Feature({geometry: point,custom: { data: "123", type: "icon" },type: "icon",});feature.setStyle([new Style({image: new Icon({crossOrigin: "anonymous",src: this.logo,// size: [40, 40],scale: 0.2, // 图标缩放比例}),}),]);features.push(feature);//设置地图的数据源const source = new VectorSource({features,});let markLayerPoints = new VectorLayer({source: source,});let map = new Map({target: "vue-openlayers",layers: [new TileLayer({source: new XYZ({url: "https://gdtc.shipxy.com/tile.g?l=en&m=d&z={z}&x={x}&y={y}",}),}),markLayerPoints, // 确保图层顺序正确// vectorLayers,],view: new View({projection: "EPSG:4326",center: [108.56, 34.15], // 修改中心坐标格式zoom: 6,}),});this.map = map;that.showSFArea() // 蓝色蒙层this.addAreaBoundary3();},addAreaBoundary3() {let that = this;that.removeFun("highLightLayer");sxs.features.forEach((item, index) => {that.addBoundary3(item, index);});},createGradientStyle(text1,adcode) { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); console.log(adcode,'adcode11111');// 创建渐变 let gradient = context.createLinearGradient(0, 0, 0, 256); // gradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); // 渐变开始颜色 // gradient.addColorStop(1, 'rgba(0, 0, 255, 1)'); // 渐变结束颜色 gradient.addColorStop(0, 'rgba(255, 0, 0, 1)'); // 渐变开始颜色 gradient.addColorStop(1, 'rgba(0, 0, 255, 1)'); // 渐变结束颜色 console.log(gradient,'gradient--------')// 创建渐变样式 // return new Style({ // fill: new Fill({ // color: gradient // }), // stroke: new Stroke({ // color: 'black', // width: 1, // }), // }); return new Style({stroke: new Stroke({width: 2,color: "#65E6F9",}),fill: new Fill({color: gradient,}),text: new Text({text: text1.length > 5 ? text1.substring(0, 5) + '\r\n' + text1.substring(5):text1, // 文字内容fill: new Fill({color: "#fff"}),font: 120 / 10 + "px arial",overflow: true // 允许文本超出边界})})},// 行政区域标记颜色addBoundary3 (item, inx, type) {const that = this;that.removeFun("areaShape" + inx);var bdary = item.geometry.coordinates[0];let params = {};var text = item.properties.name;var adcode = item.properties.adcode;// const temp = that.countyData.filter(c => c.name === item.properties.name);// if (temp.length > 0) {// params = temp[0]// }const polygonFeature = new Feature({name: text,// type: "polygon",type: item.geometry.type,geometry: new Polygon(bdary),// geometry: new MultiPolygon(item.geometry.coordinates),// params: params,// style: that.createGradientStyle() // 蓝色渐变});polygonFeature.setStyle(that.createGradientStyle(text,adcode) // 蓝色渐变// new Style({// stroke: new Stroke({// width: 2,// color: "#65E6F9",// }),// fill: new Fill({// color: "rgba(7,58,122,1)",// }),// text: new Text({// text: text.length > 5 ? text.substring(0, 5) + '\r\n' + text.substring(5):text, // 文字内容// fill: new Fill({// color: "#fff"// }),// font: 120 / 10 + "px arial",// overflow: true // 允许文本超出边界// })// }));const polygonLayer = new VectorLayer({abc: '11111111',id: "areaShape" + inx,index: 10,source: new VectorSource({features: [polygonFeature],}),});that.polygonFeatureList.push(polygonLayer);that.map.addLayer(polygonLayer);},// 移除图层方法removeFun(layerId) {const that = this;const selArr = that.map.getLayers().getArray(); // 获取所有图层selArr.map((item, index) => {if (item.values_?.id == layerId) {// 移除图层that.map.removeLayer(selArr[index]);}});},// 创建蒙层，凸显区域showSFArea() {const initLayer = new VectorLayer({name: "blueLayer",// zIndex: 1,// opacity: 0.6,source: new VectorSource(),style: new Style({fill: new Fill({color: "rgba(3, 44, 79, 1)",}),stroke: new Stroke({color: "rgba(0,0,0,0.8)",width: 1})}),});this.map.addLayer(initLayer);this.addConver(initLayer);},// 添加遮罩addConver(converLayer) {let codeJson = sx;var fts = new GeoJSON().readFeatures(codeJson);const ft = fts[0];const converGeom = this.erase(ft.getGeometry());const convertFt = new Feature({geometry: converGeom,});converLayer.getSource().addFeature(convertFt);},// 擦除操作，生产遮罩范围erase(geom) {const extent = [-180, -90, 180, 90];const polygonRing = fromExtent(extent);const coords = geom.getCoordinates();coords.forEach((coord) => {const linearRing = new LinearRing(coord[0]);polygonRing.appendLinearRing(linearRing);});return polygonRing;},},mounted() {this.initMap();},
};
</script>
<style scoped lang="scss">
.input {position: fixed;top: 10px;right: 10px;border-radius: 10px;background: #fff;display: flex;flex-direction: column;padding: 5px;padding-bottom: 10px;> * {margin-top: 10px;display: flex;align-items: center;}
}
</style><style scoped lang="scss">
.container {position: relative;.btn {position: absolute;left: 4%;top: 1%;}
}#vue-openlayers {width: 100vw;height: 100vh;
}h3 {line-height: 40px;
}/* 隐藏信息盒子的初始样式 */
#info-box {display: none;position: absolute;background: white;border: 1px solid black;padding: 10px;border-radius: 5px;font-size: 14px;pointer-events: none; /* 防止信息盒子影响鼠标事件 */
}
</style>
)
)