React+Openlayers加载无偏差百度地图
获得百度地图图层baidu.tsx
import { applyTransform } from "ol/extent";import TileLayer from "ol/layer/Tile";import { addCoordinateTransforms, addProjection, Projection } from "ol/proj";import { Tile, TileImage, XYZ } from "ol/source";import TileGrid from "ol/tilegrid/TileGrid";import proj4 from 'proj4/dist/proj4'import { register } from 'ol/proj/proj4';const baiduLayer = () => {proj4.defs("EPSG:4008", "+proj=longlat +ellps=clrk66 +no_defs");proj4.defs("BD-MC", "+proj=merc +lon_0=0 +units=m +ellps=clrk66 +no_defs");register(proj4);/*定义百度地图分辨率与瓦片网格*/var resolutions = [];for (var i = 0; i <= 18; i++) { resolutions = Math.pow(2, 18 - i);}var tilegrid = new TileGrid({ origin: , resolutions: resolutions});var source = new TileImage({ projection: "BD-MC", tileGrid: tilegrid, tileUrlFunction: function (tileCoord: any, pixelRatio: any, proj: any) { //openlayers6的版本 let z = tileCoord; let x = tileCoord; let y = -tileCoord - 1; if (x < 0) x = "M" + (-x); if (y < 0) y = "M" + (-y); let num = Math.ceil(Math.random() * 3); return ( "http://maponline" + num + ".bdimg.com//onlinelabel/?qt=vtile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20200211&scaler=1&p=0" ); }});var mapLayer = new TileLayer({ source: source});return mapLayer;}export default baiduLayer
在index页面放入图层
index.tsx
import React, { createRef, useEffect, useRef } from 'react';import { Map, View, Feature } from 'ol';import { Point } from 'ol/geom'; //点import { Icon, Style } from 'ol/style';import VectorLayer from 'ol/layer/Vector';import VectorSource from 'ol/source/Vector';import 'ol/ol.css';import styles from './index.less';import poiImg from '@/assets/images/house.png';import { transform } from 'ol/proj';import baiduLayer from './baidu'const Index: React.FC = () => {// 地图const map = useRef<any>();// 地图容器const mapDom = createRef<HTMLDivElement>();useEffect(() => { // 初始化地图 initMap() // 加载标注测试偏移(北京国旗百度地图坐标) createFeature(, poiImg, 'iconFeature');});/** * 初始化地图 */const initMap = () => { //获得图层 let baiduLayers = baiduLayer(); map.current = new Map({ target: 'map', layers: [ baiduLayers ], view: new View({ center: transform(, 'EPSG:4326', "BD-MC"), projection: "BD-MC", zoom: 18, maxZoom: 18, }), });}//创建标注const createFeature = (featureData: any, featureImg: string, color: string) => { // 创建标注 if (featureData.length > 0) { let iconFeatures: any; iconFeatures = new Array(); iconFeatures.push(new Feature({ geometry: new Point(transform(featureData, 'EPSG:4326', "BD-MC")) })) // 将标注属性添加到矢量数据源中 let iconSource = new VectorSource({ features: iconFeatures }) //将标注矢量数据源添加到矢量层 let iconLayer = new VectorLayer({ source: iconSource, zIndex: 3, style: () => { return new Style({ image: new Icon({ anchor: , scale: 0.12, src: featureImg }) }) } }) // 将矢量层添加到地图 map.current.addLayer(iconLayer); }}return ( <span> <div id="map" className={styles.map} ref={mapDom} /> </span>)}export default Index测试 (116.403931,39.91328)北京国旗 百度坐标
我的百度地图
百度坐标拾取系统
页:
[1]