网站推广的途径和方法软文写作技巧

网站推广的途径和方法,软文写作技巧,网站排名掉了怎么办,网站之前没备案一、下载arcgis依赖 # 安装官方发布最新版本 $ npm install arcgis/core # 或安装指定版本 $ npm install arcgis/core4.24 二、配置路径 *** resolve: {alias: {// 若依初始路径//: resolve(src)// 设置路径~: path.resolve(__dirname, ./),// 设置别名: path.resolve(__dir…一、下载arcgis依赖# 安装官方发布最新版本 $ npm install arcgis/core # 或安装指定版本 $ npm install arcgis/core4.24二、配置路径*** resolve: { alias: { // 若依初始路径 //: resolve(src) // 设置路径 ~: path.resolve(__dirname, ./), // 设置别名 : path.resolve(__dirname, ./src), // arcgis资源路径 arcgis/core: path.resolve(__dirname, node_modules/arcgis/core) } }, ***三、arcgis基础组件components/ArcGisMap/index.vue:template div refmapContainer classarcgis-map :style{ width, height }/div /template script setup nameArcGISMap import { ref, onMounted, onUnmounted, watch, defineProps, defineEmits, defineExpose } from vue // 核心 ArcGIS 模块 import Map from arcgis/core/Map import MapView from arcgis/core/views/MapView import Graphic from arcgis/core/Graphic import Point from arcgis/core/geometry/Point import SimpleMarkerSymbol from arcgis/core/symbols/SimpleMarkerSymbol import ScaleBar from arcgis/core/widgets/ScaleBar import Popup from arcgis/core/widgets/Popup // 加载天地图所需图层模块 import WebTileLayer from arcgis/core/layers/WebTileLayer // 引入 ArcGIS 核心样式 import arcgis/core/assets/esri/themes/light/main.css // 1. 定义组件属性 const props defineProps({ // 地图中心点 [经度, 纬度]GCJ02坐标系 center: { type: Array, default: () [125.311,43.8698] // 长春市测绘院 }, // 初始缩放级别 zoom: { type: Number, default: 12 }, // 地图宽高 width: { type: String, default: 100% }, height: { type: String, default: 800px }, // 天地图密钥必填 tiandituKey: { type: String, required: true }, // 天地图类型vec(矢量)、img(影像)、ter(地形) tiandituType: { type: String, default: vec, validator: (val) [vec, img, ter].includes(val) } }) // 2. 定义事件 const emit defineEmits([mapLoaded, mapError]) // 3. 响应式变量 const mapContainer ref(null) let mapInstance null let mapViewInstance null const isMapLoaded ref(false) // 4. 天地图瓦片规则配置核心匹配天地图WMTS的tileInfo // 5. 初始化天地图图层 const initTiandituLayer () { const subDomains [t0, t1, t2, t3, t4, t5, t6, t7]; // 天地图图层URL配置tk后面是天地图密钥 const layerConfig { vec: { base: http://{subDomain}.tianditu.gov.cn/vec_w/wmts?SERVICEWMTSREQUESTGetTileVERSION1.0.0LAYERvecSTYLEdefaultTILEMATRIXSETwFORMATtilesTILECOL{col}TILEROW{row}TILEMATRIX{level}tk7b79e37115f10c512f76cdecda*, anno: http://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICEWMTSREQUESTGetTileVERSION1.0.0LAYERcvaSTYLEdefaultTILEMATRIXSETwFORMATtilesTILECOL{col}TILEROW{row}TILEMATRIX{level}tk7b79e37115f10c512f76cdecda* }, img: { base: http://{subDomain}.tianditu.gov.cn/img_w/wmts?SERVICEWMTSREQUESTGetTileVERSION1.0.0LAYERimgSTYLEdefaultTILEMATRIXSETwFORMATtilesTILECOL{col}TILEROW{row}TILEMATRIX{level}tk7b79e37115f10c512f76cdecda*, anno: http://{subDomain}.tianditu.gov.cn/cva_w/wmts?SERVICEWMTSREQUESTGetTileVERSION1.0.0LAYERcvaSTYLEdefaultTILEMATRIXSETwFORMATtilesTILECOL{col}TILEROW{row}TILEMATRIX{level}tk7b79e37115f10c512f76cdecda* } } // 创建底图图层核心补充tileInfo和spatialReference const baseLayer new WebTileLayer({ urlTemplate: layerConfig[props.tiandituType][base], subDomains: subDomains, // tileInfo: tileInfo, // 匹配瓦片规则 // spatialReference: { wkid: 4490 }, // 匹配天地图坐标系 title: 天地图底图 }) // 创建注记图层 const annoLayer new WebTileLayer({ urlTemplate: layerConfig[props.tiandituType][anno], subDomains: subDomains, // tileInfo: tileInfo, // 注记图层与底图瓦片规则一致 // spatialReference: { wkid: 4490 }, title: 天地图注记 }) return [baseLayer, annoLayer] } // 6. 初始化地图 const initMap async () { try { if (!props.tiandituKey) { throw new Error(天地图密钥不能为空) } // 创建天地图图层 const [baseLayer, annoLayer] initTiandituLayer() // 创建地图实例 mapInstance new Map({ layers: [baseLayer, annoLayer] }) // 创建地图视图核心spatialReference改为4490 mapViewInstance new MapView({ container: mapContainer.value, map: mapInstance, center: props.center, zoom: props.zoom, // spatialReference: { wkid: 4490 }, // 匹配天地图坐标系 // rotationEnabled: false, popup: new Popup({ dockEnabled: true, dockOptions: { position: bottom-right, breakpoint: false } }) }) // 添加比例尺 const scaleBar new ScaleBar({ view: mapViewInstance, unit: metric }) mapViewInstance.ui.add(scaleBar, bottom-left) // 等待地图加载 await mapViewInstance.when() isMapLoaded.value true emit(mapLoaded, { map: mapInstance, view: mapViewInstance }) console.log(✅ 天地图初始化完成4490坐标系) // 添加测试标记匹配4490坐标系 addTestMarker() } catch (error) { isMapLoaded.value false emit(mapError, error) console.error(❌ 天地图初始化失败, error) } } // 7. 添加测试标记适配4490坐标系 const addTestMarker () { if (!mapViewInstance) return const point new Point({ longitude: props.center[0], latitude: props.center[1], spatialReference: { wkid: 4490 } // 标记点坐标系匹配地图 }) const markerSymbol new SimpleMarkerSymbol({ color: [226, 119, 40], outline: { color: [255, 255, 255], width: 2 }, size: 14, style: circle }) const markerGraphic new Graphic({ geometry: point, symbol: markerSymbol, attributes: { name: 测试标记点, desc: Vue3 天地图4490坐标系测试, address: 北京市东城区 } }) mapViewInstance.graphics.add(markerGraphic) // 点击弹窗逻辑不变 mapViewInstance.on(click, async (event) { const hitResult await mapViewInstance.hitTest(event) if (hitResult.results.length) { const graphic hitResult.results[0].graphic if (graphic.attributes) { mapViewInstance.popup.open({ location: event.mapPoint, title: graphic.attributes.name, content: div stylepadding: 8px 0; p描述${graphic.attributes.desc}/p p地址${graphic.attributes.address}/p p坐标${event.mapPoint.longitude.toFixed(6)}, ${event.mapPoint.latitude.toFixed(6)}/p /div }) } } else { mapViewInstance.popup.close() } }) } // 8. 监听属性变化 watch([() props.center, () props.zoom], ([newCenter, newZoom]) { if (mapViewInstance isMapLoaded.value) { mapViewInstance.goTo({ center: newCenter, zoom: newZoom }, { animate: true, duration: 800 }) } }, { deep: true }) watch(() props.tiandituType, async (newType) { if (mapInstance isMapLoaded.value) { mapInstance.layers.removeAll() const [baseLayer, annoLayer] initTiandituLayer() mapInstance.layers.addMany([baseLayer, annoLayer]) console.log(✅ 天地图切换为${newType vec ? 矢量 : newType img ? 影像 : 地形}) } }) // 9. 生命周期 onMounted(() { if (mapContainer.value) initMap() else console.error(地图容器DOM不存在) }) onUnmounted(() { if (mapViewInstance) mapViewInstance.destroy() mapInstance null mapViewInstance null isMapLoaded.value false }) // 10. 暴露方法 defineExpose({ mapViewInstance, isMapLoaded, getCurrentCenter: () { if (isMapLoaded.value mapViewInstance) { return { longitude: mapViewInstance.center.longitude, latitude: mapViewInstance.center.latitude } } return null } }) /script style scoped .arcgis-map { border: 1px solid #e5e7eb; border-radius: 4px; box-sizing: border-box; z-index: 1000; position: relative; } :deep(.esri-popup) { --esri-popup-background-color: #fff; --esri-popup-border-color: #e5e7eb; --esri-popup-title-color: #303133; --esri-popup-content-color: #606266; } :deep(.esri-scale-bar) { background-color: rgba(255, 255, 255, 0.8); border-radius: 4px; } :deep(.esri-layer) { opacity: 1 !important; } /styleviews/zmap/index.vue:template div classapp-container !-- 页面头部 -- div classpage-header el-page-header content天地图测试页 backgoBack/el-page-header el-divider/el-divider el-card shadowhover classcontrol-card el-row :gutter16 alignmiddle !-- 天地图类型切换 -- el-col :span6 el-form-item label天地图类型 el-select v-modeltiandituType changehandleTiandituTypeChange el-option label矢量地图 valuevec/el-option el-option label影像地图 valueimg/el-option /el-select /el-form-item /el-col !-- 其他控件不变 -- el-col :span7 el-form-item label中心点经,纬 el-input v-modelcenterInput changehandleCenterChange clearable/el-input /el-form-item /el-col el-col :span5 el-form-item label缩放级别 el-input-number v-modelzoomLevel :min1 :max20 changehandleZoomChange/el-input-number /el-form-item /el-col el-col :span6 el-button typeprimary clickresetMap重置地图/el-button el-button typesuccess clickgetCurrentCenter获取当前中心/el-button /el-col /el-row /el-card /div !-- 天地图组件核心传入你的天地图密钥 -- ArcGISMap refmapRef :centermapCenter :zoomzoomLevel :tianditu-key574e0a9ee38998d3ff466ae67* :tianditu-typetiandituType height800px mapLoadedhandleMapLoaded mapErrorhandleMapError /ArcGISMap /div /template script setup nameMapTest import { ref } from vue import { ElMessage } from element-plus import { useRouter } from vue-router import ArcGISMap from /components/ArcGISMap const router useRouter() // 核心配置替换为你申请的天地图密钥 const tiandituKey ref(你的天地图密钥) const tiandituType ref(vec) // 默认矢量地图 const mapCenter ref([125.311,43.8698]) const zoomLevel ref(12) const centerInput ref(125.311,43.8698) const mapRef ref(null) // 切换天地图类型 const handleTiandituTypeChange (val) { ElMessage.success(已切换为${val vec ? 矢量地图 : val img ? 影像地图 : 地形地图}) } // 其他方法goBack/handleCenterChange/getCurrentCenter 等不变 const goBack () router.back() const handleCenterChange () { const [lng, lat] centerInput.value.split(,).map(Number) if (isNaN(lng) || isNaN(lat) || lng -180 || lng 180 || lat -90 || lat 90) { ElMessage.error(请输入合法经纬度) centerInput.value ${mapCenter.value[0]},${mapCenter.value[1]} return } mapCenter.value [lng, lat] ElMessage.success(中心点更新为${lng.toFixed(6)}, ${lat.toFixed(6)}) } const handleZoomChange (val) ElMessage.success(缩放级别${val}) const resetMap () { mapCenter.value [125.311,43.8698] zoomLevel.value 12 tiandituType.value vec centerInput.value 125.311,43.8698 ElMessage.success(地图已重置) } const getCurrentCenter () { const center mapRef.value?.getCurrentCenter() if (!center) { ElMessage.warning(地图未加载完成) return } const centerStr ${center.longitude.toFixed(6)},${center.latitude.toFixed(6)} mapCenter.value [center.longitude, center.latitude] centerInput.value centerStr ElMessage.success(当前中心点${centerStr}) } const handleMapLoaded () ElMessage.success(✅ 天地图加载成功) const handleMapError (err) { console.error(err) ElMessage.error(❌ 天地图加载失败) } /script style scoped .app-container { padding: 20px; height: 100vh; box-sizing: border-box; background-color: #f9f9f9; } .page-header { margin-bottom: 20px; } .control-card { margin-bottom: 16px; } :deep(.el-form-item) { margin-bottom: 0; } /stylepermission.js添加例外不要登陆就可访问//修改前 const whiteList [/login, /register] //修改后 const whiteList [/login, /register,/zmap]访问地址根据自己的ip地址http://localhost/zmap